About the shadcn/ui Radio Group Component
The Radio Group component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add radio-group` and copy it directly into your project.
Radio Group Component — Frequently Asked Questions
How do I use shadcn Radio Group with React Hook Form?
Use `<Controller name="option" control={control} render={({ field }) => <RadioGroup onValueChange={field.onChange} defaultValue={field.value}>`. Access value with `field.value`.
How do I style radio cards instead of radio circles?
Use the Field component's choice-card variant, or wrap each `<RadioGroupItem>` in a styled Card with `cursor-pointer` and use `data-[state=checked]` to style the selected state.
How do I layout Radio Group items horizontally?
Add `className="flex space-x-4"` to `<RadioGroup>`. Wrap each item in a flex row with the label alongside the radio button.