shadcn.io is not affiliated with official shadcn/ui
Alert Dialog examples · Form
Form with Radio Group Alert Dialog for React
An alert dialog with a radio group of card options for choosing an export format.
A dropdown hides the options; sometimes you want them all in view. This React alert dialog lists JSON, CSV and XML as radio cards with a one-line description each. It's shadcn.io's Alert Dialog on Base UI with a Radio Group whose items sit in Field cards.
Preview
Installation
FAQ
Radio group or select?
A radio group for three to five options people should compare, especially with descriptions. A select for longer lists or when space is tight.
Should an option be selected by default?
Usually. defaultValue="json" preselects the most common choice. Leave it empty only when you need people to choose deliberately.
How are the cards built?
Each option is a FieldLabel wrapping a horizontal Field with FieldTitle, FieldDescription and the RadioGroupItem. The label makes the whole card clickable and gives it its border and selected style.
Can I use it with the keyboard?
Yes. Tab moves into the group, arrow keys move between options and select them. The group is named Export format through aria-label.
Related
- Form with Select Alert DialogAn alert dialog with an email input and a
- Form with Checkboxes Alert DialogAn alert dialog with checkboxes, each
- Basic Radio GroupA vertical radio group of three options
- Multiple Inputs Dialog Alert DialogAn alert dialog with a subject input and
- Simple Confirmation Dialog Alert DialogA simple confirmation dialog with Cancel
- Standard DialogA share dialog with a read-only link, a