Switch
On or off. The indicator is a track and a thumb. There is no check glyph. Children are the visible label.
The input is type="checkbox" with role="switch". Controlled and uncontrolled follow the same rule as Checkbox.
<Switch defaultChecked>Play a sound on mention</Switch>
<Switch checked={digest} onCheckedChange={setDigest}>Send a weekly digest</Switch>
One email on Monday. No ads.
Density scales the track through space.selection.size. Do not put Switch inside Field.Root.
When to use
When: Immediate on/off setting (track + thumb, no check glyph). Children = label.
When not: Form consent / multi-select → Checkbox. Exclusive plans → Radio. Inside Field.Root.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | yes | — | Visible label. Clicking the text toggles the switch. |
| checked | boolean | no | — | Controlled on state. Defined means controlled. |
| defaultChecked | boolean | no | — | Initial on state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | no | — | Fires after the on state changes. |
| disabled | boolean | no | — | Disables the switch. |
| invalid | boolean | no | — | Marks the control invalid and sets aria-invalid. |
| name | string | no | — | Native input name. |
| className | string | no | — | Optional class on the wrapping label. |