Radio Group

A single choice: pick exactly one option from a short list you can see all at once.

Visibility

Only you can see this project.

Everyone on the Design team can view and edit.

Anyone in the workspace can find it.

Fig. 1 Choose who can see a project. Tab into the group, then move the selection with the arrow keys.

When to use it

Use Radio Group when people must pick exactly one option, and choosing one clears the others. It suits two to five options worth comparing, such as visibility, plans, or delivery speeds, because every option and its description stays visible.

If people can pick several, use checkboxes. If the options take too much room, or people already know what they want, use Select.

Radio GroupThis page

One choice, every option visible.

Visibility

Only you can see this project.

Everyone on the Design team can view and edit.

Anyone in the workspace can find it.

Two to five options worth comparing.

Select

A short list, one value.

Selected: Personal workspace.

A role, a region, or a sort order.

Combobox

A long list, searched.

Countries, people, and tags.

Fig. 2 Three ways to choose one value. Pick by how many options there are and whether people should see them all.

How it behaves

Use defaultValue for local state or value/onValueChange for controlled state. Pass name to submit the selected value with a form.

Label the group with aria-labelledby and each RadioGroupItem with a label using htmlFor and id. Arrow keys move the selection; Tab leaves the group.

Prefer a radio group for two to five options people should compare at a glance. Use Select for longer lists.

The selected dot scales in over 150ms. Reduced motion fades it instead, and keyboard changes are immediate.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

radio-group-example.tsx

The full source is yours to edit once installed:

radio-group.tsx