Radio

Usage

import { 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 props to the RadioGroup.Root component to control the selected radio button.

Colors

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

Sizes

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

Variants

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

Disabled

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

Hook Form

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

Closed Component

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

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

<RadioGroup>
  <Radio />
</RadioGroup>

Props

Root