---
id: radio
category: form
title: Radio
package: '@chakra-ui/radio'
description:
  Radios are used when only one choice may be selected in a series of options.
---

## Import

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

### Usage

```jsx
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`.

```jsx
<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.

```jsx
<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

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

### Horizontal alignment

```jsx
<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

```jsx
<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](https://chakra-ui.com/docs/styled-system/component-hooks/use-radio)
and
[useRadioGroup](https://chakra-ui.com/docs/styled-system/component-hooks/use-radio-group)
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.

```jsx manual=true
// 1. Create a component that consumes the `useRadio` hook
function RadioCard(props) {
  const { getInputProps, getRadioProps } = useRadio(props)

  const input = getInputProps()
  const checkbox = getRadioProps()

  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.

```jsx live=false
// 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>
```