shadcn.io is not affiliated with official shadcn/ui
Radio Group examples · Layout
Radio Group with Cards for React
Plan options as bordered cards, where clicking anywhere on a card selects it and the selected card is highlighted.
For a plan, a tier or a package, a bare radio button undersells the choice. Each option here is a card with a title and a line about who it is for, and the whole card is the click target. The selected card picks up a tinted border. In React, Base UI still runs it as one radio group with the usual keys.
Preview
Installation
FAQ
Which card starts selected?
defaultValue is starter, the Starter Plan. The values are starter, professional, and enterprise, from a list at the top of the file.
Where do the border and hover come from?
From FieldLabel. When it wraps a Field, it draws the rounded border, pads the field, and shows a hover background. No card classes are written in the demo.
Does clicking the description select the card?
Yes. FieldLabel wraps the whole Field, the item, the FieldTitle and the FieldDescription, so a click anywhere on the card checks the radio. The FieldLabel points at the item with htmlFor, and the item has the matching id.
How do I show which card is selected?
It is built in: FieldLabel changes its border and background when the item inside it is checked. Restyle that state in your own classes if you want a stronger highlight.
Related
- Radio Group with Custom ContentPricing tiers as selectable cards, each
- Radio Group with DescriptionsA radio group with a line of muted text
- Horizontal Radio GroupA radio group with its three options in a
- Radio Group in GridSix radio options in a two-column grid
- Radio Group with IconsPayment method options with an icon
- Radio Group in FormA required notification setting in a form