Radio

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

Import

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

Usage

function RadioExample() { const [value, setValue] = React.useState('1'); return ( <RadioGroup onChange={setValue} value={value}> <Stack direction='row'> <Radio value='1'>First</Radio> <Radio value='2'>Second</Radio> <Radio value='3'>Third</Radio> </Stack> </RadioGroup> ); }

function RadioExample() {
  const [value, setValue] = React.useState('1');
  return (
    <RadioGroup onChange={setValue} value={value}>
      <Stack direction='row'>
        <Radio value='1'>First</Radio>
        <Radio value='2'>Second</Radio>
        <Radio value='3'>Third</Radio>
      </Stack>
    </RadioGroup>
  );
}

Radio with custom color

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

<RadioGroup defaultValue='2'> <Stack spacing={5} direction='row'> <Radio colorScheme='red' value='1'> Radio </Radio> <Radio colorScheme='green' value='2'> Radio </Radio> </Stack> </RadioGroup>

<RadioGroup defaultValue='2'>
  <Stack spacing={5} direction='row'>
    <Radio colorScheme='red' value='1'>
      Radio
    </Radio>
    <Radio colorScheme='green' value='2'>
      Radio
    </Radio>
  </Stack>
</RadioGroup>

Radio sizes

The checkbox comes with 3 sizes.

<Stack> <Radio size='sm' name='1' colorScheme='red'> Radio </Radio> <Radio size='md' name='1' colorScheme='green'> Radio </Radio> <Radio size='lg' name='1' colorScheme='orange' defaultChecked> Radio </Radio> </Stack>

<Stack>
  <Radio size='sm' name='1' colorScheme='red'>
    Radio
  </Radio>
  <Radio size='md' name='1' colorScheme='green'>
    Radio
  </Radio>
  <Radio size='lg' name='1' colorScheme='orange' defaultChecked>
    Radio
  </Radio>
</Stack>

Disabled radios

<RadioGroup defaultValue='1'> <Stack> <Radio value='1' isDisabled> Checked </Radio> <Radio value='2'>Unchecked</Radio> <Radio value='3'>Unchecked</Radio> </Stack> </RadioGroup>

<RadioGroup defaultValue='1'>
  <Stack>
    <Radio value='1' isDisabled>
      Checked
    </Radio>
    <Radio value='2'>Unchecked</Radio>
    <Radio value='3'>Unchecked</Radio>
  </Stack>
</RadioGroup>

Horizontal alignment

<RadioGroup defaultValue='1'> <Stack spacing={4} direction='row'> <Radio value='1' isDisabled> Radio 1 </Radio> <Radio value='2'>Radio 2</Radio> <Radio value='3'>Radio 3</Radio> </Stack> </RadioGroup>

<RadioGroup defaultValue='1'>
  <Stack spacing={4} direction='row'>
    <Radio value='1' isDisabled>
      Radio 1
    </Radio>
    <Radio value='2'>Radio 2</Radio>
    <Radio value='3'>Radio 3</Radio>
  </Stack>
</RadioGroup>

Invalid Radio

<Radio isInvalid>Radio</Radio>

<Radio isInvalid>Radio</Radio>

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.

You can head on over to the pages for the useRadio and useRadioGroup hooks to see more detail about their uses.

Please be aware that the example below should only be used if you really need a radio button for data collection purposes. If you want to toggle between different content on activation of a button use the Tabs component.

// 1. Create a component that consumes the `useRadio` hook
function RadioCard(props) {
  const { getInputProps, getCheckboxProps } = useRadio(props);

  const input = getInputProps();
  const checkbox = getCheckboxProps();

  return (
    <Box as='label'>
      <input {...input} />
      <Box
        {...checkbox}
        cursor='pointer'
        borderWidth='1px'
        borderRadius='md'
        boxShadow='md'
        _checked={{
          bg: 'teal.600',
          color: 'white',
          borderColor: 'teal.600',
        }}
        _focus={{
          boxShadow: 'outline',
        }}
        px={5}
        py={3}
      >
        {props.children}
      </Box>
    </Box>
  );
}

// Step 2: Use the `useRadioGroup` hook to control a group of custom radios.
function Example() {
  const options = ['react', 'vue', 'svelte'];

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'react',
    onChange: console.log,
  });

  const group = getRootProps();

  return (
    <HStack {...group}>
      {options.map((value) => {
        const radio = getRadioProps({ value });
        return (
          <RadioCard key={value} {...radio}>
            {value}
          </RadioCard>
        );
      })}
    </HStack>
  );
}

render(<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

aria-describedby

Description

Refers to the id of the element that labels the radio element.

Type

string

colorScheme

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

data-radiogroup

Description

@internal

Type

any

defaultChecked

Description

If true, the radio will be initially checked.

Type

boolean

id

Description

id assigned to input

Type

string

inputProps

Description

Additional props to be forwarded to the input element

Type

InputHTMLAttributes<HTMLInputElement>

isChecked

Description

If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

isDisabled

Description

If true, the radio will be disabled

Type

boolean

isFocusable

Description

If true and isDisabled is true, the radio will remain focusable but not interactive.

Type

boolean

isInvalid

Description

If true, the radio button will be invalid. This also sets `aria-invalid` to true.

Type

boolean

isReadOnly

Description

If true, the radio will be read-only

Type

boolean

isRequired

Description

If true, the radio button will be required. This also sets `aria-required` to true.

Type

boolean

name

Description

The name of the input field in a radio (Useful for form submission).

Type

string

onChange

Description

Function called when checked state of the input changes

Type

((event: ChangeEvent<HTMLInputElement>) => void)

size

Type

"md" | "lg" | "sm"

Default

"md"

spacing

Description

The spacing between the checkbox and its label text

Type

SystemProps["marginLeft"]

Default

0.5rem

value

Description

The value to be used in the radio button. This is the value that will be returned on form submission.

Type

string | number

variant

Description

Variants for Radio are not implemented in the default theme. You can extend the theme to implement them.

Type

string