CogniSyncCheckbox
Checkboxes let people pick zero or more options from a set, or say yes or no to a single question.
Unchecked, checked, indeterminate, error
A checkbox has three selection states plus a disabled and an error state. On interactive boxes that are not disabled, hover shows a 3px outer ring: primary/100 (#BFD6FE) for unchecked, checked, and indeterminate. Error uses the same ring weight in translucent red. Disabled suppresses hover entirely. Error is always an empty, red-bordered box \u2014 it signals that the user still needs to make the selection.
Default
Checked
Indeterminate
Disabled
Error
Hover unchecked, checked, partial, or error to see the outer ring (blue vs red-capacity); disabled has no hover. Error is not a destructive fill \u2014 never combine it with a checked or indeterminate visual. Once the user checks the box, drop the error prop so the normal blue fill appears.
Three sizes
Match checkbox size to the surrounding type. Never mix sizes inside a single list.
14px box, 13px label. Dense tables, filter lists, compact menus.
16px box, 14px label. The default across forms and settings.
20px box, 16px label. Hero forms, onboarding, consent modals.
Label & description
Checkboxes can carry a short label, or a label plus a supporting description. Keep labels action-first (\u201CEnable auto-approve\u201D), not value-first (\u201CAuto-approve: on\u201D).
Group with parent
Use a parent checkbox when a group has a clear \u201Call\u201D concept. The parent toggles the whole set and shows indeterminate when the selection is partial.
Selected: docs
Anatomy
A Checkbox is composed of these parts.
Box
1.5px border, radius 3/4/5 by size. Fills #0D65FC when checked or indeterminate. When interactive, hover adds a 3px outer ring (#BFD6FE for default states; translucent red for error).
Glyph
Custom check or minus glyph in white. Stroke weight shrinks as size grows to keep optical balance.
Label
Geist Medium. 13/14/16px. Sits to the right with a tonal body color.
Description
Optional supporting text in 12/13/14px #64748B. Provides context without taking focus.
Focus ring
2px #0D65FC ring with a 2px offset, shown only on keyboard focus.
Hover ring
Pointer hover draws a 3px halo outside the box: #BFD6FE for unchecked, checked, and indeterminate; error uses the same weight in translucent red (rgba(220, 38, 38, 0.22)). Disabled never shows a hover ring.
Error state
Red border on an empty box plus red label and description text. Hover adds a red-capacity outer ring so the field still feels interactive. Never shown filled — the error exists because the user hasn’t checked the box yet.
Do & Don't
Do
- Use checkboxes for multi-select or independent boolean settings.
- Pair a short, action-first label with an optional description.
- Use a parent + indeterminate pattern for “select all” lists.
- Show the error state (red border on an empty box) when a required selection is still missing, and clear the error the moment the box is checked.
Don't
- Don't combine the error state with a checked or indeterminate fill — error means the required action is still pending.
- Don't use a red filled box to signal destruction — the checkbox is a selection control, not a delete affordance.
- Don't use a checkbox when only one of two options can be selected — use a radio group.
- Don't hide the label as placeholder text; always render a visible label.
- Don't mix checkbox sizes inside the same form.
- Don't use checkboxes as toggles for instantly-applied settings — use a switch.