Radio

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

    SourceTheme source@chakra-ui/radio

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>
  )
}

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>

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>

Disabled radios#

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

Invalid 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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by ▲ Vercel