Interaction Specs

Interaction Specs: 


Checkbox - States

Our checkbox have 4 customized states. Hover states follows the browser default.

Error state follows the form validation rule.

States in Context

Checkbox - States in Context

An example for using states in real context.

  1. Checked-Disabled: Use for must included items
  2. Unchecked-disabled: Use for items are not available currently, but will become available when use makes some changes. There is benefit to surface this item. i.e. surface cross sale and up sale opportunities


Checkbox - Group

Checkboxes are used to surface multiple choices. This control is highly discoverable, but less scaleable. If the list gets too long, consider dropdown selector.

  1. When a group of checkboxes is activated (one from the group is selected), enable keyboard interactions (i.e. arrow up and down).

Visual Specs

Visual Specs: 


Checkbox - States


Checkbox - Color

Spacing & Alignment

Checkbox - Spacing & Aligment

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

The user needs to select from non-mutually-exclusive choices or toggle individual settings.


  • All choices are immediately visible.
  • Choices with long labels can be seen in their entirety.

What is the Solution

A checkbox is an on/off toggle for a single item. A checkbox can be selected or unselected. Any number of checkboxes in a group of checkboxes can be selected at the same time.Checkboxes are independent of one another.

Keyboard and Accessibility

Ensure that users can navigate to and modify the checkboxes using only the keyboard.

When to Use This Pattern

  • The user needs to make a choice between non-mutually-exclusive options.
  • The user needs to set attributes or properties.

Do Not Use This Pattern When

  • Space is constrained (use a List Box).
  • The user may need to select a single mutually exclusive choice within a group (use Radio Buttons).
  • The user may need to enter a choice that is not pre-defined (use a Combo Box).
  • The user needs to select from a range of values (use a Slider).


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015