Component · 13

Radio

One choice from a few. Built on Base UI: the group is one tab stop and the arrow keys move and select. Round, so it never reads as a checkbox, and it sinks into the page when pressed.

A group

Tab into the group, then use the arrow keys. Name the group with a visible heading.

Plan

FreeProTeam

tsx

<p id="plan-label">Plan</p>
<RadioGroup aria-labelledby="plan-label" defaultValue="free">
  <Radio value="free" label="Free" />
  <Radio value="pro" label="Pro" />
  <Radio value="team" label="Team" />
</RadioGroup>

Disabled

MonthlyYearlyLifetime (sold out)

tsx

<RadioGroup aria-label="Billing" defaultValue="monthly">
  <Radio value="monthly" label="Monthly" />
  <Radio value="yearly" label="Yearly" />
  <Radio value="lifetime" label="Lifetime (sold out)" disabled />
</RadioGroup>

In a form

The chosen value is submitted under the group's name.

tsx

<form>
  <RadioGroup name="size" aria-label="Size" defaultValue="m">
    <Radio value="s" label="Small" />
    <Radio value="m" label="Medium" />
    <Radio value="l" label="Large" />
  </RadioGroup>
</form>

Props

Prop	Type	Default	Description
RadioGroup value / defaultValue	string	-	The selected value. Controlled with value + onValueChange.
RadioGroup onValueChange	(value, details) => void	-	Fires when the selection changes.
RadioGroup name / required / disabled / readOnly	-	-	Form integration. The selected value is submitted under name.
RadioGroup aria-labelledby / aria-label	string	required	Names the group. Point it at a visible heading.
Radio value	string	required	What this option stands for.
Radio label	ReactNode	-	Wraps the radio in a <label> so the text selects it and names it. Without it, pass aria-label.
Radio disabled	boolean	false	Visible but not choosable.
className	string	-	On Radio: with a label it goes on the wrapper, without on the radio.

Use radios when the options are few and all worth seeing. For many options use Select; for several choices at once use Checkbox.