Toggle — Cayuse Design System

Examples

Toggles — these are live

Email me when the status changes Include indirect costs in the summary Auto-submit on approval

html

<label class="cds-toggle">
  <input class="cds-toggle__control" type="checkbox" role="switch" checked>
  Email me when the status changes
</label>

States

Off

On

Disabled

Figma properties

Property	Values	Notes
`Toggle`	On · Off	The value.
`State`	Default · Focused · Disabled	Runtime state.

The disabled state loses the on/off value

--toggle-disabled-background is a single grey, so a disabled toggle looks the same whether it is on or off. A user who cannot change a setting still needs to know what it is currently set to.

Suggested fix: keep the track position and dim it, rather than replacing the fill — the thumb should stay on the side that reflects the value.

Usage

When to use it

Use for a setting that takes effect the instant it is switched.
Label it with the thing being turned on, phrased positively.
Show the result of the change immediately, so the toggle is self-evidently doing something.

When not to use it

Do not use inside a form that is saved with a button — use a Checkbox, which reads as “this will apply when I save”.
Do not use for choosing between two named alternatives — that is a Switch.
Do not add On/Off text beside the control; the position is the state, and the label should name the setting.
Do not use for anything destructive or hard to reverse without a confirmation step.

Control	Use when	Applies
Toggle	A setting is turned on or off	Immediately
Checkbox	A yes/no answer within a form	On save
Switch	Choosing between two named alternatives	Immediately

Accessibility

Use <input type="checkbox" role="switch">. The native checkbox gives keyboard operation and state for free; role="switch" makes it announce as “on”/“off” rather than “checked”.
The label names the setting. The control announces the state — do not duplicate the state in the label text.
Space toggles. Do not bind Enter to a toggle inside a form; it submits.
If switching triggers a visible change elsewhere, announce it politely.

Tokens consumed

Token	Applied to	Resolves to
`--toggle-on-background`	Track when on	`--primary-brand-color` → `#0076b6`
`--toggle-off-background`	Track when off	`--color-gray-500` → `#5e5e5e`
`--toggle-on-indicator` / `--toggle-off-indicator`	Thumb	`--color-white`
`--toggle-disabled-background`	Track when disabled	`--disabled-text` → `#888c8c`