Stretch switch
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.
- On is bg-primary, off is bg-input, and the knob is coloured as in shadcn's Switch: it follows your shadcn theme.
- 112px by 64px unless you set --switch-w / --switch-h; it 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. |
| name | string | Submitted with a form while on, like a checkbox. |
| value | stringdefault "on" | The value submitted under name. |
| disabled | boolean | Dims it and ignores clicks. |
| className | string | Merged with cn(). Set --switch-w and --switch-h here to resize it. |
Installation
npx shadcn@latest add https://purrfectui.com/r/stretch-switch.jsonHow to use
import { StretchSwitch } from "@/components/ui/stretch-switch";
// uncontrolled, submitted with a form while on
<StretchSwitch label="Notifications" name="notifications" defaultChecked />
// controlled, and smaller
const [on, setOn] = useState(false);
<StretchSwitch label="Dark mode" checked={on} onCheckedChange={setOn} className="[--switch-w:3.5rem] [--switch-h:2rem]" />Source code
Loading…
License
MIT. Copy it into your project and change it as you like.