Checkbox

An input that lets users select one or more options from a limited number of choices. Each selection is independent (with some exceptions).

What the component handles

  • Proper checkbox semantics and checked/unchecked states
  • Keyboard navigation with Tab, Enter, and Space keys
  • Touch target area is always 24px minimum (even for small variant)
  • Checkbox Group uses fieldset with aria-labelledby for proper grouping and labeling

What you need to provide

  • Clear, descriptive label using children or ariaLabel prop

Color contrast

Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

  • background.static.xxx tokens except for background.static.inverse and background.static.on-color
  • in default Card variant.