Shadcn Radio Group

React radio group for single-choice forms with keyboard navigation. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.

Radio button problems?

Join our Discord community for help from other developers.

Ever built a form where users picked multiple options when they should only pick one? Or watched someone frantically uncheck boxes trying to figure out which shipping method they actually selected? Yeah, that's exactly why radio groups exist. This shadcn/ui radio group brings clear single-choice selection to your React applications.

Radio group showcase

Clean single-choice selection for forms and settings:

Loading component...

Built on Radix UI with keyboard navigation, screen reader support, and all the focus management users expect from professional form controls. Styled with Tailwind CSS to match your design system instead of looking like operating system defaults from 1995.

npx shadcn@latest add radio-group

Why radio groups actually solve choice confusion

Here's the thing—when users need to pick exactly one option, nothing beats radio groups. Think about checkout flows, survey questions, or settings panels. Users see all their choices upfront, understand they can only pick one, and know exactly what's selected.

Checkboxes make users think "can I pick multiple?" Select dropdowns hide options until you click. Radio groups make single-choice decisions obvious and eliminate the cognitive load of figuring out selection rules. Plus they work perfectly with keyboard navigation—arrow keys move between options like users expect.

This free shadcn radio group handles the complex parts—focus management, keyboard navigation, form validation, accessibility—while you focus on organizing your choices logically. Whether you're building checkout flows, preference panels, or survey interfaces in your Next.js applications, radio groups that work intuitively keep users moving in your JavaScript projects.

Common radio group patterns you'll actually use

Settings and preferences

Perfect for app configuration with clear options:

Loading component...

"use client"import * as React from "react"import { Label } from "@/components/ui/label"import {  RadioGroup,  RadioGroupItem,} from "@/components/ui/radio-group"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"export default function RadioGroupSettings() {  const [theme, setTheme] = React.useState("system")  const [notifications, setNotifications] = React.useState("all")  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-4">        <Card>          <CardHeader>            <CardTitle>Appearance</CardTitle>            <CardDescription>              Choose how shadcn looks to you            </CardDescription>          </CardHeader>          <CardContent>            <RadioGroup value={theme} onValueChange={setTheme}>              <div className="flex items-center gap-3">                <RadioGroupItem value="light" id="light" />                <Label htmlFor="light">Light</Label>              </div>              <div className="flex items-center gap-3">                <RadioGroupItem value="dark" id="dark" />                <Label htmlFor="dark">Dark</Label>              </div>              <div className="flex items-center gap-3">                <RadioGroupItem value="system" id="system" />                <Label htmlFor="system">System</Label>              </div>            </RadioGroup>          </CardContent>        </Card>        <Card>          <CardHeader>            <CardTitle>Notifications</CardTitle>            <CardDescription>              Choose what you want to be notified about            </CardDescription>          </CardHeader>          <CardContent>            <RadioGroup value={notifications} onValueChange={setNotifications}>              <div className="flex items-center gap-3">                <RadioGroupItem value="all" id="all" />                <Label htmlFor="all">All notifications</Label>              </div>              <div className="flex items-center gap-3">                <RadioGroupItem value="mentions" id="mentions" />                <Label htmlFor="mentions">Mentions only</Label>              </div>              <div className="flex items-center gap-3">                <RadioGroupItem value="none" id="none" />                <Label htmlFor="none">Nothing</Label>              </div>            </RadioGroup>          </CardContent>        </Card>      </div>    </div>  )}

Form with validation

Integrated validation that shows selection requirements:

Loading component...

