Components
Switch, checkbox & radio
Native inputs with physical micro-motion: the switch thumb stretches and lands with a jelly bounce, ticks draw themselves, radio drops pop in.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Switch, Checkbox, RadioGroup } from '@vizzele/react';
<Switch label="Reduced motion" checked={on} onCheckedChange={setOn} />
<Checkbox label="Accept the terms" />
<RadioGroup
label="Plan"
defaultValue="pro"
options={[{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label / description | ReactNode | — | Text next to the control. |
checked / defaultChecked | boolean | — | Native input props pass through. |
onCheckedChange | (checked: boolean) => void | — | Switch & Checkbox. |
indeterminate | boolean | — | Checkbox mixed state. |
options / value / onValueChange | RadioGroup | — | Radio group data. |
Accessibility
- They are native inputs (role="switch" for the switch), so forms, labels and keyboard work exactly as expected.
- All motion is CSS spring transitions — disabled automatically with reduced motion.