shadcn.io is not affiliated with official shadcn/ui
Field examples · Toggles
Radio with Descriptions Field for React
A subscription plan fieldset of radio buttons with each price in its label.
Plans compared at a glance: each option's label carries its price, Monthly ($9.99/month), Yearly ($99.99/year) and Lifetime ($299.99). The FieldDescription under the legend points out the savings. Monthly is selected by default.
Preview
Installation
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.
Related
- Radio Buttons FieldA fieldset of three radio buttons for
- Choice Cards FieldRadio choice cards, each a bordered row
- Multiple Checkboxes FieldA fieldset of four checkboxes for the
- Simple Checkbox FieldA terms and conditions checkbox with its
- Input with Description Below FieldA username input with helper text under it
- Complex Multi-Field FormA personal information fieldset with