Checkboxes

Definition

Checkboxes allow a user to select one or more items from a list of options. For unusually long lists which must be contained inside a scrollable area, combine checkboxes with a text search to help users more easily find the desired options.

Avoid using single checkboxes (exception: “Remember username” function in sign in forms).

Common Characteristics

All checkboxes allow the user to tap the checkbox or associated label. The label is vertically centered with the checkbox even when the text wraps. Checkboxes should normally be active and unchecked by default.

Checkboxes buttons have these states: active unchecked, or hover/tap, or checked, or indeterminate; and disabled unchecked, or checked, or

Scenarios

Horizontal

When necessary to use a horizontal layout, ensure there is at least 32px space between each checkbox/label element.

checkbox horizontal

Nesting

In nested layouts, selecting a parent checkbox implies the selection of all its children, even though the child text boxes are not displayed as selected. Selecting any one child checkbox implies the selection of its parent, even though the parent is not displayed as selected.

check fileters

With Filter Counts

When using checkboxes as filters with counts, right align the counts.

32
12
55
43

check nested