Select
Select is a styled native dropdown for short, fixed option lists — status, role, category — where search is unnecessary and native form submission matters.
Provide <option> children with explicit values, bind a string signal, and use default_value to hydrate server defaults. For searchable or multi-select pickers, use Combobox instead.
- Fixed, short option lists (status, role, category)
- Native form posts where a
<select>is appropriate - Settings where search/filter is not required
- Add
<option value="…">children insideSelect. - Bind
valuewithSelectBind(typicallyRwSignal<String>) for controlled updates. - Pass
default_valueonSelectAppearancewhen the first rendered value should differ from an empty signal. - Wrap in Field when a visible label or validation message is needed.
- Attach
rulesonSelectBind(e.g.SelectRule::required) for field-level validation.
Grouped props: SelectBind (value, id, name, rules), SelectAppearance (disabled, size, default_value). At call sites you can write bind=signal via From on SelectBind.
Native dropdown for choosing one option from a short fixed list. Bind value to track the selected option; provide <option> children with explicit value attributes.
Pre-selects an option on first render when the bound signal is still empty. Use for server-hydrated forms where the initial choice comes from saved settings.
Shows the current selection but prevents changes. Use while saving or when the choice is locked by permissions or workflow state.
Compact select height for dense settings rows and inline filters. Medium and large use the same appearance=SelectSize::… pattern.
Field supplies the visible label and id association; Select holds the options and two-way value binding. Prefer this pattern over an unlabeled dropdown.
Small, medium, and large visual heights for dense toolbars or prominent form fields.