# RadioGroup

A single choice with keyboard navigation and fluid hover.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).







## Preview [#preview]

### Controlled selection [#controlled-selection]

<ComponentPreview src="examples/components/radio-group.tsx">
  <RadioGroupDemo />
</ComponentPreview>

### Compact and uncontrolled [#compact-and-uncontrolled]

<ComponentPreview src="examples/components/radio-group-compact.tsx">
  <RadioGroupCompactDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/radio-group.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/radio-group.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/radio-group.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/radio-group.json`" />

## Usage [#usage]

```tsx
import { RadioGroup, RadioItem } from "@/components/ui/radio-group";

<RadioGroup aria-label="Schedule" defaultValue="weekly">
  <RadioItem value="daily" label="Daily" />
  <RadioItem value="weekly" label="Weekly" description="A weekly summary" />
</RadioGroup>;
```

## API Reference [#api-reference]

Group accepts Base UI RadioGroup props: `value`, `defaultValue`, `onValueChange`, `disabled`, `name`. RadioItem requires `value` and `label`, with optional `description` and `disabled`. Base UI owns selection, roving focus and arrow-key navigation. Density follows SizeProvider.