What it is
A control for an independent binary choice, checked or not, that also stands as one row in a multi-select list. Checking a Checkbox never unchecks another one — that exclusivity is what separates it from Radio.Live example
Exports
Vocabulary
The design library’s Checkbox has no indeterminate state at all — see
Open issues for how that was
verified and an earlier correction to this page.
The bare box and the labeled composite name the same property differently. The
standalone
Checkbox component’s boolean property is Checked; the Checkbox + Label
composite’s equivalent property is Selected. Radio does not
have this split — both its bare control and its labeled composite use Selected.Choose Checkbox when
- The choice is independent — selecting it does not exclude any other option.
- Zero, one, or many of a set of options may be true at once, including all or none.
Choose something else when
Anatomy
No indeterminate marker exists in the design library. See
Vocabulary.
Variants, sizes, and states
Edge and failure states
Tokens
Composition
Pairs with a control label immediately trailing it (LTR) — see FieldLabel’s control-label vocabulary. A group of related Checkboxes is exposed as a set with its own group name, distinct from any individual option’s label — see TITAN-CHK-05. A select-all checkbox sits at the head of the list it controls. For a complete field rather than the bare control, compose throughFormInput with
type="checkbox" — see TITAN-CHK-07.
Content
Accessibility
- Renders a native
<input type="checkbox">. - A group of related Checkboxes is announced as a set (a fieldset with a legend, or the equivalent grouping role), separately from any one option’s own label.
- A Checkbox with no visible label — a table row selector, most often — carries an explicit accessible name describing what it selects, such as “Select row: Acme Corp,” not a generic “Checkbox.”
Constraints
TITAN-CHK-03 and TITAN-CHK-06 are retired. Both asserted rules about an indeterminate
state that Figma evidence shows does not exist in the design library — see
Vocabulary. Per this site’s own convention, a missing number means a retired
rule, not an error; the numbers are not reused.
Known issues
Checkbox: open issues
Divergences, open decisions, and undocumented gaps for Checkbox.
Why it works this way
Checkbox stays a strictly binary control — the design library defines no third visual state, so nothing about how it’s built lets a select-all checkbox show “some, but not all” of its group short of inventing a treatment that doesn’t exist yet. See TITAN-GAP-33 for what that leaves unresolved.Status
Related
- FieldLabel — the control-label pairing every Checkbox uses
- Select — the searchable, long-list alternative
- Bulk selection — the pattern governing select-all and row selection in tables