Radios are used when only one choice may be selected in a series of options.

Native HTML radios are 100% accessible by default, so we used a very common CSS technique to style the radio.

The Radio component composes ControlBox, a component we created to make it easy to style sibling inputs. Check it out



Editable Example

Radio with custom color#

You can override the color scheme of the Radio to any color key specified in theme.colors.

Editable Example

Radio sizes#

The checkbox comes with 3 sizes

Editable Example

Disabled radios#

Editable Example

Horizontal alignment#

Editable Example

Invalid Checkbox#

Editable Example

Custom Radio Buttons#

In some cases, you might need to create components that work like radios but don't look like radios. Chakra exports a RadioButtonGroup to help with this scenario. Here's what you need to do:

  1. Create a component that accepts the isChecked and isDisabled props. Be sure to forwardRef to the component because it's used for keyboard accessibility.
  2. Add the component as children of RadioButtonGroup and pass a value prop to it.
  3. If you pass isDisabled to any of it's children, it'll be skipped in the keyboard navigation.
Editable Example


idstringThe id assigned to input field
namestringThe name of the input field in a radio (Useful for form submission)
valuestring or numberThe value to be used in the radio input. This is the value that will be returned on form submission
variantColorstringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsCheckedbooleanIf true, the radio will be initially checked
isCheckedbooleanIf true, the radio will be checked. You'll need to pass onChange to update it's value (since it's now controlled)
isFullWidthbooleanIf true, the radio should take up the full width of the parent
sizesm, md, lgmdThe size (width and height) of the radio
isDisabledbooleanIf true, the radio will be disabled
isInvalidbooleanIf true, the radio is marked as invalid. Changes style of unchecked state
childrenReact.ReactNodeThe children of the radio
onChangefunctionFunction called when the state of the radio changes
onBlurfunctionFunction called when you blur out of the radio
onFocusfunctionFunction called when the radio receive focus
aria-labelstringAn accessible label for the radio in event there's no visible label or children was passed
aria-labelledbystringId that points to the label for the radio in event no children was passed

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo