Components
Glass Switch
iOS-style toggle — the thumb rests as a solid white platter and lifts into a glass lens on press, with spring travel and rubber-band overdrag.
Install
npx shadcn@latest add https://websiteglass.com/r/glass-switch.jsonUsage
import { GlassSwitch } from '@/components/ui/glass-switch';
// Uncontrolled
<GlassSwitch defaultChecked ariaLabel="Enable notifications" />
// Controlled
<GlassSwitch
checked={enabled}
onCheckedChange={setEnabled}
ariaLabel="Dark mode"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
onCheckedChange | (v: boolean) => void | — | Fires when the state changes. |
ariaLabel | string | "Toggle" | Accessible label for the button. |
Interaction
- Tap — toggles state and the thumb springs to the new position.
- Drag — drag right to turn on, left to turn off. Rubber-band overdrag at both ends.
- Press — thumb expands by 4 px and the solid platter fades out, revealing the glass lens below.
The track turns green (#34c759 / #30d158 dark) when on and grey when off, matching iOS.