Toggle

Stable

Binary on/off switch for immediately-applied settings.

View in Figma

Examples

Interactive previews with copy-ready code snippets. Toggles apply changes immediately — no submit action required.

Default toggle

Off and on states side by side. The track color changes from zinc to brand to communicate state clearly.

With label

A label to the right describes the setting being controlled. Click to toggle.

Enable dark mode

Sizes

SM toggle (w-8 h-5) for compact contexts such as table rows or inline settings. MD (w-10 h-6) is the default.

Small

Medium

Disabled state

Disabled toggles cannot be interacted with. Show both off and on disabled states so the current value is still visible.

Disabled off

Disabled on

Settings panel

A real-world settings panel pattern — three independent toggles each controlling a distinct preference. Click any toggle to switch it.

Settings

Email notifications

Receive updates and alerts via email

Dark mode

Switch between light and dark interface

Two-factor auth

Add an extra layer of account security

Anatomy

Label text① Track② Thumb③ Label

① Track

Rounded pill — fills with brand color when on

② Thumb

White circle that slides to indicate state

③ Label

Optional — describes the setting being controlled

States

Off (default)

On (default)

Hover

Focus

Disabled off

Disabled on

Design tokens

Token	Value	Description
`background/brand/primary`	`#318272`	Track fill when on
`background/subtle`	`#d4d4d8`	Track fill when off
`background/surface`	`#ffffff`	Thumb fill
`text/primary`	`#111827`	Label text
`focus/ring`	`#5eead4`	Focus ring around track

Props

Prop	Type	Default	Description
`on`	`boolean`	`false`	Controlled on/off state.
`state`	`"default" \| "hover" \| "focus" \| "disabled"`	`"default"`	Visual interaction state.
`label`	`string`	—	Optional label describing the setting controlled by this toggle.
`size`	`"sm" \| "md"`	`"md"`	sm=(w-8 h-5) · md=(w-10 h-6).
`onChange`	`(on: boolean) => void`	—	Called with the new boolean state on click.

Content guidelines

Use for settings that take effect immediately — no save required
Label the toggle to clearly describe what turns on or off
Use positive phrasing: "Enable notifications" not "Disable silence"
Show the current state even when disabled
Use for binary on/off choices only

Don't

✕Don't use when the action requires a separate submit step
✕Don't use as a substitute for a Checkbox in a form
✕Don't use for destructive or irreversible actions
✕Don't use for mutually exclusive options — use Radio instead
✕Don't use in place of a yes/no form field without an explicit save