Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Radio

Used to select one option from several options

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the radio snippet

chakra snippet add radio

The snippet includes a closed component composition for the RadioGroup

Usage

import { Radio, RadioGroup } from "@/components/ui/radio"
<RadioGroup>
  <Radio />
</RadioGroup>

Examples

Controlled

Use the value and onValueChange prop to control the selected radio button

Colors

Use the colorPalette prop to change the color scheme of the component.

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

Sizes

Use the size prop to change the size of the radio component.

Variants

Use the variant prop to change the appearance of the radio component.

Disabled

Use the disabled prop to make the radio disabled.

Hook Form

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

Select value

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

variant 'outline'
'outline' | 'subtle' | 'classic'

The variant of the component

size 'md'
'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

Previous

Radio Card

Next

Rating