Checkbox

Checkboxes provide users with a range of options for a related statement. The user may check the maximum number of checkboxes in a list, including none, one, or multiple. Each checkbox is independent of all other checkboxes in a list, and checking one box does not uncheck the others.

Component checklist

Design

Up to date

React

Up to date

Types

  1. Simple checkbox: Use a simple checkbox when there's a complex element next to it.
  2. Checkbox with a text label: Use a checkbox with a text label when you need to explain or specify what ticking the box does. Clicking the text label should check the box.

 

Formatting

Anatomy

The checkbox consists of clickable inputs (square) with text labels located to their right. If there is a group of checkboxes, you can add a group title.

Usage - Anatomy
  1. Group title (optional) - The title describes the options or provides guidance for choosing the best option.
  2. Checkbox input - The checkbox indicates the selection state.
  3. Checkbox label (optional) - The label informs about the select options. This information can be visually supported by an icon. Checkbox labels are positioned to the right of the inputs.

 

Alignment

You can choose a horizontal or vertical layout for grouped checkboxes, depending on the use case and the UI structure. However, the vertical arrangement is preferred for easier reading.

Usage - Alignment

 

Composition

Group title (optional)

When necessary, complement a set of checkboxes with a heading to provide further context or clarification.

  • A group title can either state the category of the grouping or explain what to select.
  • Write the title in sentence case.
  • When a set of radio buttons is a part of a component with a title, it's unnecessary to add a title for the radio button group.
  • Even though you decide the title isn't necessary for the interface, it is always needed in code.

 

Checkbox labels

  • The copy is clear and concise. If you’re lacking space, try to reword the label. It is not recommended to truncate checkbox label text with an ellipsis.
  • The label explicitly says what effect the selection has.
  • Place the label to the right of the checkbox inputs.
Usage - Composition

 

Overflow content

  • Long text labels can break to a second line; avoid truncation
  • The text should be aligned with the upper part of the checkbox
Overflow - Do
Overflow - Don't

 

Error state

In case of error needs to be populated, Soul defines two situations. If the checkbox is alone, the error message is connected directly to it. For cases where checkboxes are grouped, the error is connected to the whole group and not to each checkbox separately.

Usage - Error