Checkboxes

Default


Checkboxes Onload
  • Checkbox Border Color: #6E6E6E
  • Checkbox Border Size: 2px
  • Checkbox Corner Radius: 6px
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular

Selected


Checkboxes Selected
  • Checkbox Border Color: #6E6E6E
  • Checkbox Border Size: 2px
  • Checkbox Corner Radius: 6px
  • Checkmark Icon Color: #333333
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular

On Focus - (ADA compliant) - appears on keyboard navigation only

Checkboxes Onfocus
  • Field Border Color: #0061A0
  • Field Border Size: 2px
  • Checkbox Border Color: #6E6E6E
  • Checkbox Border Size: 2px
  • Checkbox Corner Radius: 6px
  • Checkmark Icon Color: #333333
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular

Error

Checkboxes Error
  • Error Border Color: #D42123
  • Error Border Size: 1px
  • Error Background Color: #FCE8E8
  • Caption Text Color: #D42123
  • Caption Text: Noto Sans 12px Regular

Selected Hover

Checkboxes Selected Hover
  • Checkbox Border Color: #0061A0
  • Checkbox Border Size: 3px
  • Checkbox Corner Radius: 6px
  • Checkmark Icon Color: #333333
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular

Selected Inactive

Checkboxes Selected Inactive
  • Checkbox Border Color: #6E6E6E
  • Checkbox Fill Color: #D9D9D6
  • Checkbox Border Size: 2px
  • Checkbox Corner Radius: 6px
  • Checkmark Icon Color: #333333
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular

Individual Error

Checkboxes Error
  • Checkbox Border Color: #D42123
  • Checkbox Border Size: 2px
  • Checkbox Corner Radius: 6px
  • Checkmark Icon Color: #333333
  • Button Label Color: #333333
  • Button Label Text: Noto Sans 16px Regular
  • Caption Text Color: #D42123
  • Caption Text: Noto Sans 12px Regular

Usage Guidelines

Text overflow

Checkboxes Text Overflow

When the label is too long for the space available, it wraps to form another line.

Checkbox or toggle

Checkboxes Toggle Asset

Checkboxes are best for indicating agreement (to legal terms, for example) or for allowing users to select several items from a set of choices. Checkboxes have an error state if leaving them empty indicates an incomplete action.

checkboxes Toggle Asset

Toggles are implemented for turning on/off a series of preferences. Since toggles are set to either on or off by default, and have no incomplete state and can’t generate errors.

In page example

Checkboxes Example