① Container
Flex row — box + label, full click area
② Box
16–18px square with border and fill
③ Icon
Checkmark SVG or dash for indeterminate
④ Label
Optional — extends the tap target
View in Figma
Examples
Interactive previews with copy-ready code snippets. Checkboxes support unchecked, checked, and indeterminate states across multiple visual states.
Default states
The three core check states: unchecked, checked, and indeterminate. The indeterminate state is used for 'select all' patterns when only some items are selected.
With label
Always pair a checkbox with a visible label. The label extends the click target.
Error state
Use the error state when validation fails. Pair with an error message below the group explaining what needs to be corrected.
You must accept the terms to continue.
Disabled state
Disabled checkboxes cannot be interacted with. Use sparingly and explain why the option is unavailable.
Sizes
Two sizes — sm (16×16px) and md (18×18px, default). Use sm in compact list contexts such as table rows.
Form group
A real-world example — notification preferences using multiple independent checkboxes. Click any row to toggle.
Notification preferences
Anatomy
Label text① Container② Box③ Icon④ Label
States
Default
Hover
Focus
Disabled
Error
Design tokens
| Token | Value | Description |
|---|---|---|
background/brand/primary | #318272 | Checked fill |
border/brand | #318272 | Checked border |
background/surface | #ffffff | Unchecked fill |
border/default | #d1d5db | Unchecked border |
background/state/error/default | #ef4444 | Error border |
text/primary | #111827 | Label text |
text/disabled | #9ca3af | Disabled label |
focus/ring | #5eead4 | Focus ring |
radius/sm | 4px | Box corner radius |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | "unchecked" | "checked" | "indeterminate" | "unchecked" | Controlled check state. |
state | "default" | "hover" | "focus" | "disabled" | "error" | "default" | Visual interaction state. |
label | string | — | Optional label text displayed to the right of the box. |
size | "sm" | "md" | "md" | sm=16×16px · md=18×18px. |
onChange | (checked: boolean) => void | — | Called with the new boolean state when the user clicks. |
required | boolean | false | Marks the field as required for form validation. |
name | string | — | HTML name attribute for form submission. |
Content guidelines
Do
- Always pair with a visible label for accessibility
- Use for multi-select — let users pick multiple options
- Use indeterminate for "select all" when some items are selected
- Group related checkboxes under a descriptive heading
- Explain why a checkbox is disabled
Don't
- ✕Don't use for mutually exclusive options — use Radio instead
- ✕Don't use standalone without surrounding context
- ✕Don't hide the checked state visually
- ✕Don't use double negatives in labels (e.g. 'Disable notifications')
- ✕Don't require more than one checkbox without a 'select all' option