Design
Component checklist
Up to date
React
Up to date
Types
- Simple checkbox: Use a simple checkbox when there's a complex element next to it.
- 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.
Usage
When to use checkboxes
- In forms –– Checkboxes can be used in forms, both on full-page or in the side panels.
- Lists selections –– Use Checkboxes to let the user choose multiple items within data tables or lists.
When to avoid checkboxes
If the user can select only one option, use Radio buttons instead of Checkboxes. Radio buttons are used to select only one item in a set, while checkboxes are used to choose unlimited options at once.
If there are more than five options to choose from, use Multiselect instead of the Checkboxes to deliver users a better experience with a less overwhelmed UI.
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.
- Group title (optional) — The title describes the options or provides guidance for choosing the best option.
- Checkbox input — The checkbox indicates the selection state.
- Checkbox label (optional) — The label informs about the select options. An icon can visually support this information. 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.
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 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.
Overflow content
- Long text labels can break into a second line; avoid truncation
- The text should be aligned with the upper part of the checkbox
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.
