Skip to content

Radio Group

Exactly one of a few options, all visible. Arrow keys move the selection. The card variant makes each option a full-width target.

Sourcecomponents/radio-group.tsx

List

Shipping

Cards

Payment amount

Invalid, named by a Field

Usage

Radio Group usage
import { FieldLegend, FieldSet } from "@/components/field";import { RadioGroup, RadioGroupItem } from "@/components/radio-group";
export function RadioGroupUsage() {  return (    <FieldSet>      <FieldLegend>Shipping</FieldLegend>      <RadioGroup name="shipping" defaultValue="standard" variant="card">        <RadioGroupItem value="standard" description="4–6 business days">          Standard        </RadioGroupItem>        <RadioGroupItem value="express" description="1–2 business days, $12">          Express        </RadioGroupItem>      </RadioGroup>    </FieldSet>  );}

When to use

Use when

Exactly one of two to about five options that should all be visible. variant="card" when each option needs a second line or emphasis

Don’t use when

Many options (use a select); options that can combine (use Checkboxes)