Radio Group

A role="radiogroup" wrapper for Radio items. Pass a shared name to radio inputs to ensure only one can be selected at a time. Use orientation="horizontal" for a row layout.

Default

Pick one
<RadioGroup label="Pick one">
  <Radio name="pick" value="react" label="React" />
  <Radio name="pick" value="svelte" label="Svelte" />
  <Radio name="pick" value="vue" label="Vue" checked />
</RadioGroup>

With description

Subscription plan

You can change this later in your account settings

Up to 3 projects

Unlimited projects

Per-seat pricing

<RadioGroup label="Subscription plan" description="Change anytime">
  <Radio name="plan" value="free" label="Free" description="Up to 3 projects" />
  <Radio name="plan" value="pro" label="Pro" description="Unlimited projects" checked />
  <Radio name="plan" value="team" label="Team" description="Per-seat pricing" />
</RadioGroup>

With error

Required choice

Please select an option

<RadioGroup label="Required choice" error="Please select an option">
  <Radio name="req" value="a" label="Option A" />
  <Radio name="req" value="b" label="Option B" />
</RadioGroup>

Horizontal orientation

Size
<RadioGroup label="Size" orientation="horizontal">
  <Radio name="size" value="sm" label="Small" />
  <Radio name="size" value="md" label="Medium" checked />
  <Radio name="size" value="lg" label="Large" />
</RadioGroup>

Color

<Radio name="colors" value="violet" label="violet" color="violet" checked />
<Radio name="colors" value="blue"   label="blue"   color="blue" />
<Radio name="colors" value="green"  label="green"  color="green" />

States

<Radio name="s" value="a" label="Default" />
<Radio name="s" value="b" label="Checked" checked />
<Radio name="s" value="c" label="Disabled" disabled />
<Radio name="s" value="d" label="Disabled checked" disabled checked />

RadioGroup props

PropTypeDefaultDescription
labelstring—Accessible group label
descriptionstring—Helper text below the label
errorstring—Error message; applies error styling to all items
orientation'horizontal'|'vertical''vertical'Layout direction
size'xs'|'sm'|'md'|'lg'|'xl'—Controls group label font size

Radio props

PropTypeDefaultDescription
labelchildren—Clickable label beside the radio button
descriptionchildren—Helper text below the label
errorchildren|boolean—Error message or true for styles only
checkedboolean—SSR selected state
disabledboolean—Prevents interaction
colorUiColor—Selected fill color
size'xs'|'sm'|'md'|'lg'|'xl'—Radio button size
namestring—Groups radio buttons into a single-choice set
valuestring—Value submitted when selected