Skip to content

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

Free

Radio with Descriptions Field for React

Subscription Plan lists Monthly ($9.99/month), Yearly ($99.99/year), and Lifetime ($299.99). Monthly starts selected.

Subscription Plan is the caption. The note says yearly and lifetime plans offer significant savings. Rows: Monthly ($9.99/month), Yearly ($99.99/year), and Lifetime ($299.99). Monthly starts selected.

Reach for it when the price belongs in the option label. A longer pitch for each plan can sit on a Card. In React, Base UI does not bill the plan.

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

Field anatomy: root, label, input, description, error

Usage

<FieldSet className="w-full max-w-md">
  <FieldLegend variant="label">Subscription Plan</FieldLegend>
  <FieldDescription>
    Yearly and lifetime plans offer significant savings.
  </FieldDescription>
  <RadioGroup defaultValue="monthly">
    <Field orientation="horizontal">
      <RadioGroupItem id="billing-monthly" value="monthly" />
      <FieldLabel className="font-normal" htmlFor="billing-monthly">
        Monthly ($9.99/month)
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem id="billing-yearly" value="yearly" />
      <FieldLabel className="font-normal" htmlFor="billing-yearly">
        Yearly ($99.99/year)
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem id="billing-lifetime" value="lifetime" />
      <FieldLabel className="font-normal" htmlFor="billing-lifetime">
        Lifetime ($299.99)
      </FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>

FAQ

How does the group keep a single plan selected?

The three plans share one RadioGroup. defaultValue is monthly, so Monthly starts selected, and choosing another plan clears it.

Where do the prices show?

Each price is part of the option text: Monthly ($9.99/month), Yearly ($99.99/year), and Lifetime ($299.99). The values are monthly, yearly, and lifetime.

What is the Subscription Plan line?

FieldDescription on the set reads Yearly and lifetime plans offer significant savings. That sentence covers the group, and the prices stay on the options. The caption is a FieldLegend with variant set to label.

Where does each plan's text go?

Each plan is a horizontal Field with RadioGroupItem and a FieldLabel. font-normal on the label keeps the price at normal weight.

How wide is the list?

The block is capped with max-w-md. The caption, the savings sentence, and the three rows share that width.

Which keys move between the plans?

The keys are the radio group's own keys. Field does not add arrow-key behavior of its own.

API Reference

Field

Sets variant="label", orientation="horizontal", htmlFor="billing-monthly", htmlFor="billing-yearly" and htmlFor="billing-lifetime". The rest is on the Field page.

Radio Group

Sets defaultValue="monthly", id="billing-monthly", value="monthly", id="billing-yearly", value="yearly" and id="billing-lifetime". The rest is on the Radio Group page.

All 38 field examples