ThiloDesign System
DV

Radio Group

shadcn/ui

Exclusive single-choice selection. Use when the user must pick exactly one option from a visible list.

@/components/ui/radio-group

States

StatePreviewToken
Unselected
border-primary bg-background
Selected
bg-primary text-primary-foreground (inner dot)
Focus
ring-ring/50 — Tab to see
Disabled
opacity-50 cursor-not-allowed

Layouts

Vertical (default)

Horizontal

In context — priority selector

New ticketT7A3763

Banana Corp

RadioGroup vs Select

RadioGroupSelect
Options count2–6 options, all visibleAny count, collapsed by default
ComparisonUser can scan all at onceUser opens to see options
Best forPriority, status, role — small setsCountry, timezone, category — large sets

Props

PropTypeDescription
valuestringControlled selected value
defaultValuestringInitial value (uncontrolled)
onValueChangefunction(value: string) => void
disabledbooleanDisables all items in the group
orientationstring"vertical" (default) | "horizontal"
requiredbooleanHTML required attribute for form submission

On this page