Checkbox

Checkbox is one of the selection controls that lets users select multiple items from a list.

1. Anatomy

Aria attributes

Value	Purpose
role= “checkbox”	Identify div as Checkbox.
aria-checked= “true”	The state of the checkbox.
aria-labelledby= “label”	The name of the checkboxes group.
tabindex = “0”	Make it focusable so the assistive technology user can tab to it and start reading right away.

2. Configurations

2.1 Size

Checkboxes support 2 sizes: large, and medium/small. Use medium/small as default.

2.2 Field label

Field label property can be horizontal, or vertical.

It is optional when a checkbox is used independently, like terms of service. It is required when checkboxes are used in a group.

2.3 Helper text

Helper text sits below the label. Use helper-text to add text.

2.4 Subtext

Checkbox items support sub-text.

2.5 Error message

Error message is a boolean value. It is commonly used when the field is required. It appears below the label and above the helper text.

2.6 Required

Required is a boolean value. A required field can not procees without a valid user input.

3. Behavior

3.1 Clickable area

Users should be able to select and unselect a checkbox by clicking on the check or label.

3.2 checkbox group

Users can select the parent checkbox to select all the child checkboxes.

Users can un-select all the child checkboxes by un-selecting the parent checkbox.

The above is intentended behovior of the parent checkbox. Product teams have to configure the group behavior for checked, unchecked and mixed states on their own.

4. States

Checkbox has 3 selection states: un-checked, checked, and mixed. Each selection state has its own interaction states: default, focus, error, disabled, hover and pressed.

5. Keyboard experience

6. Screen reader experience

7. Resilience and responsiveness

7.1 Minimum width

There is a minimum width of checkboxes of 112px. Once parent container shrinks below the width, the checkbox stops to shrink.

7.2 Text wrapping

Text expands as much as it can within the confines of the parent container and then starts wrapping to the next line.

7.3 Field-label-box width (horizontal alignment only)

The horizontally-aligned checkbox group sits in a 12-columns grid system. The parent container is divided into 12 columns with a gap of 4px.

Customize the field label’s width by setting the number of columns of the label-box.

There is a minimum width of 112px set on the checkboxes (excludind the lables) and if the parent’s container is not sufficient, the content will overflow.