Select
The native select, styled like the fields beside it.
forSlots(SelectSlots)(Recipes.Select({}))
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 SelectStyle = forSlots(SelectSlots)(Recipes.Select({}))
export const select = (style: NamedStyle<typeof SelectSlots>, h: HtmlBuilder<never>): Html =>
UiSelect.view(
{
id: 'region',
toView: Select.toView([style.mixin], { h }, resolved =>
h.div(
[],
[
h.label(resolved.label, ['Region']),
h.select(
resolved.select,
['Europe', 'Americas', 'Asia Pacific'].map(region => h.option([], [region])),
),
],
),
),
},
h,
)