Component · Actions · 05
Checkbox
Checkbox = an 18px box with checked, unchecked, and indeterminate states, where the label is part of the hit area.
What is a Checkbox?
A checkbox collects a choice that a form submits later. Name the box, the check mark, and the indeterminate parent state.
Variants
Tap a property to highlight it in the preview.
- A select that picks exactly one value from its menu.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- The text that names a field; keep it short and place it above the input.
- Give a value, not a vibe word.
- A control that cannot be interacted with; show it dimmed and non-focusable.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- The keyboard-focused state — a visible ring or border change. Never remove it.
- A control that cannot be interacted with; show it dimmed and non-focusable.
Anatomy
These are the parts to name in your prompt.
- 01 Box
- 02 Check mark
- 03 Label
- 04 Helper text
When to use
- Multi-select filters that apply on submit
- Terms and consent rows in signup forms
- Parent rows that select a whole group of children
Avoid when
- Only one option can be true — use Select or Radio
- The change must apply instantly — use Toggle
- More than eight options in one group — use a list with search
Indeterminate is a display state, not a value — the parent still resolves to checked or unchecked when the user clicks it.
See also
Create a checkbox component.
STYLE
- 18px box, 4px radius, 1px #C7C7CC border
- checked: #0071E3 fill, 12px white check mark
- indeterminate: #0071E3 fill with a 10px horizontal bar
- label 14px #1D1D1F, 8px gap, whole row is the hit target
STATES
- unchecked, checked, indeterminate, focus-visible 2px ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui