Radio Group

A radio group allows a user to select a single item from a list of mutually exclusive options.

Select frameworks

React

Vue

Angular

<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-group

Usage

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>

Anatomy

A RadioGroup wraps a Label and a FieldGroup of Radio options. Each Radio holds a RadioControl (which renders the RadioIndicator) and its own Label.

import {
  Radio,
  RadioControl,
  RadioGroup,
  RadioIndicator,
} from '@/components/ui/radio-group'
import {
  Description,
  FieldError,
  FieldGroup,
  Label,
} from '@/components/ui/field'
;<RadioGroup>
  <Label />
  <FieldGroup>
    <Radio>
      <RadioControl>
        <RadioIndicator />
      </RadioControl>
      <Label />
    </Radio>
  </FieldGroup>
  <Description />
  <FieldError />
</RadioGroup>

Pass a string as the Radio child to render its RadioControl and Label for you.

<Radio value="nextjs">Next.js</Radio>

Value

The value is the selected Radio's string value. Use defaultValue for uncontrolled state, or value with onChange to control it.

const [framework, setFramework] = React.useState('nextjs')

<RadioGroup value={framework} onChange={setFramework}>
  {/* ... */}
</RadioGroup>

Validation

Mark the group isRequired, and render a FieldError to surface the message when isInvalid.

<RadioGroup isRequired isInvalid>
  <Label>React frameworks</Label>
  <FieldGroup>{/* ... */}</FieldGroup>
  <FieldError>Please select a framework.</FieldError>
</RadioGroup>

Examples

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 7/7/2026