Skip to content

Checkbox and Radio

Back to What's New

Notification preferences

Contact preference

Checkbox and Radio shipped together — both are foundational form controls, both follow the same design language, and both are built on native <input> semantics so they get keyboard, focus, and assistive-technology behaviour for free.

Reach for Checkbox when the user can select zero, one, or multiple options from a list — preferences, filters, settings, accept-conditions checkboxes. Reach for Radio when exactly one option must be selected from a small set of mutually exclusive choices, typically two to five. If the list grows past five or six options, a dropdown is usually a better fit.

Both components are responsive across mobile, tablet, and desktop with no separate variants, and both support a small and large size to match the surrounding form density. Selected, hover, focus, and disabled states are all styled and contrast-checked. Group radios inside a <fieldset> with a <legend>; group filter checkboxes with a labelled container so screen readers announce the relationship.

Full guidance, property tables, and React component APIs are on the Checkbox and Radio documentation pages.