Checkbox

Overview

Checkbox is a binary and indeterminate selection control for forms, settings, and data tables. With 6 semantic variants, 3 shapes, and full value and interaction state coverage, including an indeterminate state for parent-child lists, it adapts to every surface and selection context without compromise.

When should you use them?

Use a checkbox when a user selects one or more independent options that aren't mutually exclusive, like agreeing to terms, toggling settings, or selecting rows in a table. Use the indeterminate state to show partial selection in a parent-child group.

How should you use them?

• Use checkboxes for multiple independent selections; use radio buttons when only one option can be chosen.
• Pair each checkbox with a clear label describing what selecting it does.
• Use the Indeterminate state for a 'select all' parent when only some children are checked.
• Match the variant to context: Danger for risky confirmations, Success for positive states.
• Make the whole label clickable, not just the box, for an easier target.
• Keep checkboxes keyboard-accessible and toggleable with the Space key.