Switch
An immediate on or off setting.
Preview
Su uses the Quiet instrument direction. Use the mode switcher above to see light and dark.
Usage
- Use a switch when changing the setting takes effect right away.
- Use a clear label for the setting, not for the current state.
API
| Prop | Values | Default |
|---|---|---|
| checked / defaultChecked | boolean | false |
| onCheckedChange | (checked: boolean) => void | — |
| disabled | boolean | false |
| aria-label | string | required without visible label |
Example
import { Switch } from '@zao/react';
<label>
Email updates
<Switch name="email-updates" defaultChecked />
</label>Accessibility
Switch uses Base UI switch semantics, exposes its checked state, and toggles with Space, a pointer, or its associated label. The housing and outside focus outline stay fixed as the face travels. Reduced motion makes state changes immediate and keeps the press feedback in the fill.