Switch
A setting you flip on or off, effective immediately.
import { Switch } from "@dede-style/ui/switch", then <Switch checked={on} onChange={setOn} label="Show guides" />. It is controlled — the value lives with whoever owns the setting, and this renders it.
| Prop | Description | Default | Control |
|---|---|---|---|
| checked | whether the setting is on. Controlled: pass it with onChange | false | |
| label | the visible label and the accessible name. Required. Name the setting (Show guides), not its state (Guides on) | ||
| description | an optional second line under the label | ||
| size | height 16, 20 or 24px (default). 24 is the comfortable touch target456 | 6 |
|
| control | the switch after the label (end, default) or before itstartend | end | |
| full | spread the row across its container, the switch at the far edge, as in a settings list | false | |
| is | disables the switch and dims the row | false | |
| hide | hide the label visually but keep it for screen readers, when the name is already on screen | false |
Tokens
What a theme can move, where the props above are what an instance can move.
Switch has none, and that is a decision rather than an omission. Every value it renders already resolves through a foundation token or a role, so a theme moves it by moving those. A component token earns its place only when a theme needs to change one component without changing the role beneath it.
These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.