Shadcn Radio Group

A radio group is one answer from a short list. Click a row and the others clear. Use it for shipping speed, a plan, or a survey — anything where picking two would be a bug.

Usage

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

defaultValue is the one that starts checked. Own the state with value and onValueChange.

Composition

Pair each item with a Label or Field. The indicator lives inside RadioGroupItem.

Description

FieldContent plus FieldDescription for the helper line under the label.

Choice Card

Wrap the Field in FieldLabel so the whole card is the click target.

Fieldset

FieldSet plus FieldLegend name the group. That's the markup a screen reader expects.

Disabled

disabled on RadioGroupItem, data-disabled on the Field so the label greys out with it.

Invalid

aria-invalid on the item. data-invalid on the Field. Both, or the label stays the wrong color.

RTL

Wrap with DirectionProvider and dir="rtl". Labels stay Arabic.

API

RadioGroupItem

Keyboard

Notes

orientation is for the arrow keys. Layout is still grid gap-3 — stack or row it yourself.

With other components

Questions

Related