None, 1 or more items kan be selected with this pattern. To do this, two states are available: On & off.
Checkboxes have three key sizes: small, medium and large.
- 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.
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.