Component
Switch
A toggle switch with accessible keyboard and ARIA support. Three sizes and disabled state. Uses the headless @refraction-ui/switch core.
Sizes
Three sizes: small, default, and large.
Small
Default
Large
Installation
$
pnpm add @refraction-ui/react-switchUsage
tsx
import { Switch } from '@refraction-ui/react-switch'
export function MyComponent() {
const [enabled, setEnabled] = useState(false)
return <Switch checked={enabled} onCheckedChange={setEnabled} />
}States
On/off and disabled states.
Off
On
Disabled Off
Disabled On
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is on. |
onCheckedChange | (checked: boolean) => void | -- | Callback when toggled. |
disabled | boolean | false | Disables the switch. |
size | 'sm' | 'default' | 'lg' | 'default' | Size of the switch. |
className | string | -- | Additional CSS classes. |