Question 1

What is a shadcn radio group?

Accepted Answer

A shadcn radio group is the single-select control where users pick exactly one option from a small set — payment methods, plan tiers, shipping options, theme preferences. It's built on Radix UI's RadioGroup primitive (roving tabindex so only one radio is in the tab order, ARIA-radiogroup semantics, arrow-key navigation between options) and styled with shadcn/ui.

Question 2

Are these radio group examples free?

Accepted Answer

Yes, every radio group example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Radio group vs Select vs Toggle Group — which one?

Accepted Answer

Radio group when all options are visible at once and there are 2-7 of them — comparison is the value ("see all your options"). Select when there are 8+ options or when space is tight — picking is the value ("don't dominate the form"). Toggle group for visual / icon-driven choices (alignment, size, view-mode) where the result is immediately interpretable. All three are single-select; pick by visibility need.

Question 4

When should I use a radio group versus checkboxes?

Accepted Answer

Radio for ONE selection from many. Checkbox for ZERO OR MANY selections. The two are visually similar but semantically opposite — confusing them is one of the most common form bugs. Single-checkbox-as-radio is also wrong UX ("agree to terms" is a single checkbox, not a radio); use Switch for binary on/off settings.

Question 5

How do I build card-style radio options (with descriptions and pricing)?

Accepted Answer

Use the layout variant. Each radio is a Card with the radio dot in the corner, a title, description, and optional pricing / metadata. The whole card is the click target via wrapping label + checked state styling (`peer-data-[state=checked]:border-primary` highlights the selected card). Common pattern for plan pickers, shipping choices, address selection.

Question 6

How do I lay out radios horizontally instead of vertically?

Accepted Answer

Set the RadioGroup wrapper to `flex flex-row gap-4` instead of the default vertical stacking. Works for short labels (Yes / No / Maybe). For 4+ options, vertical scans faster — horizontal forces eye movement across the form. Mobile considerations: horizontal radios with long labels wrap awkwardly, so set `flex-col sm:flex-row` to stack on narrow viewports.

Question 7

How do I show validation errors on the radio group?

Accepted Answer

When the user submits without selecting a value, render `

Please select an option

` below the group. Set `aria-invalid="true"` on the RadioGroup wrapper. For inline validation (uncommon for radios — usually validate on submit), don't show the error before the user has interacted.

Question 8

How do I install a radio group example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/radio-group/…`, plus the shadcn/ui RadioGroup primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I integrate the radio group with react-hook-form?

Accepted Answer

Wrap RadioGroup in shadcn's FormField. Pass `field.value` to the RadioGroup's `value` prop and `field.onChange` to `onValueChange`. The form value is a string (matching the `value` prop on the selected RadioGroupItem). For typed values, pass the field through a Zod enum schema (`z.enum(['standard', 'pro', 'enterprise'])`) so the type narrows correctly.

Question 10

How do I disable specific radio options conditionally?

Accepted Answer

Pass `disabled={true}` to the specific RadioGroupItem you want to disable. Useful for plans the user already has ("You're on Pro — Pro is selected and disabled") or unavailable options. Disabled items render greyed and aren't focusable. For per-role-disabled options (admins see Pro, viewers don't), conditionally render the item instead — invisibility is clearer than disabled for permission-gated choices.

Question 11

Which libraries do radio group examples depend on?

Accepted Answer

Radix UI RadioGroup (the primitive — roving tabindex, ARIA-radiogroup, keyboard arrow-key nav), shadcn/ui RadioGroup (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (for icon-led radio variants). For card-style layouts, shadcn/ui Card + Label. React 19 baseline.

Question 12

Are radio group examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix RadioGroup implements the WAI-ARIA Radio Group pattern: only the selected radio (or the first one if none selected) is in the tab order. ArrowUp/ArrowDown moves between options inside the group AND selects on move (standard radio behavior). The wrapper has `role="radiogroup"`, each option has `role="radio"` + `aria-checked`. Screen readers announce "radio button, X of Y selected".

Question 13

Can I use these radio group examples with React Server Components?

Accepted Answer

RadioGroup is a client component (it manages selection state). Wrap it inside a Server Component parent. For Server Action form submission, the radio's value flows via the form's FormData (use the native `<input type="radio" name="…" value="…">` semantics that Radix preserves under the hood). For client-only forms with react-hook-form, lift the form to a client component.

React Radio Group Examples for shadcn/ui

Browse every radio group example

Frequently Asked Questions