💠 Checkbox

A control that allows a user to select one or more options from a number of choices.

Usage

The Checkbox component is a form control that allows users to make one or more selections from a set of options. It's represented visually by a square box that is either checked (selected) or unchecked (not selected).

Checkboxes are a staple in forms where users need to provide answers to yes/no questions, agree to terms, or select multiple items from a list.

When to use

• Multiple selections: Use Checkboxes when users can select multiple options from a list. Unlike radio buttons, which allow only one selection from a set, checkboxes support multiple selections.
• Binary choices: Employ a Checkbox for a single yes/no or on/off binary choice, such as agreeing to terms and conditions.
• Settings and preferences: Utilize Checkboxes in settings where users can toggle individual options on or off.
• List filtering: Checkboxes are useful in filter menus for selecting or removing multiple criteria in a search or list.

Avoid using Checkboxes for actions that have an immediate effect, as users might expect to be able to undo the selection. Do not use them when only one selection is allowed from a list; in such cases, use radio buttons instead. Ensure that the Checkbox component is accessible, with labels that are programmatically associated with the checkbox inputs for screen readers.

Examples

Default

Disabled

With label

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions