Checkbox
Include this one. Each box answers for itself.
import { Checkbox } from "@dede-style/ui/checkbox", then <Checkbox checked={on} onChange={setOn} label="Accept the terms and conditions" />. It is controlled — the value lives with whoever owns it, and this renders it in a labelled row.
| Prop | Description | Default | Control |
|---|---|---|---|
| label | the visible label and the accessible name. Required | ||
| description | an optional second line under the label | ||
| checked | whether it is ticked. Controlled: pass it with onChange | false | |
| size | the box: 16, 20 (default) or 24px456 | 5 |
|
| indeterminate | shows a mixed state, for a parent of partly selected items | false | |
| control | the box before the label (start) or after it (end)startend | start | |
| full | spread the row across its container. Off, the row fits its content | false | |
| is | disables the checkbox and dims the row | false | |
| hide | hide the label visually but keep it for screen readers, such as in a table's selection column | false |
Tokens
What a theme can move, where the props above are what an instance can move.
Checkbox 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.