Checkbox

v10.3.10Edit this page

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

A stand-alone checkbox is used for a single option that the user can turn on or off.

To present a list of options where the user can select only one option, use the radio button.

Best Practices

  • Always have a label when using the stand-alone checkbox
  • Do we have logic for order of listed elements (alphabetical or numerical?)
  • Always list vertically, never horizontally
  • Should work independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list
  • Lists should start with a capital letter
  • No punctuation
  • For a stand-alone checkbox, that asks the user to agree to terms and services, use first person
  • Use standard visual representation (ie. a small box that has a checkmark when selected)
Loading...

Loading examples...

Props

Usage

This package exports three components:

<CheckboxGroup>

A high-level input with a props interface similar to <Select> that renders multiple checkboxes options.

Inline Checkboxes

CheckboxGroup, by default, has each checkbox option and label on its own line and inside a gray block. This makes it easy for the user to scan the options and make the right selection. When there are only two simple options (like "Yes" and "No"), you can save space by having both options rendered inline on one line by using the inline prop.

Label for <CheckboxGroup>

You usually want a label for CheckboxGroup. Use InputGroup to attach a label to CheckboxGroup.

<CheckboxOption>

A single checkbox option and label. Like CheckboxGroup, the option can be rendered in a block or inline. Props are passed down to the underlying <input>.

Similarity with Radios

This component is very similar (both in design and props) to @nerdwallet/react-radio. Radios should be used when the user can select only one option.

Maintainers

This component is maintained by the FEI team.

See Also