Switch
Switch toggles a boolean setting that takes effect immediately — dark mode, notifications, feature flags.
Bind checked with SwitchBind, add an inline label for the setting name, and wrap in Field when the form needs a section label or validation message. Use Checkbox when the user must explicitly opt in before submit.
- Immediate on/off settings (dark mode, notifications)
- Compact boolean controls where a checkbox label feels too heavy
- Forms that submit a named boolean value
- Bind
checkedviaSwitchBind(typicallyRwSignal<bool>). - Pass
labelthroughSwitchLabelfor the adjacent caption. - Set
idexplicitly when multiple switches appear on one page. - Attach
rulesonSwitchBindwhen Field should show validation errors.
Grouped props: SwitchBind (checked, name, value, rules, disabled), SwitchLabel (label). At call sites you can write bind=signal via From on SwitchBind.
Switch in the on position; bind checked via SwitchBind (or pass a signal with bind=signal).
Default off state for settings that start disabled until the user toggles them on.
Locked setting: shows the current on/off state but ignores pointer and keyboard toggles.
Field provides the form label and id wiring; the switch keeps its own inline caption for the setting.
The native switch input receives focus; Space toggles the checked state.