Skip to content

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

Free

Form with Description Alert Dialog for React

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

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 React, Base UI does not issue the key.

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" />}>
    Create API Key
  </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 htmlFor="api-key-name">Key Name</FieldLabel>
      <Input
        id="api-key-name"
        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>
      <AlertDialogAction>Create Key</AlertDialogAction>
    </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. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

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.

Field

Sets htmlFor="api-key-name". The rest is on the Field page.

Input

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

All 39 alert dialog examples