Switch
On/off toggle control.
Usage
Bind checked for two-way state. The switch is fully keyboard and screen-reader
accessible out of the box.
Sizes
Three sizes from the size prop.
States
Checked on, checked off, and disabled. The disabled prop blocks all interaction
while keeping the current visual state.
Props
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
invalid Marks the control as failing validation. Always applies the invalid styling. Also sets `aria-invalid`, which this element's `switch` role supports. Prefer letting `Field` drive this: passing `Field` an `error` is what makes a field invalid, so the message the user reads and the state of the control cannot disagree. | boolean | false |
class | string | — |
checked bits-ui The checked state of the switch. | boolean | undefined | false |
child bits-ui | Snippet<[SwitchRootSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[SwitchRootSnippetProps]> | undefined | — |
disabled bits-ui Whether the switch is disabled. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
name bits-ui The name of the switch used in form submission. If not provided, the hidden input will not be rendered. | string | undefined | undefined |
onCheckedChange bits-ui A callback function called when the checked state changes. | OnChangeFn<boolean> | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
required bits-ui Whether the switch is required (for form validation). | boolean | undefined | false |
value bits-ui The value of the switch used in form submission. | any | undefined |
Plus all Bits Switch.Root props via prop spreading.