Skip to content

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

Free

Single Input Dialog Alert Dialog for Ark UI

A rename dialog with one project name field prefilled with Untitled Project, and the buttons Cancel and Save.

The label is Project Name. The input starts as Untitled Project. Save does not rename anything.

One field can live here. A longer edit belongs in a Dialog. In React, Ark UI does not store the new name.

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 asChild>
    <Button variant="outline">Rename</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Rename Project</AlertDialogTitle>
      <AlertDialogDescription>
        Enter a new name for your project.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <Field>
      <FieldLabel>Project Name</FieldLabel>
      <Input
        defaultValue="Untitled Project"
        name="project-name"
        placeholder="My Project"
        type="text"
      />
    </Field>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Save</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

Alert Dialog or Dialog for a rename?

An Alert Dialog suits a quick, committed edit: it stays open until people save or cancel. Use a Dialog for longer forms people may abandon.

Should the input show the current value?

Yes. defaultValue shows the current name, Untitled Project, so people edit rather than retype. Leave it empty for create flows.

Does the input get focus when it opens?

The dialog moves focus inside when it opens. To land on the input, give it autoFocus.

How do I validate the name?

Control the input and disable Save while it's empty or invalid, with a FieldError saying what to fix.

What happens to the text on Cancel?

It's discarded: the dialog unmounts its content when it closes, so the next open starts from the default value again.

Does Save close the dialog?

Yes; read the value in its click handler. For a slow save, control the dialog and close it when the request settles.

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 defaultValue="Untitled Project", name="project-name", placeholder="My Project" and type="text". The rest is on the Input page.

All 39 alert dialog examples