Bain Logo

Radio

Jump to Props

Enable a user to make a single selection from a group of options.

The Radio component must have both a value and and label. It behaves just like a standard HTML radio button.

Import

Use

What's the best fruit? 🍇

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

Set the Color

Just set the checkedColor prop.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
checkedboolean

The checked state of the element

checkedColorstring | numberprimary

The color of the radio when checked.

disabledboolean

The disabled state of the element

disabledTintstringsubduedText

The color of the radio and label text when disabled

labelstring

The text to show next to the radio

labelIndentnumber | string28

The distance between the radio and its label.

radioBorderRadiusstring | numbersmall

The roundness of the checkbox

radioBorderColorstringmuted

Border color of the checkbox when unchecked

onChangefunction

Gets triggered when the checked state is changed.

valuestring

The value of the component.

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