React SDK

Radio

The Radio component is used when only one choice may be selected in a series of options.

Usage

Basic usage of radio button.

Editable Example

example-1

Disabled

Editable Example

example-2

Horizontal alignment

Editable Example

Invalid

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 RadioGroup to help with this scenario. Here's what you need to do:

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

Props

Radio Props

NameTypeDefaultDescription
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.
checkedbooleanIf true, the radio will be checked. You'll need to pass onChange to update it's value (since it's now controlled).
defaultCheckedbooleanIf true, the radio will be initially checked.
disabledbooleanIf true, the radio will be disabled.
invalidbooleanIf 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.
fontSize'xs' | 'sm' | 'md' | 'lg'Specify the label's font size.

RadioGroup & RadioGroup Props

NameTypeDefaultDescription
idstringThe id of the checkbox group.
namestringThe name of the input field in a radio (Useful for form submission).
defaultValuestringThe initial value of the radio group.
valueRadioProps['value']The value of the radio group.
onChangefunctionThe callback fired when any children Radio is checked.
spacingFlexProps['space']The space between each checkbox.
inlinebooleanIf true, the checkboxes will aligned horizontally.

RadioGroup composes the ButtonGroup component.