This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!

Checkbox

A checkbox is a form element that allows users to select one or multiple options from a list.

Status
work in progress
Tags
    form
OverviewDesignUX textCodeAccessibility

Overview

Checkboxes are used when users need to select one or multiple options from a list of choices. They are commonly employed in forms, settings, and filters to allow users to indicate their preferences. Checkboxes are typically grouped with a theme label above and the possible options below.

Variants

  • Default: used in most cases.
  • Contained: used only in combination with other contained form components.
Default variant of checkbox
Contained variant of checkbox

Features

Label support text

May be used for both the group label, and for each individual checkbox in the group.

Checkbox with an extra description for the label

Error handling

Used to highlight that the group of checkboxes contains errors.

Checkbox containing errors

Indeterminate state

Used when the checkbox's state is partially selected, often for parent-child relationships in nested checkboxes.

Behaviour of indeterminate checkboxes

  • If some children are selected, the indeterminate state is visible on the parent.
  • If all children are selected, the selected state is visual on the parent.
  • If a parent checkbox is selected while unselected or in the indeterminate state, all children will be selected.
  • If the parent is deselected all children will be deselected.
Nested checkboxes with a indeterminate parent

Alignment

Checkboxes can be aligned horizontal or vertical.

  • Vertical: This is the default alignment. It's easier to read and scan the available options
  • Horizontal: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
Vertical alignment – preferred
Horizontal alignment

Do's and Don'ts

Do:

  • Use descriptive labels to clearly indicate the purpose of each checkbox.
  • Keep the text as short as possible.

Don't:

  • Use checkboxes for mutually exclusive options; in such cases, consider using radio buttons instead.
  • Overload users with too many checkboxes on a single page or form. If you have to present a lot of options, use a multiselect dropdown.
  • Use it to toggle things on or off, use the switch for that.
  • Mix default and contained versions.
Last updated: