Checkbox

v10.5.6 Edit this page

Checkboxes allow users to select several options that influence or change their experience. This option is great for exposing all available options. Users can select more than one option from the list.

Best practices

  • Use a balance of radio, card select, and select components to help users make choices and provide info with ease.
  • Checkboxes always display within a block to clearly define options and the target area of each option.
  • Use clear and concise language for all labels.
  • Use help messaging to further clarify what the input is asking, never use icons for this purpose.

Usage

This package exports three components:

Loading examples...

Props

<CheckboxGroup>

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

<CheckboxOption>

A single checkbox option and label. 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.