Components

Checkbox

Design
Code

Let users pick one or more options from a short list.

Checkboxes provide a natural and familiar way to indicate preference, allowing users to choose more than one option at a time. Use checkboxes with five or fewer options displayed simultaneously.

Web
React Native
Android
Apple
Other

Single Checkbox

<Checkbox
  label="Coaches"
  value="Coaches"
/>

Props

label

string

The label that appears to the right of the checkbox.

id

string

A unique identifier for the checkbox. One will be auto-generated if not provided.

value

string
number
bool

The value bound to the input.

checked

bool

Determines whether the checkbox is checked.

disabled

bool

Determines whether the checkbox is disabled.

onChange

func

Responds to the checkbox being checked or unchecked. The value of the checkbox is passed.

qaId

string

A unique-enough string that appears as a data attribute in the rendered code and serves as a hook for automated tests.

Notes

  • Since the label wraps the input, there is no need for a name attribute.
  • Do not pass the checked attribute if you're using this component within a CheckboxGroup. Instead, use that component's valuesChecked prop.

Checkbox Group

The Checkbox Group is the parent element of related checkboxes from which a user is expected to choose one of the options.

Recipients

<CheckboxGroup header="Recipients">
  <Checkbox
    label="Coaches"
    value="coaches" />
  <Checkbox
    label="Athletes"
    value="athletes" />
  <Checkbox
    label="Opposing Team"
    value="opposingTeam"
    disabled />
</CheckboxGroup>

Props

The text that appears above the group of checkboxes.

valuesChecked

array

The values checked in the group.

required

bool

Determines whether the required text appears next to the header.

disabled

bool

Determines whether the entire checkbox group is disabled.

hideHeader

bool

Determines whether the text above the checkbox group is shown.

hasDivder

bool

Determines whether to show a visual divider above the checkbox group.

onChange

func

Responds to the radio being checked or unchecked. The value of the clicked radio is passed.

className

string

Add a custom class to the form element.

qaId

string

A unique-enough string that appears as a data attribute in the rendered code and serves as a hook for automated tests.

Notes

  • Since this is a stateless component, you'll have to keep track of the selected checkboxes via your app's state. Use the array concat and filter functions to easily add or remove values.