Switch
ExperimentalTurn an immediate binary preference on or off.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Switch } from 'panel-ui-kit/switch';import { Label } from 'panel-ui-kit/label'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <div style={{ display: "flex", alignItems: "center", gap: 12 }}> <Switch id="email-updates" name="email-updates" /> <Label htmlFor="email-updates">Email updates</Label> </div> </PanelUiTheme> );}When to use
Use a clear label. Applications own persistence. Use Checkbox for a form selection or consent.
Keyboard
Space and Enter toggle. Disabled switches are skipped.
Properties
| Property | Values | Default |
|---|---|---|
checked / defaultChecked | boolean | false |
onCheckedChange | boolean callback | — |
motion | full · reduced · off · object | Inherited |