Radio

Used to select one option from several options

Option 1Option 2Option 3

import { HStack, RadioGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RadioGroup.Root defaultValue="1">
      <HStack gap="6">
        {items.map((item) => (
          <RadioGroup.Item key={item.value} value={item.value}>
            <RadioGroup.ItemHiddenInput />
            <RadioGroup.ItemIndicator />
            <RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
          </RadioGroup.Item>
        ))}
      </HStack>
    </RadioGroup.Root>
  )
}

const items = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3" },
]

Usage

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

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemHiddenInput />
    <RadioGroup.ItemIndicator />
    <RadioGroup.ItemText />
  </RadioGroup.Item>
</RadioGroup.Root>

info

If you prefer a closed component composition, check out the snippet below.

Examples

Controlled

Pass the value and onValueChange prop to the RadioGroup.Root component to control the selected radio button.

Option 1Option 2Option 3

"use client"

import { HStack, RadioGroup } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState<string | null>(null)
  return (
    <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <HStack gap="6">
        {items.map((item) => (
          <RadioGroup.Item key={item.value} value={item.value}>
            <RadioGroup.ItemHiddenInput />
            <RadioGroup.ItemIndicator />
            <RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
          </RadioGroup.Item>
        ))}
      </HStack>
    </RadioGroup.Root>
  )
}

const items = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3" },
]

Colors

Pass the colorPalette prop to the RadioGroup.Root component to change the color scheme of the component.

import { HStack, RadioGroup, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <HStack key={colorPalette} gap="10" px="4">
          <Text minW="8ch">{colorPalette}</Text>

          <RadioGroup.Root
            colorPalette={colorPalette}
            defaultValue="react"
            spaceX="8"
          >
            {items.map((item) => (
              <RadioGroup.Item key={item.value} value={item.value}>
                <RadioGroup.ItemHiddenInput />
                <RadioGroup.ItemIndicator />
                <RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
              </RadioGroup.Item>
            ))}
          </RadioGroup.Root>
        </HStack>
      ))}
    </Stack>
  )
}

const items = [
  { label: "React", value: "react" },
  { label: "Vue", value: "vue" },
  { label: "Solid", value: "solid" },
]

Sizes

Pass the size prop to the RadioGroup.Root component to change the size of the radio component.

Radio (sm)

Radio (md)

Radio (lg)

import { For, HStack, RadioGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="4">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <RadioGroup.Root size={size} key={size}>
            <RadioGroup.Item value="react">
              <RadioGroup.ItemHiddenInput />
              <RadioGroup.ItemIndicator />
              <RadioGroup.ItemText>Radio ({size})</RadioGroup.ItemText>
            </RadioGroup.Item>
          </RadioGroup.Root>
        )}
      </For>
    </HStack>
  )
}

Variants

Pass the variant prop to the RadioGroup.Root component to change the appearance of the radio component.

import { For, HStack, RadioGroup, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <For each={["solid", "outline", "subtle"]}>
        {(variant) => (
          <RadioGroup.Root
            key={variant}
            variant={variant}
            defaultValue="react"
            colorPalette="teal"
          >
            <HStack gap="4">
              <RadioGroup.Item value="react" minW="120px">
                <RadioGroup.ItemHiddenInput />
                <RadioGroup.ItemIndicator />
                <RadioGroup.ItemText>React ({variant})</RadioGroup.ItemText>
              </RadioGroup.Item>

              <RadioGroup.Item value="vue">
                <RadioGroup.ItemHiddenInput />
                <RadioGroup.ItemIndicator />
                <RadioGroup.ItemText>Vue ({variant})</RadioGroup.ItemText>
              </RadioGroup.Item>
            </HStack>
          </RadioGroup.Root>
        )}
      </For>
    </Stack>
  )
}

Disabled

Pass the disabled prop to the RadioGroup.Item component to make the radio disabled.

Option 1Option 2Option 3

import { HStack, RadioGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RadioGroup.Root defaultValue="2">
      <HStack gap="6">
        {items.map((item) => (
          <RadioGroup.Item
            key={item.value}
            value={item.value}
            disabled={item.disabled}
          >
            <RadioGroup.ItemHiddenInput />
            <RadioGroup.ItemIndicator />
            <RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
          </RadioGroup.Item>
        ))}
      </HStack>
    </RadioGroup.Root>
  )
}

const items = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2", disabled: true },
  { label: "Option 3", value: "3" },
]

Hook Form

Use the Controller component from react-hook-form to control the radio group withing a form

"use client"

import { Button, Fieldset, HStack, RadioGroup } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const items = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
  { value: "3", label: "Option 3" },
]

const formSchema = z.object({
  value: z.string({ message: "Value is required" }),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Fieldset.Root invalid={!!errors.value}>
        <Fieldset.Legend>Select value</Fieldset.Legend>
        <Controller
          name="value"
          control={control}
          render={({ field }) => (
            <RadioGroup.Root
              name={field.name}
              value={field.value}
              onValueChange={({ value }) => {
                field.onChange(value)
              }}
            >
              <HStack gap="6">
                {items.map((item) => (
                  <RadioGroup.Item key={item.value} value={item.value}>
                    <RadioGroup.ItemHiddenInput onBlur={field.onBlur} />
                    <RadioGroup.ItemIndicator />
                    <RadioGroup.ItemText>{item.label}</RadioGroup.ItemText>
                  </RadioGroup.Item>
                ))}
              </HStack>
            </RadioGroup.Root>
          )}
        />

        {errors.value && (
          <Fieldset.ErrorText>{errors.value?.message}</Fieldset.ErrorText>
        )}

        <Button size="sm" type="submit" alignSelf="flex-start">
          Submit
        </Button>
      </Fieldset.Root>
    </form>
  )
}

Closed Component

Here's how to setup the Radio for a closed component composition.

import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
import * as React from "react"

export interface RadioProps extends ChakraRadioGroup.ItemProps {
  rootRef?: React.Ref<HTMLDivElement>
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
}

export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
  function Radio(props, ref) {
    const { children, inputProps, rootRef, ...rest } = props
    return (
      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
        <ChakraRadioGroup.ItemIndicator />
        {children && (
          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
        )}
      </ChakraRadioGroup.Item>
    )
  },
)

export const RadioGroup = ChakraRadioGroup.Root

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add radio

Here's how to use the it

<RadioGroup>
  <Radio />
</RadioGroup>

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`'solid'`	`'outline' \| 'subtle' \| 'solid'` The variant of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultValue`		`string` The initial value of the radio group when it is first rendered. Use when you do not need to control the state of the radio group.
`disabled`		`boolean` If `true`, the radio group will be disabled
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>` The ids of the elements in the radio. Useful for composition.
`name`		`string` The name of the input fields in the radio (Useful for form submission).
`onValueChange`		`(details: ValueChangeDetails) => void` Function called once a radio is checked
`orientation`		`'horizontal' \| 'vertical'` Orientation of the radio group
`readOnly`		`boolean` Whether the checkbox is read-only
`value`		`string` The value of the checked radio

Radio Card

Rating

Radio

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage