Number field
A number typed or stepped, inside its bounds and on its step.
From 1 to 12; the arrow keys step it.
forSlots(NumberFieldSlots)(Recipes.NumberField({}))
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 NumberFieldStyle = forSlots(NumberFieldSlots)(Recipes.NumberField({}))
export const numberField = <Message>(
style: NamedStyle<typeof NumberFieldSlots>,
value: number,
onChange: (value: number) => Message,
h: HtmlBuilder<Message>,
): Html =>
NumberField.view(
{
id: 'servings',
label: 'Servings',
description: 'From 1 to 12; the arrow keys step it.',
value,
onChange,
min: 1,
max: 12,
style,
},
h,
)