Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Interactive demo

This demo lets you preview the checkbox component.

<CodeViewerExample>
  <Checkbox
    checked
    onChange={function noRefCheck() {}}
    value="123"
  />
</CodeViewerExample>

Usage

Use checkboxes to:

• Select one or more options from a list
• Present a list containing sub-selections
• Turn an item on or off in a desktop environment

Principles

Familiar

Checkboxes have been in user interfaces for a long time and should be used as expected.

Scannable

It should be visible at a glance if a checkbox has been selected, and selected items should be more visually prominent than unselected items.

Efficient

Checkboxes make it easy to compare available options.

Appropriate selection controls

Checkboxes should be used instead of radio buttons if multiple options can be selected from a list.

Do

Checkboxes let users select one or more options from a list.

Don't

If a user can select multiple options, do not use radio switches.

Other selection controls

Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.

Radio buttons is an alternative selection control that can be used to enter decisions or declare preferences such as settings or dialogs.

Checkbox

Checkboxes are used to select one or more options from a list, present a list containing sub-selections or turn an item on or off in a desktop environment.

Radio buttons

Radio buttons are used when only one option can be selected at a time.

Formatting

Anatomy

Checkbox consists of the checkbox itself that may be disabled or enabled. In addition, the checkbox may contain a label text to the right.

1. Disabled checkbox
   a. Container (disabled)
   b. Label
   
2. Enabled checkbox
   a. Container (enabled)
   b. Label
   

Checkbox sizes

Checkbox has a default size and should always be used unless otherwise specified.

Default size

Behavior

Input fields collect user input in the following ways:

• Via a single-line text field
  • Single-line text field only display one line of text.
• Via a text area
  • Text areas are fixed-height fields.

Selecting multiple items in a list using checkboxes

Turning an item on or off using a checkbox

Related

Components – legacy

Radio pill

Components – legacy

Radio Button Group

Components – legacy

Dropdown