Component
Toggle
A simple ON/OFF switch. Rectangular with rounded corners, monochrome palette, sliding square knob. Controlled and uncontrolled modes.
Usage
Disabled
Uncontrolled
// Manages its own state — no checked prop needed
<Toggle defaultChecked onCheckedChange={(val) => console.log(val)} />Disabled
<Toggle disabled />
<Toggle disabled checked />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. |
defaultChecked | boolean | false | Initial checked state (uncontrolled). |
onCheckedChange | (checked: boolean) => void | — | Callback fired when the switch is toggled. |
disabled | boolean | false | Disables the switch. |
unstyled | boolean | false | Strip all default styles. |