Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Radio Group with Descriptions for React

Default, Comfortable and Compact, each with a muted line under the label. Comfortable starts selected.

Three radios: Default, Comfortable and Compact. Comfortable starts selected. Each has a muted line under the label about spacing.

Add the line when people need to see what a choice does before they pick it. A Select hides those lines until it opens. In React, Base UI does not write the descriptions.

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

Anatomy

Radio Group anatomy: root, label, item control, indicator, item, item text

Usage

<RadioGroup className="w-fit" defaultValue="comfortable">
  {options.map((option) => (
    <Field key={option.value} orientation="horizontal">
      <RadioGroupItem id={`density-${option.value}`} value={option.value} />
      <FieldContent>
        <FieldLabel htmlFor={`density-${option.value}`}>
          {option.label}
        </FieldLabel>
        <FieldDescription>{option.description}</FieldDescription>
      </FieldContent>
    </Field>
  ))}
</RadioGroup>

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.

API Reference

Radio Group

Sets defaultValue="comfortable", id, density-, option, value and value={option.value}. The rest is on the Radio Group page.

Field

Sets orientation="horizontal", htmlFor, density-, option and value. The rest is on the Field page.

All 9 radio group examples