Layout UI

Radio Group

A set of mutually exclusive radio buttons. Built on Base UI Radio Group and Radio with a filled circle indicator.

Preview

Installation

bash
npx shadcn@latest add @layout/radio-group

Usage

tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

Examples

Controlled

Horizontal layout

Disabled

Guidelines for AI agents

Wrap RadioGroupItem elements in RadioGroup. Each item needs a unique value. Pair each item with a Label via htmlFor/id. Use vertical layout (default) for most forms; switch to flex-row for short inline choices.

Never

  • Neveruse RadioGroup for multiple selections; use Checkbox instead
  • Neveromit value on RadioGroupItem
  • Neverskip labelling each item — aria-label or htmlFor required
  • Neverhardcode the indicator colour; it derives from --layout-primary

Tokens consumed

--layout-primary--layout-input--layout-ring--layout-radius--layout-duration-base