Toggle

Toggles switch between two states (on/off). They use a gradient animation when active and come in two sizes.

On / Off

Notifications

Dark Mode

tsx

<Toggle checked={enabled} onChange={setEnabled} label="Notifications" />

Small toggle

Medium toggle (default)

tsx

<Toggle size="sm" checked={val} onChange={setVal} />
<Toggle size="md" checked={val} onChange={setVal} />

Locked on

Locked off

tsx

<Toggle disabled checked={true} onChange={() => {}} />

Prop	Type	Default	Description	Required
checked	`boolean`	-	Current toggle state	No
onChange	`(value: boolean) => void`	-	Callback when toggled	No
size	`"sm" \| "md"`	"md"	Toggle size	No
disabled	`boolean`	false	Prevents interaction	No
label	`string`	-	Text label next to the toggle	No

Use toggles for binary settings that take effect immediately.
Always pair with a text label describing what the toggle controls.
Use the sm size in compact UIs like table rows or settings lists.
Do not use toggles in forms that require explicit submission; use checkboxes instead.