Radio

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

Native HTML radios are 100% accessible by default, so we used a very common CSS technique to style the radio.

Installation#

import { Radio, RadioGroup } from "@chakra-ui/core"

import { Radio, RadioGroup } from "@chakra-ui/core"

Usage#

First

Second

Third

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 color scheme of the Radio to any color key specified in theme.colors.

Radio

<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

Radio

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

Checked

Unchecked

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

Radio 2

Radio 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 Checkbox#

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

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

Name	Type	Default	Description
id	`string`		The id assigned to input field
name	`string`		The name of the input field in a radio (Useful for form submission)
value	`string` or `number`		The value to be used in the radio input. This is the value that will be returned on form submission
colorScheme	`string`		The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsChecked	`boolean`		If `true`, the radio will be initially checked
isChecked	`boolean`		If `true`, the radio will be checked. You'll need to pass `onChange` to update it's value (since it's now controlled)
isFullWidth	`boolean`		If `true`, the radio should take up the full width of the parent
size	`sm`, `md`, `lg`	`md`	The size (width and height) of the radio
isDisabled	`boolean`		If `true`, the radio will be disabled
isInvalid	`boolean`		If `true`, the radio is marked as invalid. Changes style of unchecked state
children	`React.ReactNode`		The children of the radio
onChange	`function`		Function called when the state of the radio changes
onBlur	`function`		Function called when you blur out of the radio
onFocus	`function`		Function called when the radio receive focus
aria-label	`string`		An accessible label for the radio in event there's no visible label or `children` was passed
aria-labelledby	`string`		Id that points to the label for the radio in event no `children` was passed

Edit this page

Radio

.css-12m0k8p{pointer-events:auto;}Installation.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Radio with custom color#

Radio sizes#

Disabled radios#

Horizontal alignment#

Invalid Checkbox#

Custom Radio Buttons#

Note about name prop#

Props#

Installation#

Note about `name` prop#