Radio Group

One choice from a small set the user can see all at once. More than a handful of options is a select, and independent choices are checkboxes.

import from ~/components/ui/radio-group

Default

Project stack

RadioGroup / RadioGroupItem

Vertical by default, with one option selected on arrival. fieldset and legend give the group its name; arrow keys move the selection, Tab enters and leaves the group as one stop.

Disabled option

Deployment target

disabled

A single item can be disabled while the rest of the group stays live. Arrow keys skip it. Say why it is unavailable next to it, because the dimmed dot alone does not explain itself.

In a form field

You can change this once per invoice period.

FormField + RadioGroup

FormField supplies the field label, the hint line and the error line. Its label element is tied to a control with htmlFor, which a radiogroup cannot be, so the group carries aria-label with the same text.

Rules

Do

Give the group a label: a legend, or aria-label / aria-labelledby on the group.
Use it for two to five exclusive options the user should see all at once.
Select one by default, unless choosing nothing is a real and meaningful answer.
Tie each item to a label with matching id and htmlFor, so the text is a hit target.

Don't

Do not use a radio group for many options. Past a handful it is a select.
Do not use it for multi-select. Independent choices are checkboxes.
Do not disable an option without saying why. The dimmed dot explains nothing.
Do not restyle the item with border or color classes. Layout classes only, such as mt-1.