Checkbox

Checkboxes let users select one or more options from a set. They provide clear checked/unchecked states with an animated check indicator. Always pair with a Label for accessibility and usability.

States

Usage Guidelines

Do

Use checkboxes for multi-select scenarios where users can pick any combination of options.

Don't

Don't use checkboxes when only one option can be selected. Use RadioGroup instead.

Do

Pair every checkbox with a visible, clickable label. The label should expand the click target.

Don't

Don't use checkboxes without labels. A standalone checkbox gives no context about what it controls.

Source Code