Input
A labelled text field with a description.
We send the receipt here.
forSlots(InputSlots)(Recipes.Input({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const InputStyle = forSlots(InputSlots)(Recipes.Input({}))
export const input = (style: NamedStyle<typeof InputSlots>, h: HtmlBuilder<never>): Html =>
Input.view(
{
id: 'email',
type: 'email',
placeholder: 'ada@example.com',
described: true,
style,
draw: (resolved, h) =>
h.div(
[],
[
h.label(resolved.label, ['Email']),
h.input(resolved.input),
h.span(resolved.description, ['We send the receipt here.']),
],
),
},
h,
)