Toggle
A rounded switch: dark with the knob right when on, light with it left when off. The knob crosses on the spring curve — the one place in the system that overshoots — while the track follows in a straight line.
Variant
Controls
Code
import { Toggle } from "@/components/ui/kit/forms";
<Toggle checked={true} onChange={setChecked} label="On" />Every state
Toggle
Default
Hover
Focus
Active
Disabled
Usage
Tokens it uses
| --ink | … |
|---|---|
| --paper | … |
| --spark | … |
| --line-control | … |
| --ink-2 | … |
| --font-label | … |
| --dur-base | … |
| --dur-quick | … |
| --spring | … |
Values are read live from the stylesheet, so they follow the site theme.
Spec
- Trigger
- Duration
- --dur-base 240ms
- Easing
- --spring cubic-bezier(0.34, 1.56, 0.64, 1)
- Reduced motion