A switch that flips a setting immediately, with a spring-driven thumb. For settings that apply on the spot.
Toggle playground
Install Toggle
1. New project? One command installs the package and wires everything - see Installation:
pnpm dlx zyncat-ui init2. Import the component - it loads its own stylesheet:
import { Toggle } from '@zyncat/ui/toggle';Usage
import { Toggle } from '@zyncat/ui/toggle'; <Toggle label="Auto-save drafts" description="Changes sync automatically as you type." checked={toggled} onChange={setToggled} />Compose Toggle in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.
Toggle props
Toggle
Frequently asked questions
Both - the underlying element is <input type="checkbox" role="switch">, so assistive tech announces it as a switch while it still behaves like a checkbox for checked, onChange and form semantics.
Pointer down sets an internal pressed flag independent of the checked state - the track scales to 0.96 and the thumb stretches to scaleX(1.16) for the duration of the press, then both spring back on pointer up, leave or cancel, whether or not the flip itself happened too.
Omit checked and pass defaultChecked instead - it still calls onChange on every flip, but the component holds its own on/off state internally rather than requiring you to store it yourself.
size="md" (the default) is a 36x20px track, and "sm" is 28x16px for dense settings or table rows - the thumb and how far it travels both derive from the track size, so nothing needs retuning separately.