Skip to main content


Checkboxes are used for a list of options where the user may select multiple options, including all or none.

Checkbox Example


Checkboxes should be used in forms that require submission and processing. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices and requires a button press to confirm the user’s settings before they are committed.

Note: Checkboxes for touchscreen apps: this component includes a large, invisible touch target around the checkbox and Label to ensure high usability.


Use when

  • Affording a binary selection, like accepting terms and conditions.
  • Affording multiple selections from a set of options.
  • Enabling selection of an object, such as a Card.
  • Affording selection of a row within a data table.
  • There is a parent and child relationship. User may use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, user may select children individually, when the parent is not selected.

Don’t use when

  • A user can select only one option from a list. Use Radio Buttons instead. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

  • Turning a feature, mode, or functionality on and off. Instead, use a Switch.

  • Checking or unchecking elicits an immediate change in the UI or functionality, such as enabling a disabled field or revealing more controls. Instead, use a Switch.

  • Checking or unchecking elicits a change in background functionality without affecting the UI, like disabling an email notification. Instead, use a Switch.

    Example of Checkboxes in Lists

What's changed
Date Version Notes Contributors
05/09/2022 1.0.1 Updated full layout. M. Johns