Checkboxes allow users to select multiple options from a list.

Known issues
Known issues


Storybook failed to load. Please connect to the VPN to access.



                                                           label-text="Check me"

Checked checkbox example


Checkboxes belong to the family of selectors and are used to select one or more options available in a list. The component is ready for use in Portal and Editor, but currently not in Player.

Use this component:

  • in form UIs or standalone settings,
  • for filtering views or items (e.g., in batch action contexts),
  • for multi-selection in dropdowns, where a multi-select item type employs a checkbox.


Checkboxes versus radio buttons

Checkboxes are used to select one or more options from a list of mutually non-exclusive ones. Radio buttons allow users to select multiple only a single option.


Checkboxes versus dropdowns

Checkboxes display options on the first level, therefore can be preferred over dropdowns, as they save users a click and increase visibility. Dropdowns are preferrable in case of lists with many options (generally, more than 3). Please note that for dropdowns to support multi-selection, you have to use the multi-select item type.


Checkboxes versus toggles

Toggles indicate a binary choice between two states: on and off (active and inactive), most commonly when enabling a setting. Toggles are also generally used for a single, immediately effective action. Checkboxes should be used when selecting at least one option if two or more are available, or when the users move through a longer flow (such as filling out a form).




Form element

Checkboxes are most commonly used in form UIs. They can't be used without a text abel.

Nunito Sans ExtraBold 12px/16px, upper
Token set
spacing form



Pre-selection of options

  • A checkbox can take a pre-selected state, when the selected option is a reasonable default (or an optimal choice for the user), or when the functionality would break without a pre-selection.
  • If all options are equal and none is preferred, pre-selection isn't necessary.
  • Pre-selection should be avoided in contexts where it could potentially introduce bias, such as certain types of forms or surveys.



  • Change of state to "selected" is instant. However, applying the selection usually requires confirmation, such as clicking a "Submit" button.
  • The entire component (checkmark icon and the label) should be clickable.



Options can be sorted according to:

  • most to least common choice
  • lowest to highest risk
  • simplest to most complex choice

Alphabetical sorting should be used when the other options are not applicable.


Error display

error on form

When a required selection was not performed, error text should be displayed directly below the list of options. The options themselves should take the error state.



  • Use labels that are short, direct, unambiguous and unchanging.
  • Avoid offering more than 5 options.
  • Capitalise the label, do not use full stops.
  • For items with descriptions, the latter should be capitalised and end with a full stop. Keep the descriptions as short as possible (single-line description is ideal). Otherwise, consider other options of conveying the information, such as intro text or a message box.
  • If a text label overflows its container, it should be wrapped. Avoid labels wrapping into more than 2 lines.
checkbox label overflow


Do's and dont's

  • Use checkboxes to select one or more items from a small set of options.
  • Don't use checkboxes to select from a long list of options. Dropdown menu with multi-select items is a better choice in this case.
  • Do not mix radio buttons and checkboxes in a single selection UI.
  • Do not mix checkboxes with and without description text.





The correct variant for most cases.

checkbox  btn

With description

To be used when all selection options require an additional explanation for the user to accomplish their action.

checkbox description