Home

Checkbox

UsageDevelopment

About

A Checkbox allows users to select one or more options out of one or a group of checkboxes. A Checkbox can live on its own or in a checkbox group.

Anatomy

A Checkbox consists of a:

  1. Border
  2. Select indicator
  3. Label

Checkbox anatomy

When to use a Checkbox

Checkboxes should be used if users can select at least one but possible more from up to seven options that are similar to each other. The advantage of showing a checkbox group is that users see all options in one glance without extra clicks, which allows for easy comparison.

When not to use Checkboxes

  • When users should be able to select just one option. Instead, use a group of Radio buttons.
  • When the options consist of 7 options or more. Instead, use a Select field with Dropdown.

Do use radio buttons if you want users to choose exactly 1 option from up to 7 options
Do use radio buttons if you want users to choose exactly 1 option from up to 7 options.
Do

Do not use radio buttons if users don't need to select exactly one option from up to seven choices
Do not use radio buttons if users don't need to select exactly one option from up to seven choices.
Don’t

Behaviour

States

A Checkbox comes with the following states:

  • Enabled
  • Hovered
  • Focused
  • Disabled
  • Error

Default

A default selection is preferred, especially when we know the (preferred) choice(s) of the majority of the users.

  • This will reduce interactions and therefore speed up the process.
  • This can guide users to choose an option or several options.
  • If we do this consistently, they know that they can expect default selections for all radio button groups (e.g., in a form).

In other cases, give the control to users and don’t force them into a decision.

Keyboard behaviour

  • Users are able to navigate through the options by the Up- and Down arrow keys.
  • Users are able to select a radio button using the Enter key.

Content

Position Checkboxes below each other, in a vertical matter, for easy comparison.

Do use checkboxes below each other for easy comparison
Do use checkboxes below each other for easy comparison.
Do

Don’t organize checkboxes horizontally, or in any different structure than vertically
Don’t organize checkboxes horizontally, or in any different structure than vertically.
Don’t

Write concise Checbkox labels, preferably consisting of one or a few words and written in a consistent manner to promote comparability.

Do use concise and consistent labels for checkboxes
Do use concise and consistent labels for checkboxes.
Do

Don’t use unneccesary long and inconsistent labels for checkboxes
Don’t use unneccesary long and inconsistent labels for checkboxes.
Don’t

When you use multiple checkbox groups (e.g.. in forms) you might consider a label for each group.

Use a singular checkbox if users should answer a “Yes/No”, “On/Off”, “True/False”, or “Agree/Disagree” question and will need to confirm their answer.

Do use a checkbox if you want users to agree or disagree with something and agree afterwards
Do use a checkbox if you want users to agree or disagree with something and agree afterwards.
Do

Don’t use a radio button if you want users to agree or disagree with something. Radio buttons should always be used in groups
Don’t use a radio button if you want users to agree or disagree with something. Radio buttons should always be used in groups.
Don’t

Resources

Events

ComponentEventDescriptionDetails
<r-checkbox />rChangeEmitted when checked state changes via user interaction.
  • element: HTMLRCheckboxElement
  • value: any
  • checked: boolean
rResetOccurs when a form is reset (resets component’s checked state to initial).