Switch
A binary setting control for immediate on/off preferences. One size: a 50 × 30px track.
Controls
import { Switch } from "raft-ui";
<Switch aria-label="Setting" />checkedboolean
Controlled checked state. Pair with onCheckedChange.
defaultCheckeddefault: falseboolean
Initial checked state for uncontrolled usage.
onCheckedChange(checked: boolean, details) => void
Called when the switch is toggled.
disableddefault: falseboolean
Disables the switch.
readOnlydefault: falseboolean
Keeps the switch focusable but prevents toggling.
requireddefault: falseboolean
Marks the hidden native input required for form validation.
...propsBase UI Switch.Root.Props
Form props (name, value, uncheckedValue, form) plus Base UI render props.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. Pair with onCheckedChange. |
defaultChecked | boolean | false | Initial checked state for uncontrolled usage. |
onCheckedChange | (checked: boolean, details) => void | — | Called when the switch is toggled. |
disabled | boolean | false | Disables the switch. |
readOnly | boolean | false | Keeps the switch focusable but prevents toggling. |
required | boolean | false | Marks the hidden native input required for form validation. |
...props | Base UI Switch.Root.Props | — | Form props (name, value, uncheckedValue, form) plus Base UI render props. |
...propsBase UI Switch.Thumb.Props
Optional thumb slot for custom visuals. Switch renders it by default.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Switch.Thumb.Props | — | Optional thumb slot for custom visuals. Switch renders it by default. |