Radio group

Selects one option from a short visible list.

Workspace plan

Personal

Team

Enterprise

radio-group-demo.tsx

"use client";import { Radio, RadioGroup } from "@/components/vip-ui/radio-group";export function RadioGroupDemo() {  return (    <RadioGroup      label="Workspace plan"      defaultValue="team"      className="w-full max-w-sm"    >      <Radio value="personal">Personal</Radio>      <Radio value="team">Team</Radio>      <Radio value="enterprise">Enterprise</Radio>    </RadioGroup>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-radio-group.json

Composition

RadioGroup
Owns the selected value. Lays out its children by orientation.
- RadioGroupLabel
- RadioGroupDescription
- RadioGroupItemsOptional
  Changes the gap between choices.
  - RadioFieldRepeats
    - RadioButton
      Its text becomes the accessible name.
      - RadioIndicator
      - RadioLabel
    - RadioDescription
- RadioGroupError

Radio Renders RadioField and its parts from children and description. Use the parts only for a custom layout.

Described options

Notifications

All activityEvery comment, change, and mention.

Mentions onlyOnly when someone mentions you.

NoneNo notifications.

radio-group-description-demo.tsx

"use client";import { Radio, RadioGroup } from "@/components/vip-ui/radio-group";export function RadioGroupDescriptionDemo() {  return (    <RadioGroup      label="Notifications"      defaultValue="mentions"      className="w-full max-w-sm"    >      <Radio value="all" description="Every comment, change, and mention.">        All activity      </Radio>      <Radio value="mentions" description="Only when someone mentions you.">        Mentions only      </Radio>      <Radio value="none" description="No notifications.">        None      </Radio>    </RadioGroup>  );}

Horizontal

Size

Small

Medium

Large

radio-group-horizontal-demo.tsx

"use client";import { Radio, RadioGroup } from "@/components/vip-ui/radio-group";export function RadioGroupHorizontalDemo() {  return (    <RadioGroup      label="Size"      orientation="horizontal"      defaultValue="medium"      className="w-full max-w-sm"    >      <Radio value="small">Small</Radio>      <Radio value="medium">Medium</Radio>      <Radio value="large">Large</Radio>    </RadioGroup>  );}

Card options

Compose the RadioField parts to put content beside the label.

Plan

Hobby$0One project.

Pro$20Unlimited projects.

Team$50Shared billing.

radio-group-card-demo.tsx

"use client";import {  RadioButton,  RadioDescription,  RadioField,  RadioGroup,  RadioGroupItems,  RadioGroupLabel,  RadioIndicator,  RadioLabel,} from "@/components/vip-ui/radio-group";const plans = [  { id: "hobby", name: "Hobby", price: 0, description: "One project." },  { id: "pro", name: "Pro", price: 20, description: "Unlimited projects." },  { id: "team", name: "Team", price: 50, description: "Shared billing." },];export function RadioGroupCardDemo() {  return (    <RadioGroup defaultValue="pro" className="w-full max-w-sm">      <RadioGroupLabel>Plan</RadioGroupLabel>      <RadioGroupItems className="gap-2">        {plans.map((plan) => (          <RadioField key={plan.id} value={plan.id} variant="card">            <RadioButton>              <RadioIndicator />              <RadioLabel className="flex-1">{plan.name}</RadioLabel>              <span className="font-semibold tabular-nums">                ${plan.price}                <span                  aria-hidden="true"                  className="font-normal text-muted-foreground"                >                  /mo                </span>                <span className="sr-only"> per month</span>              </span>            </RadioButton>            <RadioDescription>{plan.description}</RadioDescription>          </RadioField>        ))}      </RadioGroupItems>    </RadioGroup>  );}

Disabled

Set isDisabled on one Radio, or on RadioGroup for all options.

Region

United States

Europe

Asia PacificNot available on your plan.

radio-group-disabled-demo.tsx

"use client";import { Radio, RadioGroup } from "@/components/vip-ui/radio-group";export function RadioGroupDisabledDemo() {  return (    <RadioGroup label="Region" defaultValue="us" className="w-full max-w-sm">      <Radio value="us">United States</Radio>      <Radio value="eu">Europe</Radio>      <Radio value="apac" isDisabled description="Not available on your plan.">        Asia Pacific      </Radio>    </RadioGroup>  );}

Required

The error shows after the first submit. Also install Form and Button.

radio-group-required-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { Radio, RadioGroup } from "@/components/vip-ui/radio-group";export function RadioGroupRequiredDemo() {  return (    <Form      className="w-full max-w-sm"      onSubmit={(event) => {        event.preventDefault();      }}    >      <RadioGroup        label="Delivery speed"        name="speed"        isRequired        errorMessage="Select a delivery speed."      >        <Radio value="standard" description="3 to 5 business days.">          Standard        </Radio>        <Radio value="express" description="Next business day.">          Express        </Radio>      </RadioGroup>      <Button type="submit">Continue</Button>    </Form>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria RadioGroup (opens in a new tab).

RadioGroup

label: ReactNode: The label of the group. Without it, pass aria-label or compose RadioGroupLabel.
description: ReactNode: Help text for the group, below the label.
errorMessage: string | ((validation: ValidationResult) => string): Shown below the options when the group is invalid. Without it, the browser validation message shows. With label, description, or errorMessage, the group adds RadioGroupError for you.
onValueChange: (value: string) => void: Alias for onChange. Both run when both are set.

Radio

children: ReactNode: The label. Without it, pass aria-label so the option has a name.
description: ReactNode: Help text below the label. Linked with aria-describedby, so it is not part of the name.
variant: "default" | "card" = "default": Selects the plain or card appearance. A card selects the option from anywhere inside it. RadioField takes the same prop.