Skip to content

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

Free

Radio with Descriptions Field for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not bill the plan.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<FieldSet class="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 value="monthly">Monthly ($9.99/month)</RadioGroupItem>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="yearly">Yearly ($99.99/year)</RadioGroupItem>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="lifetime">Lifetime ($299.99)</RadioGroupItem>
    </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?

The plan and its price are the text inside RadioGroupItem. Each item sits in a Field with orientation set to horizontal.

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" and orientation="horizontal". The rest is on the Field page.

Radio Group

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

All 38 field examples