Skip to main content

Checkbox

Overview​

Checkboxes are a type of selection control. There are three types of selection controls: 1. Checkboxes, 2. Radio buttons, 3. Switches.

  • Radio buttons: allow the selection of a single option from a set.
  • Checkboxes: allow the selection of multiple options from a set.
  • Switches: allow a selection to be turned on or off.

Checkboxes​

Use checkboxes to:

  • Select one or multiple items from a list.
  • Present a list containing sub-selections.
  • Turn an option on or off in desktop environment.

Best practices​

check_circle_outline

If a list consists of multiple options, avoid using switches. Use checkboxes instead because they take up less space.

check_circle_outline

If there is limited space, consider using a select to save space.

Components​

  • Use radio buttons to allow for the selection of a single option from a set.
  • Use a switch to turn an item on or off.
  • Use a button toggle to allow for the selection of a single option from a small set.
  • Use choice chips to allow for the selection of a single option from a small set, especially in mobile contexts.
  • Use a select to select options when space is limited.

Patterns​

Resources​