Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

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.

hasError

bool

Determine whether to show an error state on the checkbox group.

helpText

string
element

The text that appears below the checkbox group, usually to guide the user on what to provide.

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 checkbox being checked or unchecked. The value of the clicked checkbox 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.