Toggle — Alchemy Design System

Overview

An on/off switch for an instant setting — the change takes effect the moment you flip it, no Save. Five states — off, hover, on, focus and disabled — on light, dark & image.

With a label

Put the setting name to the right; the whole row is clickable.

Setting row

Email notifications Weekly summary Beta features (coming soon)

Props

Prop	Type	Default	Notes
`checked`	boolean	`false`	On by default.
`disabled`	boolean	`false`	Dims and blocks the switch.
`name`	string	`—`	Form field name (if submitted).
`surface`	'light' \| 'dark'	`'light'`	Dark surface treatment.

Usage

Use it for a setting that applies immediately. Label goes in the slot.

<Toggle name="notify" checked>Email notifications</Toggle>

<Toggle />

Rules

Do

Use for an instant on/off setting — notifications, dark mode.

Write the label as the thing being switched on, not a question.

Don't

Use a toggle inside a form that needs a Save — that's a Checkbox.

Use it to pick between two labelled options — that's a Tab Row.