On this page
Select frameworks
Props
orientation
<RadioGroup defaultValue="react">
<Label>Select frameworks</Label>
<FieldGroup>
<Radio value="react">
<RadioControl />
<Label>React</Label>
</Radio>
<Radio value="vue">
<RadioControl />
<Label>Vue</Label>
</Radio>
<Radio value="angular">
<RadioControl />
<Label>Angular</Label>
</Radio>
</FieldGroup>
</RadioGroup>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/radio-groupUsage
Use radio group to allow users to select a single option from a short list of related options.
import { Radio, RadioControl, RadioGroup } from '@/components/ui/radio-group'
import { FieldGroup, Label } from '@/components/ui/field'<RadioGroup defaultValue="nextjs">
<Label>React frameworks</Label>
<FieldGroup>
<Radio value="nextjs">
<RadioControl />
<Label>Next.js</Label>
</Radio>
<Radio value="remix">
<RadioControl />
<Label>Remix</Label>
</Radio>
</FieldGroup>
</RadioGroup>Examples
Default
React frameworks
With Description
React frameworksYou can pick one framework.
Invalid
React frameworks
Please select a framework.
Disabled
React frameworks
ReadOnly
React frameworks
Required
React frameworks
Cards
React frameworks
API Reference
RadioGroup
A radio group allows a user to select a single item from a list of mutually exclusive options.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
boolean | — | ||
boolean | — | ||
Orientation | 'vertical' | ||
null | string | — | ||
null | string | — | ||
function | — | ||
Radio
A radio represents an individual option within a radio group.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
RadioControl
The clickable radio control, including the indicator and optional label content.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
RadioIndicator
The visual selected state indicator for a radio control.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
Last updated on 6/16/2026