Skip to main content

Components

Checkbox

Allow users to select and deselect items in bulk

banner-Checkbox

Anatomy

Checkboxes allow users to select and deselect items in bulk. They provide the ability for users to select one or several items, deselect, or initiate an action.

checkbox anatomy guideline
  1. Container : Selection control (input) that can be selected or unselected, and pushed into different states.
  2. Icon : Icon that appears within the Checkbox input.
  3. Label : The Label is the text attributed to the Checkbox that provides context.


checkbox guideline

An icon can be added to a checkbox container to show different checkbox states including selected and partial selection.

Alt text

Do : Display Vertical

Checkboxes should be displayed vertically, stacked for consistent alignment and positioning across different breakpoints for clear direction

Alt text

Don't : Display Horizontal

Avoid using Checkboxes in a horizontal orientation to avoid issues with alignment and legibility when there are multiple Checkboxes grouped together

Usage

Checkboxes are very flexible components that can be placed anywhere you need to provide a user with choices. The checkbox items should work independently from each other, so selecting one checkbox shouldn’t change the status of another checkbox in the list

Common places checkbox appear: Tables, Forms, settings pages, etc.

When to use

  • To present multiple options that can each be selected.
  • To offer help or error handling for simple settings.
  • For changes that require confirmation after selection.

When not to use

  • When only one of multiple options can be selected.
  • You want to group multiple options into a single basic choice.
  • For single on/off settings with an instant response.

Accessibility

A checkbox is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting. Keyboard users will be able to interact with the checkbox component by pressing Space to select the input. We have added any attributes necessary to make it properly announced to screen readers.

Alt text

Do : With Padding

Provide minimum 4 px of padding around the icon

Alt text

Don't : Without Padding

Allow icon to extend to edge of container

Margin and Padding

Icons inside the container should have adequate padding around it to support visual hierarchy and balance. We recommend providing even padding along the top, bottom, right, and left of the icon.

checkbox guideline

Always maintain a minimum 16 pixel margin between buttons and other buttons or components so that they do not become lost.

Content

When writing checkbox labels:

  • Checkbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting
  • Checkboxes should always have a Label associated to give users context of what the Checkbox represents
  • Avoid ending in punctuation if it’s a single sentence, word, or a fragment
  • Do not use commas or semicolons at the end of each line
Alt text

Do : With spesific label item

Use direct and concise button labels

Alt text

Don't : With long label item

Don’t overwhelm users with too much information at once