Radio

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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#

FirstSecondThird

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

Editable Example

Radio with custom color#

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

RadioRadio

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

Editable Example

Radio sizes#

The checkbox comes with 3 sizes.

RadioRadioRadio

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

Editable Example

Disabled radios#

CheckedUncheckedUnchecked

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

Editable Example

Horizontal alignment#

Radio 1Radio 2Radio 3

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

Editable Example

Invalid Radio#

Radio

<Radio isInvalid>Radio</Radio>

<Radio isInvalid>Radio</Radio>

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:

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

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

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

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#

`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

`defaultIsChecked`

Description

If true, the radio will be initially checked. @deprecated Please use defaultChecked which mirrors the default prop name for radio elements.

Type

boolean

`id`

Description

id assigned to input

Type

string

`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

`isFullWidth`

Description

If true, the radio will occupy the full width of its parent container @deprecated This component defaults to 100% width, please use the props maxWidth or width to configure

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

"sm" | "md" | "lg"

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

Edit this page

Radio

Usage#

Radio with custom color#

Radio sizes#

Disabled radios#

Horizontal alignment#

Invalid Radio#

Custom Radio Buttons#

Note about name prop#

Props#

data-radiogroup

defaultChecked

defaultIsChecked

id

isChecked

isDisabled

isFocusable

isFullWidth

isInvalid

isReadOnly

isRequired

name

onChange

size

spacing

value

variant

Note about `name` prop#

`data-radiogroup`

`defaultChecked`

`defaultIsChecked`

`id`

`isChecked`

`isDisabled`

`isFocusable`

`isFullWidth`

`isInvalid`

`isReadOnly`

`isRequired`

`name`

`onChange`

`size`

`spacing`

`value`

`variant`