Radio group
Choose one option from a visible set.
pnpm dlx shadcn@latest add @uiarc/radio-groupLive · keyboard ready
- Two to six mutually exclusive options that need descriptions, such as plans.
- Form choices that should submit natively through name.
- Use segmented-control for short inline view options.
- Use select for longer lists.
- Use checkbox when several options can be on at once.
Installation
Add Radio group with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/radio-groupAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { RadioGroup } from "@/registry/components/radio-group/radio-group"; export function PlanPicker() { const [plan, setPlan] = useState("team"); return ( <RadioGroup label="Plan" name="plan" value={plan} onValueChange={setPlan} options={[ { value: "solo", label: "Solo", description: "One seat" }, { value: "team", label: "Team", description: "Up to 20 seats" }, ]} /> );}RadioGroup
A fieldset of native radios where one highlight glides to the chosen row.
PropTypeDefaultDescription
labelRequiredstring–Rendered as the fieldset legend.optionsRequired{ value: string; label: string; description?: string }[]–Rows in order, each with optional secondary copy.valueRequiredstring–Selected value.onValueChangeRequired(value: string) => void–Called with the chosen value.namestring–Native radio name for form submission. Generated when omitted.- Arrow keys
- Move the selection between options (native radio behavior).
- Tab
- Enters and leaves the group at the selected option.
- Uses a fieldset and legend with native radio inputs wrapped in labels.
- The highlight and dot are aria-hidden decoration.
- One highlight glides to the chosen row on the morph spring while the new dot springs in and the old one shrinks away.
- Reduced motion places the highlight and dot instantly; resizes never animate.
- Rows stack vertically and stretch to the column, so long descriptions wrap cleanly on narrow screens.
- A ResizeObserver re-places the highlight on resize without animating it.
- One shared highlight moves between rows instead of a layout animation per row.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for two to six mutually exclusive options that need descriptions. Use segmented-control for short inline choices and select for longer lists.
- Always controlled: value and onValueChange are required. Pass name to submit with a form.
The full library index for assistants is at /llms.txt.