Switch
A tactile toggle for settings that take effect immediately.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Settings that take effect as soon as they are flipped, like notifications.
- Settings lists where each row is one on and off preference.
- Use checkbox when the choice waits for a submit button.
- Use segmented-control for a choice between named options.
- Use theme-switch for a light and dark toggle.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Switch } from 'animui/switch';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Switch } from "animui/switch"; export function NotificationsToggle() { const [enabled, setEnabled] = useState(true); return <Switch label="Email notifications" checked={enabled} onCheckedChange={setEnabled} />;}Switch
A Radix switch whose thumb stretches while pressed and travels on a spring.
PropTypeDefaultDescription
labelstring–Visible label inside the switch; also used as aria-label when none is passed.checkedboolean–Controlled state.defaultCheckedbooleanfalseInitial state when uncontrolled.onCheckedChange(checked: boolean) => void–Called on every toggle....propsComponentPropsWithoutRef<typeof SwitchPrimitive.Root>–Radix Switch root props, including ref, name, disabled, and aria-label. Pointer and key handlers are chained, not replaced.- SpaceorEnter
- Toggles the switch. Holding Space stretches the thumb until release.
- Radix renders a button with role="switch" and aria-checked.
- The label prop becomes aria-label unless one is passed; icon-only usage needs an aria-label.
- Pressing stretches the thumb toward the other side like a held finger; releasing sends it across on a snappy spring.
- Reduced motion removes the stretch and moves the thumb instantly; CSS transitions are also disabled.
- The switch is inline and keeps a control-height minimum, so the whole label is a touch target.
- Hover styles apply only on fine pointers; touch gets the press stretch.
- Motion is CSS transitions on the track and thumb, with no observers or per-frame work.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for settings that take effect immediately. Use checkbox for choices confirmed by a submit button.
- Exported both as a named and a default export.
- Pass name to submit with a form through Radix's hidden input.
The full library index for assistants is at /llms.txt.