shadcn.io is not affiliated with official shadcn/ui
Field examples · Advanced
Choice Cards Field for React
Radio choice cards, each a bordered row with a title, a description and a radio, for picking a compute environment.
Turn each radio option into a card people can click anywhere on. Each FieldLabel wraps a horizontal Field with a FieldTitle, a FieldDescription and a RadioGroupItem, so the whole bordered row selects its option and highlights when checked. Use it for plans, environments or onboarding choices that need a line of context each.
Preview
Installation
FAQ
How does the whole card select the radio?
FieldLabel wraps the Field, so the row is the label for that radio. RadioGroupItem sits at the end of the row.
Where do Kubernetes and Virtual Machine come from?
FieldTitle is the visible name, Kubernetes or Virtual Machine. The GPU sentence is the FieldDescription under that title, inside FieldContent.
What is the Compute Environment line?
FieldDescription under the caption reads Select the compute environment for your cluster.
The caption is a FieldLegend with variant set to label, the quieter legend.
Related
- Dropdown with Radio Items Dropdown MenuA panel position picker where exactly one
- Standard Accordion with ChevronA bordered accordion of three questions
- Standard DialogA share dialog with a read-only link, a
- Standard CardA basic card with a title, a description
- Field Group with SeparatorTwo notification fieldsets of checkboxes
- Complex Multi-Field FormA personal information fieldset with