Checkbox
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). | |
| Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. | |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
Checkbox
- Container: The label element that wraps the checkbox input and label text.
- Input: The native
<input type="checkbox">element. - CheckboxIcon: Custom SVG icon showing checked, unchecked, or indeterminate state.
- Label: Optional text or node describing the checkbox.
- Sublabel: Optional secondary text for additional context.
CheckboxGroup
- Group container: Wraps a set of checkboxes, can be flat or hierarchical (tree).
- Parent Checkbox: Controls the checked state of all children.
- Child Checkbox: Individual selectable options, can be nested.
States
Checkbox
- Unchecked: Default state, not selected.
- Checked: Selected state.
- Indeterminate: Partially selected (used in parent nodes of tree/group).
- Disabled: Not interactive.
- Read-only: Cannot be changed by the user.
- Focus: Highlighted for keyboard navigation.
- Hover: Visual feedback on mouse hover.
Options
Color
- neutral (default)
- accent
Label & Sublabel
- label: Main label (string or node).
- sublabel: Secondary label (string or node).
Indeterminate
- indeterminate: Shows a horizontal line instead of a checkmark.
Group/Tree
- tree: Hierarchical data structure for nested checkboxes.
- label (group): Label for the group/parent node.
- sublabel (group): Sublabel for the group/parent node.
- checked (group): Controls checked state of all children.
Behaviors
Selection
- Clicking a checkbox toggles its checked state.
- In CheckboxGroup, checking a parent selects/deselects all children.
- Indeterminate state is shown when only some children are selected.
Tree structure
- Supports nested checkboxes with parent-child relationships.
- Parent state updates based on children (checked, indeterminate, unchecked).
- Children update when parent is toggled.
Accessibility
- Uses native input for full accessibility support.
- Supports keyboard navigation and focus indicators.
- Disabled/read-only states are announced to assistive technologies.
Responsiveness
- Checkbox and label adapt to different container sizes and layouts.
- CheckboxGroup/tree supports vertical and horizontal layouts.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| 2025-06-06 | new | Initial specification of Checkbox component | Oanh Nguyen | PAR-52 |