Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Radio Group examples · Standard

Radio Group with Descriptions for React

A radio group with a line of muted text under each option, so people see what a choice does before they pick it.

Framework
UI library

A one-word label does not always say what an option means. Here each density setting, Default, Comfortable and Compact, has a short sentence under its name in FieldDescription. Use it for settings where the choice has a consequence. In React, Base UI keeps the group and its labels connected.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which option starts selected?

defaultValue is comfortable, the second option. The item values are default, comfortable, and compact, from a list at the top of the file.

How does the description line up under the label?

Each option is a horizontal Field: the item, then FieldContent with the FieldLabel above the FieldDescription.

How is the description styled?

FieldDescription sets text-muted-foreground and text-sm. It is not wired to the item with aria-describedby, so a screen reader reads it as nearby text.

Does clicking the description select the option?

No. Only the name is the label, so clicking the name checks the item and the sentence under it does nothing. Each RadioGroupItem has an id, and FieldLabel points at it with htmlFor.

Can one option skip the description?

Yes. Each option renders its own FieldDescription. Leave it out on an option that needs only a name.

Can I move between these options from the keyboard?

Yes. Tab moves focus to the checked item, or to the first item when none is checked. The arrow keys move to another item and check it, and Space checks the item that has focus.

All 9 radio group examples