Bain Logo


Jump to Props

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



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
  • Styled Functions
borderRadiusstring | numbersmall

The roundness of the checkbox


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


The checked state of the element


The disabled state of the element


The color of the checkboxes label text when disabled


The text to show next to the checkbox


Gets triggered when the checkboxes state is changed.


The value of the component.


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