Components

Checkbox

Checkbox is a wrapper for the native checkbox element.

Checkboxes provide users with a range of options for a given statement where the user may select any number of choices, including zero, one or multiple.

In a form, always place checkboxes underneath each other to aid in a user’s ability to scan the form. Checkboxes use the same keyboard workflow as the native checkbox element. The space bar is used to check/uncheck the input.

Guidelines

  • Avoid checkboxes whose actions are the opposite of what the user expects.
  • The default view for checkboxes has no option selected.
  • Checkbox options should be listed in a logical order (alphabetical, numerical, time-based, etc).