Checkboxes

Types

None, 1 or more items kan be selected with this pattern. To do this, two states are available: On & off.

Sizes

Checkboxes have three key sizes: small, medium and large.

Labels

Sizes

Disabled

Sizes

  • Depending on the context, different text-sizes are possible.
  • A disabled checkbox has a disabled label.
  • The label is part of the click area, except when there is a link present in the label. In that case, use a paragraph instead.
  • Labels should start with an uppercase letter.

Validation

If one or more selections are required to proceed, there should be a validation error thas has both a:

  • General error message with more context.
  • Error state on the checkboxes.

Toggle extra information

Deselecting the ‘Same as billing address’ option results in extra fields to add a new address.

Long forms are not very user friendly. One way to shorten them, is to show fields only when they are needed. The checkmark component just does that.