Radio group

Pick exactly one option from a small set that people should see side by side, as a list or as choice cards.

npx prodular-ui add radio-group

List

Send alert emails

As it happens

Hourly digest

Once a day at 9:00

Never

import { Field, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field"import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
const options = [  { value: "instant", label: "As it happens" },  { value: "hourly", label: "Hourly digest" },  { value: "daily", label: "Once a day at 9:00" },  { value: "off", label: "Never" },]
export default function RadioGroupDefault() {  return (    <FieldSet className="w-fit">      <FieldLegend variant="label">Send alert emails</FieldLegend>      <RadioGroup defaultValue="hourly">        {options.map((o) => (          <Field key={o.value} orientation="horizontal">            <RadioGroupItem value={o.value} />            <FieldLabel>{o.label}</FieldLabel>          </Field>        ))}      </RadioGroup>    </FieldSet>  )}

Choice cards

Wrap a Field in FieldLabel to make the whole card clickable.

Plan

Starter$0

Up to 3 projects and 5 members.

Team$18 per seat

Unlimited projects, guest access and SSO.

Scale$36 per seat

Audit log, data residency and a 99.9% SLA.

import {  Field,  FieldContent,  FieldDescription,  FieldLabel,  FieldLegend,  FieldSet,  FieldTitle,} from "@/components/ui/field"import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
const plans = [  { value: "starter", name: "Starter", price: "$0", detail: "Up to 3 projects and 5 members." },  { value: "team", name: "Team", price: "$18 per seat", detail: "Unlimited projects, guest access and SSO." },  { value: "scale", name: "Scale", price: "$36 per seat", detail: "Audit log, data residency and a 99.9% SLA." },]
export default function RadioGroupCards() {  return (    <FieldSet className="w-full max-w-md">      <FieldLegend variant="label">Plan</FieldLegend>      <RadioGroup defaultValue="team">        {plans.map((plan) => (          <FieldLabel key={plan.value}>            <Field orientation="horizontal">              <FieldContent>                <FieldTitle>                  {plan.name}                  <span className="font-normal text-muted-foreground tabular-nums">{plan.price}</span>                </FieldTitle>                <FieldDescription>{plan.detail}</FieldDescription>              </FieldContent>              <RadioGroupItem value={plan.value} />            </Field>          </FieldLabel>        ))}      </RadioGroup>    </FieldSet>  )}

Anatomy

<RadioGroup defaultValue="hourly">  <Field orientation="horizontal">    <RadioGroupItem value="hourly" />    <FieldLabel>Hourly digest</FieldLabel>  </Field></RadioGroup>

Guidance

Use it when

Two to five options people should compare before choosing: plans, frequencies, visibility.

Avoid

More than six options. Use Select.
A single yes or no. Use Checkbox or Switch.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Always set defaultValue or value. A radio group with nothing selected is hard to undo.
Wrap each RadioGroupItem and its FieldLabel in Field orientation="horizontal". Field links them, so ids are optional.
Label the group with FieldSet and FieldLegend variant="label".
For choice cards, put Field orientation="horizontal" inside FieldLabel, with FieldContent first and the item last.

API

RadioGroup

Prop	Type	Default	Description
value / defaultValue	unknown		Controlled or initial selection.
onValueChange	(value) => void		Called when the selection changes.

RadioGroupItem

Prop	Type	Default	Description
value	unknown		The value this item selects.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add radio-group# or, with the registry in components.jsonnpx shadcn@latest add @prodular/radio-group