Skip to content

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

Free

Form with Radio Group Alert Dialog for React

An export dialog with JSON, CSV, and XML as radio cards. JSON starts selected, and Export does not download a file.

Each format is a radio with a title and a description. JSON is the default. The buttons are Cancel and Export. No file is built.

Use radios when exactly one format is allowed. A long list fits a Select better. In React, Base UI does not export the data.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Export Data
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Export Format</AlertDialogTitle>
      <AlertDialogDescription>
        Choose the format you want to export your data in.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <RadioGroup aria-label="Export format" defaultValue="json">
      {formats.map((format) => (
        <FieldLabel htmlFor={`export-${format.value}`} key={format.value}>
          <Field orientation="horizontal">
            <RadioGroupItem
              id={`export-${format.value}`}
              value={format.value}
            />
            <FieldContent>
              <FieldTitle>{format.label}</FieldTitle>
              <FieldDescription>{format.description}</FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      ))}
    </RadioGroup>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Export</AlertDialogAction>
    </AlertDialogFooter>
{/* The rest of the file is under 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.

Can I disable one option?

Yes, set disabled on that RadioGroupItem and say why in its description, for example Requires Pro plan.

Where do the formats come from?

A static array at module scope, mapped to the cards. Replace it with your own options.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Radio Group

Sets aria-label="Export format", defaultValue="json", id, export-, format and value. The rest is on the Radio Group page.

Field

Sets htmlFor, export-, format, value and orientation="horizontal". The rest is on the Field page.

All 39 alert dialog examples