Checkbox

Use checkboxes to allow users to select multiple options from a list. Users can select any number of items in the list; from none to all.

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various checkbox styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div
  data-testid="NeoInputWrapper-root"
  class="neo-form-control"
  role="group"
  aria-labelledby="example-label"
>
  <div
    data-testid="NeoInputWrapper-group-root"
    class="neo-input-group"
  >
    <span id="example-label">
      Checkbox Heading
    </span>
    <input
      type="checkbox"
      id=":R6:"
      aria-checked="false"
      aria-label="Checkbox Label"
      class="neo-check"
      name="example"
      value="one"
    >
    <label for=":R6:">
      Checkbox Label
    </label>
    <input
      type="checkbox"
      id=":Ra:"
      aria-checked="false"
      aria-label="Checkbox Label"
      class="neo-check"
      name="example"
      value="two"
    >
    <label for=":Ra:">
      Checkbox Label
    </label>
    <input
      type="checkbox"
      id=":Re:"
      aria-checked="false"
      aria-label="Checkbox Label"
      class="neo-check"
      name="example"
      value="three"
    >
    <label for=":Re:">
      Checkbox Label
    </label>
  </div>
</div>

<CheckboxGroup
  groupName="example"
  label="Checkbox Heading"
>
  <Checkbox value="one">
    Checkbox Label
  </Checkbox>
  <Checkbox value="two">
    Checkbox Label
  </Checkbox>
  <Checkbox value="three">
    Checkbox Label
  </Checkbox>
</CheckboxGroup>

A checkbox contains 3 elements which can be arranged vertically or horizontally as needed.

• Checkbox Heading:

  This is the title of the list of options. It identifies what the list items control and how they are related.

• Checkbox Enabling:

  Enabling the checkbox selects the associated option. More than one checkbox can be enabled at one time.

• Label:

  The label identifies the function attached to each checkbox. Selecting a checkbox activates the connected option.

A checkbox can exist in one of several states.

Default

Selected

Indeterminate

Disabled

Read-only

• Default:

  In this state, the checkbox is available but is unselected.

• Selected:

  When a checkbox has been chosen, it is displayed in this state.

• Indeterminate:

  For checkboxes that have items nested beneath, use Indeterminate when some but not all of the nested items are selected.

• Disabled:

  Signifies that this option is not currently available.

• Read-only:

  This state is used to show the current status of the option, but that it cannot be changed.

A checkbox is used to allow the user to select one or more options from a list. The icon varies in appearance according to the current state of the item or list.

Checkbox items can be stacked in an hierarchical structure. Higher level items can have multiple items within it. These sub-items can also have other stacked list items within them. If only a single item can ever be selected at one time, use a Radio instead.

When to Use

Displayed below are some examples of proper and improper usage of the Checkbox component.

DO: Use checkboxes for selecting options, and for accepting one-time offers or terms.

DON'T: Do not use a checkbox when only one selection is allowed. Use a Radio instead.

DO: Use checkboxes for selecting options, and for accepting one-time offers or terms.

DON'T: Do not use a checkbox for ongoing or repeating functions. Use a Switch instead.

Category Labels

Checkbox groups should always have a Category Label that provides context to the list of options.

DO: Add a checkbox heading to show how the list items are connected.

DON'T: Do not add a checkbox heading to unrelated checkbox items.

Content Overflow

When there is insufficient horizontal space for the headings and labels, it can be wrapped onto multiple lines.

DO: Wrap text onto a new line when there is not enough horizontal space.

DON'T: Do not wrap text if there is enough horizontal space, or when there are other options (i.e. use shorter text).

Text Alignment

Center align the first line of text with the checkbox. Additional lines of text should be left-aligned with the first line of text. The heading should be left-aligned with the checkbox.

DO: Align the first line of the text with the center of the checkbox. Subsequent lines of text should all be left aligned.

DON'T: Do not center align all of the text with the checkbox. Do not right align multiline text.

Indeterminate

The Indeterminate state is used when a checkbox contains additional nested options below it that have mixed status (both selected and not selected).

DO: Use intermediate state to indicate Select All is on but not all items have been selected.

DON'T: Do not leave Select All disabled if all options are selected.

DO: Use the indeterminate state when nested items have both selected and unselected options.

DON'T: Do not use the default state when nested items are both selected and unselected.

Nesting

Checkboxes can have other item lists nested beneath them. Selecting the parent opens the list of child items.

DO: Use nesting to create and organize subcategories of related items.

DON'T: Do not place a group of uncategorized checkboxes together in a single layer.

Each item in a checkbox list has a default height of 16 pixels, with 8 pixels of padding between the checkbox and the label. The checkbox heading is 8 pixels above the first list item.There are 8 pixels between each list item when stacking vertically.

Always leave a minimum of 16 pixels between the list items for horizontal checkbox groups.

Vertical

Horizontal

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.