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

Radio with custom color#

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

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

Radio sizes#

The checkbox comes with 3 sizes.

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

Disabled radios#

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

Horizontal alignment#

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

Invalid Radio#

<Radio invalid>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:

Create a component that consumes the useRadio hook.
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, 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.

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

The Radio component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: control
B: label
C: container

Theming properties#

The properties that affect the theming of the Radio component are:

variant: The visual variant of the radio. The color scheme defaults to blue.
size: The size of the radio. Defaults to md.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

Customizing the default theme#

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  control: {
    borderRadius: '12px', // change the border radius
    borderColor: 'teal.500', // change the border color
  },
})

export const radioTheme = defineMultiStyleConfig({ baseStyle })

After customizing the radio theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { radioTheme } from './components/radio.ts'

export const theme = extendTheme({
  components: { Radio: radioTheme },
})

This is a crucial step to make sure that any changes that we make to the radio theme are applied.

Adding a custom size#

Let's assume we want to include an extra large radio size. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const xl = defineStyle({
  w: '6',
  h: '6'
})

const sizes = {
  xl: definePartsStyle({ control: xl})
}

export const radioTheme = defineMultiStyleConfig({ sizes })

// Now we can use the new `xl` size
<Radio size="xl">This is a radio</Radio>

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom outline variant. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(radioAnatomy.keys)

const outline = definePartsStyle({
  control: {
    border: '1px solid',
    borderColor: 'gray.300',

    // Let's also provide dark mode alternatives
    _dark: {
      borderColor: 'gray.600',
    },
  }

})

export const radioTheme = defineMultiStyleConfig({
  variants: { outline },
})

// Now we can use the new `outline` variant
<Radio variant="outline" ... />

Changing the default properties#

Let's assume we want to change the default size and variant of radio in our app. Here's how we can do that:

import { radioAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
  radioAnatomy.keys,
)

export const radioTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'outline',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use a radio:
<Radio size="xl" variant="outline">This is a radio</Radio>

Showcase#

import {
  ChakraProvider,
  Box,
  Radio,
  Heading,
  VStack,
} from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={12}>
        <VStack spacing={4} alignItems="flex-start">
          <Radio>Styled Radio</Radio>
          <Radio size="xl">XL Radio</Radio>
          <Radio variant="groove">Custom Variant Radio</Radio>
          <Radio variant="groove" size="xl">Custom XL Variant Radio</Radio>
        </VStack>
        <ColorModeSwitcher aria-label="toggle theme" position="absolute" bottom={4} left={4} />
      </Box>
    </ChakraProvider>
  );
}

Open Sandbox

Edit this page on GitHub