Switch
A control that allows the user to toggle between checked and not checked.
Thin wrapper around Radix-UI Switch component (opens in a new tab)
- Full keyboard navigation.
- Can be controlled or uncontrolled.
_10<FormSwitch>default</FormSwitch>
If switch is inside a form, an input will render automatically to ensure events propagate correctly.
_10<Form>_10 <FormSwitch name={`test-switch`} id={`test-switch`}>_10 Switch inside form_10 </FormSwitch>_10</Form>
States
The switch supports the following modifiers. Note that the valid and invalid classnames are added to the input wrapper rather than the input itself.
_10<FormSwitch>default</FormSwitch>_10<FormSwitch checked>checked</FormSwitch>_10<FormSwitch disabled>disabled</FormSwitch>_10<FormSwitch disabled checked>disabled checked</FormSwitch>_10<FormSwitch valid={false}>invalid (pending review)</FormSwitch>_10<FormSwitch valid={false} checked>invalid checked (pending review)</FormSwitch>
Data states
|
|
| Present when disabled |