---
title: Radio Group
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-radio-group-demo" />

## Installation

<ComponentInstallation name="radix-radio-group" />

## Usage

```tsx
<RadioGroup>
  <RadioGroupItem value="1">Radio 1</RadioGroupItem>
  <RadioGroupItem value="2">Radio 2</RadioGroupItem>
  <RadioGroupItem value="3">Radio 3</RadioGroupItem>
</RadioGroup>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/radio-group"
    text="Docs"
  />
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference"
    text="API Reference"
  />
</div>

### Animate UI props

#### RadioGroupItem

<TypeTable
  type={{
    transition: {
      description: 'The transition of the radio group indicator',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 200, damping: 16 }",
    },
  }}
/>

## Credits

- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/radio-group) for the radio group component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/radio-group) for the radio group style.