NordSecurity.Design

Checkbox

Overview

The checkbox component allows the user to to select one or more options from a list of choices.

When to use

  • To present multiple options where one or more can be selected.
  • When selection doesn’t take immediate effect and requires form submission.

When not to use

  • When users can only choose one out of multiple, related options. Use radio instead.
  • For binary settings with instant application. Use a toggle instead.

Anatomy

  1. Checkbox
  2. CheckboxInput
  3. Label

Variants & States

States

Checkbox interaction states are default, hover, disabled, and hasError. Checkbox selection states are checked=true and checked=false. The focus state is globally defined, and no special adjustment is made to this component. Checkboxes can be configured to display checked, unchecked, or disabled.

checkboxGroup

If there is the need to have multiple checkboxes displayed as part of the same fieldset, we provide the checkboxGroup component. The vertical spacing between checkboxes is spacing-3 and ensures consistent spacing throughout your form.

Internationalization

For RTL (right-to-left), the layout of the checkbox is mirrored.

Properties

Name Type Values Description
checked Boolean true
false		 Specifies whether the checkbox should be checked by default
disabled Boolean true
false		 Sets the checkbox to appear disabled, preventing user interaction
required Boolean true
false		 Specifies if the checkbox is required
value String Text that represents the value of the checkbox when it’s checked
id String Defines a unique identifier for the checkbox

Usage Guidelines

DoUse checkboxes when users can select multiple options.
Don’tUse checkboxes for one selection.
DoUse a single checkbox in forms where the selection only takes effect after submitting the form.
Don’tDon't use checkboxes for on/off settings that work right away. Use a toggle for that.
DoProvide clear labels to describe the checkbox’s function. Write labels in sentence case.
Don’tUse long text that truncates and lacks clear instructions.
DoVertically align the first line of multi-line labels with the checkbox input.
Don’tCenter checkboxes vertically with custom labels.
DoBoth the checkbox and label should trigger selection.
Don’tDon't include punctuation after checkbox labels.

Content Guidelines

We use checkboxes to let users select one or more options from a list, or to toggle a feature on or off.

Voice and tone

We maintain a clear and straightforward language.

Copy

  • We clearly indicate what the user is opting in or out of.
  • We use sentence case for checkbox labels.
  • We phrase the label as a direct statement that becomes true when checked.
  • We use plain language.
  • We don’t use punctuation at the end of the label.
  • For consent, we use “I agree…”
  • If we’re short on space, we reword the label. We don’t truncate checkbox label text with an ellipsis.
  • Long labels may wrap to a second line, and we prefer this to truncation.
DoI agree to the terms and conditions.
Don’tDo you agree to the terms and conditions?

Accessibility

  • We ensure every checkbox has a visible, associated label. The label text is what the screen reader announces to describe the checkbox selection.
  • We ensure the label text clearly states the consequence or selection being made. The screen reader must say whether the checkbox is selected or not and its role (checkbox).
  • If we use a set of related checkboxes, we group them and provide a descriptive label for the group, which is announced first by the screen reader.
  • Users move through a set of checkboxes using standard navigation keys, with the state of each element being clearly announced upon focus.
DoI agree to the terms and conditions. Checkbox. Checked.
Don’tI agree. Checkbox.