Check Box

Check boxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).

Types of Checkbox

  • Single check box

  • Multiple check boxes

Best practices

Layout

  • Use a single check box when there's only one selection to make or choice to confirm. Selecting a blank check box selects it. Selecting it again clears the check box.

  • Use multiple check boxes when one or more options can be selected from a group. Unlike radio buttons, selecting one check box will not clear another check box.

Content

  • Separate two groups of check boxes with headings rather than positioning them one after the other.

  • Use sentence-style capitalization (only capitalize the first word).

  • Make it easy for people to understand what will happen if they select or clear a check box.

CheckBox

States

Transitions

Vertical Group Layout

States

Transitions

Horizontal Group Layout

States

Last updated