<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>
<Radio value="gatsby">
<RadioControl />
<Label>Gatsby</Label>
</Radio>
</FieldGroup>
</RadioGroup>npx shadcn@latest add @dotui/radio-groupUse 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>Use the controls below to experiment with different radio group props and see the live preview and code update.
The axis the Radio Button(s) should align with.
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>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' | ||
DOMRenderFunction<"div", RadioGroupRenderProps> | — | ||
null | string | — | ||
null | string | — | ||
function | — | ||
A radio represents an individual option within a radio group.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
RefObject<HTMLInputElement | null> | — | ||
boolean | — | ||
DOMRenderFunction<"div", RadioFieldRenderProps> | — | ||
The clickable radio control, including the indicator and optional label content.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
DOMRenderFunction<"label", RadioButtonRenderProps> | — | ||
Last updated on 5/22/2026