Toggle
An on/off switch whose knob stretches as it travels.
Behaviour
- Reduced motion: the knob jumps and only the colour fades.
- One spring moves the knob and its own speed drives the stretch, so the knob stretches as it travels and settles flat.
- Flipping it again mid-way carries on from where the knob is, with no restart.
- Space and Enter flip it; it is a real button with role switch.
- Fixed 112px by 64px and never shrinks inside a flex row.
Props
| Prop | Type | Description |
|---|---|---|
| label | string | The switch's accessible name. There is no visible text inside it, so say what it turns on. |
| checked | boolean | Controlled value. Leave it out and the switch keeps its own state. |
| defaultChecked | booleandefault false | Starting value when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | Called with the new value on every flip. |
| disabled | boolean | Dims it and ignores clicks. |
| className | string | Extra classes on the root. |
Installation
npx shadcn@latest add https://purrfectui.com/r/toggle.jsonHow to use
import { Toggle } from "@/components/ui/toggle";
// uncontrolled
<Toggle label="Notifications" defaultChecked />
// controlled
const [on, setOn] = useState(false);
<Toggle label="Dark mode" checked={on} onCheckedChange={setOn} />Source code
Loading…
License
MIT. Copy it into your project and change it as you like.