Skip to content

Checkbox

Allows the user to select one or more options from a set of choices. They are typically used to collect input from users. Mostly used as a part of a form component.  

Checkboxes can be used as a standalone or as a part of a checkbox group.

 

checkbox-unchecked

Unchecked

checkbox-checked

Checked

checkbox-indeterminate

Indeterminate

Anatomy

  • The checkbox button can be used with or without a visible label. By default, the label is visible. The label also extends the radio button’s click area. 
  • The checkbox radius is 4px. The hover effect radius is 8px. 

 

checkbox-padding

Padding

checkbox-touch-area

Touch area

checkbox-radius

Radius

Indeterminate checkboxes

  • Indeterminate is a state between checked and unchecked. This is common for checkbox groups, where the parent checkbox takes the indeterminate state when only part of the children checkboxes are checked. 
indeterminate-example

Principles

  • Use checkbox groups when there is a need to select one or more options from a list of related items.  
  • If the user can select only one option, consider using radio. 
  • Use a standalone checkbox if there is a need for an explicit confirmation from the user, for example to conform to privacy policies. 
  • Checkboxes should not cause any immediate actions to occur. The checkbox selection must take effect when the user presses for example a form submit button. 

Accessibility

  • Standalone checkboxes get their accessible name from the text value. 
  • Checkbox groups should have visible label. There may be some situations where you are unable to directly stack the checkbox inputs vertically (for example, within a table). 
  • When a visible label cannot be used, it's necessary to programmatically add a label to the input component, e.g. via aria-labelledby. 
  • Include error messages for required or invalid checkbox fields. You can use a helper text component for displaying the error message 
  • When customizing checkbox colors, refer to theme color guidelines and ensure accessibility requirements (refer to non-text element contrast requirements) 
  • Disabled checkboxes should be removed from the tab order. If disabled checkboxes need to remain in the tab order, use error messages explaining why the user cannot select them. 

Other best practices

  • Try to keep checkbox groups vertical. 
  • Try to keep the list of options short. Use multiselect component for a large number of options.