Switch
A clear on/off state with an associated label; not a blanket replacement for checkbox.
Base UI reference ↗Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add switchDependencies
What add switch installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
npm
@base-ui/[email protected]
Examples
1 examples · 1 componentOn, off and disabled
The thumb and surface communicate the state.
API reference
Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.
| Prop | Type | Default |
|---|---|---|
checked / defaultCheckedControlled or initial state. | boolean | — |
onCheckedChangeCalled when the state changes. | (checked: boolean) => void | — |
disabledDisables the control. | boolean | false |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Off | Thumb on the left over a neutral surface. |
| On | checked moves the thumb and changes the surface. |
| Focus visible | 2 px ring outline with the keyboard. |
| Disabled | disabled removes interaction and focus. |
Accessibility
Use Switch for settings that take effect immediately; for options confirmed when a form is submitted, prefer Checkbox.
Associate it with a label; the thumb position and color communicate the state.