Browse components
Squish Switch
Toggle switch whose thumb widens in anticipation while pressed, stretches and flattens as it travels, then bounces into place.
Installation
npx shadcn@latest add @glint-ui/squish-switchFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/squish-switch.json
Usage
import { SquishSwitch } from "@/components/ui/squish-switch";
<SquishSwitch label="Airplane mode" checked={airplane} onChange={setAirplane} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Airplane mode" | Visible label and accessible name. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| color | string | "#22c55e" | Track color when on. |
| bounce | number | 0.6 | Spring bounciness. |
| disabled | boolean | false | Disable the switch. |
| checked | ReactNode | — | Controlled state, pair with onChange. |
| onChange | ReactNode | — | (checked: boolean) => void. |
| className | string | — | Extra classes for the root element. |