"use client"import { zodResolver } from "@hookform/resolvers/zod"import { useForm } from "react-hook-form"import { toast } from "sonner"import { z } from "zod"import { Button } from "@/components/ui/button"import {  Form,  FormControl,  FormField,  FormItem,  FormLabel,  FormMessage,} from "@/components/ui/form"import {  RadioGroup,  RadioGroupItem,} from "@/components/ui/radio-group"const FormSchema = z.object({  type: z.enum(["all", "mentions", "none"], {    required_error: "You need to select a notification type.",  }),})export default function RadioGroupForm() {  const form = useForm<z.infer<typeof FormSchema>>({    resolver: zodResolver(FormSchema),  })  function onSubmit(data: z.infer<typeof FormSchema>) {    toast("You submitted the following values", {      description: (        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">          <code className="text-white">{JSON.stringify(data, null, 2)}</code>        </pre>      ),    })  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <Form {...form}>        <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">          <FormField            control={form.control}            name="type"            render={({ field }) => (              <FormItem className="space-y-3">                <FormLabel>Notify me about...</FormLabel>                <FormControl>                  <RadioGroup                    onValueChange={field.onChange}                    defaultValue={field.value}                    className="flex flex-col"                  >                    <FormItem className="flex items-center gap-3">                      <FormControl>                        <RadioGroupItem value="all" />                      </FormControl>                      <FormLabel className="font-normal">                        All new messages                      </FormLabel>                    </FormItem>                    <FormItem className="flex items-center gap-3">                      <FormControl>                        <RadioGroupItem value="mentions" />                      </FormControl>                      <FormLabel className="font-normal">                        Direct messages and mentions                      </FormLabel>                    </FormItem>                    <FormItem className="flex items-center gap-3">                      <FormControl>                        <RadioGroupItem value="none" />                      </FormControl>                      <FormLabel className="font-normal">Nothing</FormLabel>                    </FormItem>                  </RadioGroup>                </FormControl>                <FormMessage />              </FormItem>            )}          />          <Button type="submit">Submit</Button>        </form>      </Form>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Card-style selection

Visual options that feel more engaging:

Loading component...

"use client"import * as React from "react"import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"import { Label } from "@/components/ui/label"import { Card } from "@/components/ui/card"import { Zap, Rocket, Crown } from "lucide-react"import { cn } from "@/lib/utils"export default function RadioGroupCards() {  const [selected, setSelected] = React.useState("standard")  const plans = [    {      value: "free",      title: "Free",      description: "Great for trying things out",      price: "$0",      icon: Zap,      features: ["5 projects", "Basic support", "1 GB storage"]    },    {      value: "standard",      title: "Standard",      description: "Perfect for small teams",      price: "$15",      icon: Rocket,      features: ["Unlimited projects", "Priority support", "10 GB storage"]    },    {      value: "premium",      title: "Premium",      description: "For power users",      price: "$30",      icon: Crown,      features: ["Everything in Standard", "Advanced features", "100 GB storage"]    }  ]  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-3xl">        <div className="space-y-1.5 mb-4">          <h3 className="font-semibold leading-none">Choose your plan</h3>          <p className="text-sm text-muted-foreground">Select the plan that works best for you</p>        </div>        <RadioGroup value={selected} onValueChange={setSelected}>          <div className="grid gap-4 md:grid-cols-3">            {plans.map((plan) => {              const Icon = plan.icon              return (                <Label                  key={plan.value}                  htmlFor={plan.value}                  className="cursor-pointer"                >                  <Card className={cn(                    "relative overflow-hidden transition-all hover:shadow-md",                    selected === plan.value && "border-primary shadow-sm"                  )}>                    <div className="p-6 space-y-4">                      <div className="flex items-start justify-between">                        <Icon className="h-8 w-8 text-primary" />                        <RadioGroupItem                           value={plan.value}                           id={plan.value}                          className="mt-1"                        />                      </div>                      <div className="space-y-1">                        <h4 className="font-semibold">{plan.title}</h4>                        <p className="text-sm text-muted-foreground">                          {plan.description}                        </p>                      </div>                      <div className="text-2xl font-bold">                        {plan.price}                        <span className="text-sm font-normal text-muted-foreground">/month</span>                      </div>                      <ul className="space-y-1 text-sm">                        {plan.features.map((feature, i) => (                          <li key={i} className="flex items-center gap-2">                            <div className="h-1.5 w-1.5 rounded-full bg-primary" />                            {feature}                          </li>                        ))}                      </ul>                    </div>                  </Card>                </Label>              )            })}          </div>        </RadioGroup>      </div>    </div>  )}

Payment method selection

E-commerce checkout with visual payment options:

Loading component...

Survey and quiz questions

Single-answer questions with clear formatting:

Loading component...

Features

This free open source radio group component includes everything you need:

TypeScript-first - Full type safety with selection events and state management
Radix UI powered - Battle-tested accessibility and keyboard navigation
Single-choice guarantee - Only one option can be selected at a time
Tailwind CSS styled - Customize with utilities, not fighting component CSS
Keyboard accessible - Arrow keys navigate, Tab moves between groups
Form integration - Works seamlessly with react-hook-form and validation
Flexible layouts - Horizontal or vertical arrangement options
Screen reader ready - Proper ARIA roles and selection announcements

API Reference

Core Components

Component	Purpose	Key Props
`RadioGroup`	Root container	`value`, `onValueChange`, `orientation`
`RadioGroupItem`	Individual option	`value`, `disabled` for specific items

Selection Management

Prop	Type	Purpose
`value`	string	Currently selected option
`defaultValue`	string	Initial selection for uncontrolled use
`onValueChange`	function	Callback when selection changes
`name`	string	Form field name for submission

Layout Options

Setting	Options	Use Case
`orientation`	vertical, horizontal	Layout direction for options
`disabled`	boolean	Disable entire group
`required`	boolean	Mark as required field

Production tips

Always provide a sensible default selection. This free shadcn/ui radio group works best when you pre-select the most common or recommended option so users don't have to think about obvious choices. This TypeScript component handles the selection state—you provide smart defaults that reduce cognitive load in your Next.js applications.

Keep option sets small and scannable. More than 7 options gets overwhelming—consider using a Select component instead. This open source shadcn radio group displays all options visually, but cognitive psychology says users struggle to compare more than 5-7 choices at once.

Make entire labels clickable, not just the radio circles. Users expect to click anywhere on the label text to make selections. This JavaScript component supports proper label association, but make sure your click targets are generous enough for mobile users and accessibility.

Use clear, distinct option names. "Yes/No" beats "Enable/Disable", "Small/Medium/Large" beats "S/M/L". This Tailwind CSS styled component displays whatever text you provide—choose labels that eliminate ambiguity about what each choice means.

Group related options with visual hierarchy. Use spacing, separators, or card layouts to make scanning easier. Radio groups work best when users can quickly understand their choices and the consequences of each selection.

Integration with other components

Radio groups naturally work with Form components for validation and error handling in your React applications. Use Label components for consistent typography and proper accessibility associations.

For visual enhancement, combine radio groups with Card components for payment methods or plan selection interfaces. This open source pattern creates engaging choice experiences that feel more interactive than basic form controls.

When building complex forms, pair radio groups with Button components for form submission and Alert components for validation feedback. Separator components help organize long lists of radio options into logical groups.

For dynamic content, use radio groups with Badge components to highlight recommended options or Tooltip components for additional context. Your JavaScript application can compose these shadcn components while maintaining consistent form patterns.

Shadcn Radio Group

Radio group showcase

Why radio groups actually solve choice confusion

Common radio group patterns you'll actually use

Settings and preferences

Form with validation

Card-style selection

Payment method selection

Survey and quiz questions

Features

API Reference

Core Components

Selection Management

Layout Options

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Radio Group

Reactlabel

Reactradio-group

Reactlabel

Reactradio-group

Reactcard

Reactbutton

Reactform

Reactradio-group

Reactradio-group

Reactlabel

Reactcard

Reactlabel

Reactradio-group

Reactlabel

Reactradio-group

When should I use Radio Groups vs Checkboxes?

When should I use Radio Groups vs Select components?

How does keyboard navigation work in radio groups?

How do I integrate radio groups with form libraries?

Are radio groups accessible to screen readers?

Should radio groups always have a default selection?

How do radio groups work on mobile devices?

Can I customize radio group appearance and layout?

On this page