Skip to content

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

Free

Form with Radio Group Alert Dialog for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not export the data.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<AlertDialog>
  <AlertDialogTrigger :asChild="true">
    <Button variant="outline">Export Data</Button>
  </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">
      <FieldLabel v-for="format in formats" :key="format.value">
        <Field orientation="horizontal">
          <RadioGroupItem :value="format.value" />
          <FieldContent>
            <FieldTitle>{{ format.label }}</FieldTitle>
            <FieldDescription>{{ format.description }}</FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </RadioGroup>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose :asChild="true">
        <AlertDialogAction>Export</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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

Sets asChild. 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" and value="format.value". The rest is on the Radio Group page.

Field

Sets v-for="format in formats", key="format.value" and orientation="horizontal". The rest is on the Field page.

All 39 alert dialog examples