Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

DefaultComfortableCompact

Installation

Usage

<RadioGroup>
  <RadioGroupItem value="1">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
  <RadioGroupItem value="2">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
  <RadioGroupItem value="3">
    <RadioGroupItemIndicator />
  </RadioGroupItem>
</RadioGroup>

API Reference

RadioGroup

Radix UI API Reference - RadioGroup.Root

RadioGroupItem

Radix UI API Reference - RadioGroup.Item

Prop	Type	Default
`...props?`	`HTMLMotionProps<"button">`	-

The asChild property is not supported in the RadioGroupItem component, as it is used for animation.

RadioGroupIndicator

Radix UI API Reference - RadioGroup.Indicator

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 200, damping: 16 }`
`...props?`	`HTMLMotionProps<"div">`	-

The forceMount and asChild properties are not supported in the RadioGroupIndicator component, as it is used for animation.

Credits

Radix UI Radio Group