Radio Group

Native radio group restyled with a springy dot and ripple, plus a card variant whose selection outline slides between options. Arrow keys just work.

Choose a plan

HobbyPersonal projects, 1 seatPro$20 / month, unlimited buildsTeamSSO, audit log, 10+ seats

Notify me about

All new messagesEvery message in every channel.MentionsOnly when someone needs you.Nothing

Open

variant

orientation

disabled

Installation

npx shadcn@latest add @glint-ui/radio-group

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/radio-group.json

Usage

import { RadioGroup } from "@/components/ui/radio-group";

<RadioGroup variant="card" defaultValue="pro" aria-label="Plan">
  <RadioGroupItem value="hobby" label="Hobby" description="Personal projects" />
  <RadioGroupItem value="pro" label="Pro" description="$20 / month" />
</RadioGroup>

Props

Prop	Type	Default	Description
variant	"default" \| "card"	"default"	Plain radios or selectable cards.
orientation	"vertical" \| "horizontal"	"vertical"	Layout direction.
disabled	boolean	false	Disable every option.
defaultValue	string	—	Initially selected value (uncontrolled).
value	ReactNode	—	Controlled value (with onValueChange).
name	ReactNode	—	Form field name. Auto-generated if omitted.
children	ReactNode	—	RadioGroupItem elements (value, label, description, icon, disabled).
className	string	—	Extra classes for the root element.