# RadioGroup
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/radio-group
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/radio-group.mdx
> Migration guide for RadioGroup from HeroUI v2 to v3
***
Refer to the [v3 RadioGroup documentation](/docs/react/components/radio-group) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
## Structure Changes
In v2, `RadioGroup` used a `label` prop:
```tsx
import { RadioGroup, Radio } from "@heroui/react";
export default function App() {
return (
LondonTokyoParis
);
}
```
In v3, `RadioGroup` uses `Label` component and works with compound Radio structure:
```tsx
import { RadioGroup, Radio, Label, Description } from "@heroui/react";
export default function App() {
return (
Capital of Japan
);
}
```
## Key Changes
### 1. Label Prop → Label Component
**v2:** Used `label` prop on `RadioGroup`
**v3:** Use `Label` component as a child of `RadioGroup`
### 2. Radio Structure
**v2:** Simple Radio components with children as labels
**v3:** Compound Radio components with `Radio.Control`, `Radio.Indicator`, and `Radio.Content`
### 3. Description Handling
**v2:** Used `description` prop on individual `Radio` components
**v3:** Use `Description` component inside `Radio.Content`
### 4. Event Handler
**v2:** Used `onValueChange` prop
**v3:** Uses `onChange` prop (from React Aria Components)
### 5. Name Prop
**v3:** `name` prop is required for form integration
### 6. Variant Support
**v3:** New `variant` prop: `"primary"` (default) or `"secondary"` for lower emphasis styling suitable for Surface components
### 7. Read Only Support
**v3:** New `isReadOnly` prop prevents value changes while keeping the group focusable
## Migration Examples
### RadioGroup with Descriptions
```tsx
BasicPro
```
```tsx
import { RadioGroup, Radio, Label, Description } from "@heroui/react";
Basic featuresAll features
```
### Variants
```tsx
{/* v2 did not have variant support */}
BasicPro
```
```tsx
import { RadioGroup, Radio, Label } from "@heroui/react";
{/* Primary variant (default) */}
{/* Secondary variant - lower emphasis, suitable for Surface components */}
```
### Read Only
```tsx
import { RadioGroup, Radio, Label } from "@heroui/react";
{/* Prevents value changes while keeping the group focusable */}
```
### Controlled RadioGroup
```tsx
import { useState } from "react";
import { RadioGroup, Radio } from "@heroui/react";
const [value, setValue] = useState("london");
LondonTokyo
```
```tsx
import { useState } from "react";
import { RadioGroup, Radio, Label } from "@heroui/react";
const [value, setValue] = useState("london");
```
## Summary
- Replace `label` prop with `Label` component as child
- Update Radio children to use compound component structure
- Replace `description` prop on Radio with `Description` component inside `Radio.Content`
- Change `onValueChange` to `onChange`
- Add `name` prop for form integration
- New `variant` prop: `"primary"` (default) or `"secondary"` for lower emphasis styling
- New `isReadOnly` prop: prevents value changes while keeping the group focusable
- Better accessibility through React Aria Components