Checkbox Option

The checkbox option provides the user with clear option to chose from in a short list. They are primarily used in forms.

 

 

Row

Row

The default appearance for checkbox options.

Row & Icon

Row & Icon

Used when a graphic is available to display within the option.
Icons and graphics help the user identify the option quicker.

Column

Column

Used only for mobile devices. Can be placed into two columns so options appear side by side. Increased area to tap easily on smaller screens.

 

Anatomy

 

Checkbox Option (Row)

  1. Checkbox 24x24px
  2. Left align 16px IBM Plex Sans Regular
  3. 12px, 12px, 12px, 0px padding
  4. 12px space
  5. 480px width

 

 

Checkbox Option (Row & Graphic)

  1. Checkbox 24x24px
  2. Icon 32x32px
  3. Left align 16px IBM Plex Sans Regular
  4. 8px, 12px, 8px, 12px padding
  5. Space 12px
  6. Space 12px
  7. 480px width

 

 

Checkbox (Column)

  1. 24px, 12px, 24px, 12px padding
  2. Icon 32x32px
  3. Space 8px
  4. Centre align 16px IBM Plex Sans Regular
  5. Space 8px
  6. Checkbox 24x24px
  7. 171px width

 

 

States

Row - DefaultRow - ActiveRow - InactiveRow & Graphic - DefaultRow & Graphic - ActiveRow & Graphic - InactiveColumn - DefaultColumn - ActiveColumn - Inactive