Radio

Starter1 agent · 500 runsPro5 agents · 10k runsTeamUnlimited agentsEnterprise (contact sales)

Installation

pnpm dlx shadcn@latest add @paneui/radio

Usage

import { Label } from "@/components/ui/label"
import { Radio, RadioGroup } from "@/components/ui/radio"

<RadioGroup defaultValue="pro" aria-label="Plan">
  <Label>
    <Radio value="starter" />
    Starter
  </Label>
  <Label>
    <Radio value="pro" />
    Pro
  </Label>
</RadioGroup>

Composition

RadioGroup
└── Label
    └── Radio

Examples

Horizontal

Use for two or three short options that fit on one line.

Controlled

Use when other UI reacts to the choice.

Choice Cards

Use when each option needs a description or price beside it.

Disabled

Sizes

Motion

A standalone Radio pops its dot in instead of gliding. With reduced motion the dot moves instantly.

Keyboard

Tab moves into the group; arrow keys move and select.

API Reference

Built on the Radio Group primitive. Only the props this library adds or changes are listed; everything else passes through.

RadioGroup

Groups radios and shares the gliding dot between them. A vertical stack with a 12px gap. Also accepts every prop of RadioGroup.

size= "default": "sm" | "default" | "lg"; Size of every radio inside: 14 / 16 / 20px.
value: Value; Controlled selected value.
defaultValue: Value; Selected value on first render.
onValueChange: (value: Value, details) => void; Called when the selection changes.
disabled= false: boolean; Disable every radio.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Size of every radio inside: 14 / 16 / 20px.
value	Value	—	Controlled selected value.
defaultValue	Value	—	Selected value on first render.
onValueChange	(value: Value, details) => void	—	Called when the selection changes.
disabled	boolean	false	Disable every radio.

An 18px round control in an inset well. Also accepts every prop of Radio.Root.

size: "sm" | "default" | "lg"; Overrides the group size. Inside a sized Field it takes the field's size (xs maps to sm).
value*: Value; Identifies this option in the group.
disabled= false: boolean; Disable this radio.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	—	Overrides the group size. Inside a sized `Field` it takes the field's size (`xs` maps to `sm`).
value*	Value	—	Identifies this option in the group.
disabled	boolean	false	Disable this radio.

data-size: The resolved size.
data-checked: Present when selected.
data-disabled: Present when disabled.
data-invalid: Present when invalid inside a Field (destructive ring).

Data attribute	Description
data-size	The resolved size.
data-checked	Present when selected.
data-disabled	Present when disabled.
data-invalid	Present when invalid inside a Field (destructive ring).