Skip to content

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

Free

Form with Description Alert Dialog for Vue

An API key dialog with one Key Name field, the placeholder Production API Key, and helper text under the input.

UI library: Ark UI

The title is Create API Key. The field is Key Name, with the placeholder Production API Key, and helper text about where the key will be used. Create Key does not create one.

Put helper text on the field when the label cannot say where the key is used. A longer form belongs in a Dialog. In Vue, Ark UI does not issue the key.

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">Create API Key</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Create API Key</AlertDialogTitle>
      <AlertDialogDescription>
        Give your API key a descriptive name to help you identify it later.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <Field>
      <FieldLabel>Key Name</FieldLabel>
      <Input name="key-name" placeholder="Production API Key" type="text" />
      <FieldDescription>
        Use a name that describes where this key will be used.
      </FieldDescription>
    </Field>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose :asChild="true">
        <AlertDialogAction>Create Key</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

What should the helper text say?

What helps people get it right: purpose, format or limits. Use a name that describes where this key will be used beats repeating the label.

Helper text or placeholder?

Both. The placeholder shows an example, Production API Key, and disappears as people type; the description stays visible, so put requirements there.

How long should it be?

One short sentence. If it needs more, the input is probably too complex for a dialog.

How is the field built?

A Field with FieldLabel, the Input and a FieldDescription under it. The field ties the label and description to the input, so screen readers announce both.

How do I show an error instead?

Mark the field invalid and add a FieldError with what to fix, as in Form with Validation State.

Does Create Key close the dialog?

Yes; read the value and create the key in its click handler.

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.

Field

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

Input

Sets name="key-name", placeholder="Production API Key" and type="text". The rest is on the Input page.

All 39 alert dialog examples