Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Form

Single Input Dialog Alert Dialog for React

An alert dialog with one prefilled input for renaming a project.

Framework
UI library

A full form is too much for a rename. This React alert dialog asks for one thing, the project's new name, in an input prefilled with the current one. It's shadcn.io's Alert Dialog on Base UI with an Input in a Field.

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

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. 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.

All 39 alert dialog examples