Check Box

Checkboxes are used for multiple choices, with restriction of one unique option for selection, it means in this case you can add only one unit for the checked option.

Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

When to use

Used when there is a parent and child relationship, with a limit declared by parent.

You can select checkbox individually until you complete the limit, for mandatory option list case. You can select the options as you want for additional list cases (with additional cost).

When don't use

If a user can select only one option from a list, radio buttons should be used instead of checkboxes. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

Main elements

Header

  • A heading must accompany a set of checkboxes to provide further context or clarity
  • Must indicate the category of the grouping or describe what actions to take below, the number of options required and if the selection is mandatory.

Checkbox labels

  • Always use clear and concise labels.
  • Regarding additional options, be explicit about the additional cost and results in the total price that will follow if the checkbox is selected.
  • Labels appear to the left of checkbox inputs to facilitate the selection in the right side.

Overflow content

  • Checkbox labels being fewer than three words.
  • If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis.
  • Long labels may wrap to a second line, and this is preferable to truncation.
  • Text should wrap below so the control and label are vertical centered.

Behaviors

States

The checkbox input allows for a series of states: on, off & disabled.

Related

Checkbox versus radio button

Radio buttons represent a group of mutually exclusive choices, while checkboxes allow users to select one or more checkboxes from a group. In use cases where only one selection of a group is allowed, use the radio button component instead of the checkbox.

Checkbox versus toggle switch

Toggle switches are preferred when the resulting action will be instantaneously applied, without the need for further confirmation. By comparison, checkboxes represent one input in a larger flow which usually requires more selections.


Did this page help you?