Bain Logo

Checkbox

Jump to Props

When a user needs to select multiple values from several options.

Import

Use

Note for Developers: Right now, the Checkbox does not have any state handling. In other words, it's purely presentational and you just pass in the `checked` prop as true or false. You'll need to handle all state in the parent component.

What would you like on your Kebab? 🌯

Usage Guidelines

Checkboxes should be used in cases where the user may select any number of choices, including zero, one or multiple. If the choice is either-or, use the Radio component.

To aid in a user’s ability to scan the options, always place checkboxes underneath each other. Checkboxes use the same keyboard workflow as the native checkbox element. The space bar is used to check/uncheck the input.

  • Avoid checkboxes whose actions are the opposite of what the user expects.
  • The default view for checkboxes has no option selected.
  • Checkbox options should be listed in a logical order (alphabetical, numerical, time-based, etc).

Basic Example

The API for Checkbox exposes the following props: value, label, checked, disabled and onChange.

Note: state is not handled here, so the checkbox is uncheckable.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
borderRadiusstring | numbersmall

The roundness of the checkbox

checkboxBorderColorstringmuted

Border color of the checkbox when unchecked

checkboxBorderWidthstring | number2

Border width of the checkbox

checkedBgColorstring | numberprimary

The background color of the checkbox when checked

checkmarkColorstring | numberwhite

The color of the check βœ“ mark

checkedboolean

The checked state of the element

disabledboolean

The disabled state of the element

disabledTintstringsubduedText

The color of the checkboxes label text when disabled

labelstring

The text to show next to the checkbox

onChangefunction

Gets triggered when the checkboxes state is changed.

valuestring

The value of the component.

checkmarkTopOffsetnumber

Option to offset the top value of the check box. Usually only needed if font sizes are changed.

© 2021, Made with ❀️
by ADAPT @ Bain & Company
Privacy Policy