Radio

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.

Import#

import { Radio, RadioGroup } from "@chakra-ui/react"

Usage#

Editable Example

Radio with custom color#

You can override the colorScheme 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 useRadio, and useRadioGroup hooks to help with this scenario. Here's what you need to do:

  1. Create a component that consumes the useRadio hook.
  2. Use the useRadioGroup hook to control a group of custom radios.
Editable Example

Note about name prop#

We recommend passing the name prop to the RadioGroup component, instead of passing it to each Radio component. By default, the name prop of the RadioGroup takes precedence.

// Do this ✅
<RadioGroup name="form-name">
<Radio>Radio 1</Radio>
<Radio>Radio 2</Radio>
</RadioGroup>
// Don't do this ❌
<RadioGroup >
<Radio name="form-name">Radio 1</Radio>
<Radio name="form-name">Radio 2</Radio>
</RadioGroup>

Props#

NameTypeDescriptionDefault
colorSchemestring-
defaultCheckedbooleanIf `true`, the radio will be initially checked.-
defaultIsCheckedbooleanIf `true`, the radio will be initially checked. @deprecated Please use `defaultChecked` which mirrors the default prop name for radio elements.-
idstringid assigned to input-
isCheckedbooleanIf `true`, the radio will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)-
isDisabledbooleanIf `true`, the radio will be disabled-
isFocusablebooleanIf `true` and `isDisabled` is true, the radio will remain focusable but not interactive.-
isFullWidthbooleanIf `true`, the radio will occupy the full width of its parent container-
isInvalidbooleanIf `true`, the radio button will be invalid. This also sets `aria-invalid` to `true`.-
isReadOnlybooleanIf `true`, the radio will be read-only-
isRequiredbooleanIf `true`, the radio button will be required. This also sets `aria-required` to `true`.-
namestringThe name of the input field in a radio (Useful for form submission).-
onChange((event: ChangeEvent<HTMLInputElement>) => void)Function called when checked state of the `input` changes-
sizestring-
spacingSystemProps["marginLeft"]The spacing between the checkbox and its label text0.5rem
valuestring | numberThe value to be used in the radio button. This is the value that will be returned on form submission.-
variantstring-
Edit this page