Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Form

Form with Validation State Alert Dialog for React

An alert dialog whose input shows an error, and whose action stays disabled, until the typed name matches the project.

Framework
UI library

Typing the name proves people know what they're acting on. This React alert dialog keeps Transfer disabled and shows Project name does not match until the input equals my-project. It's shadcn.io's Alert Dialog on Base UI with an Input in an invalid 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

Type-to-confirm or a checkbox?

Type-to-confirm for actions on a named resource, since it proves people know which one. A checkbox for general acknowledgments, as in Destructive with Checkbox Confirmation.

Should the match be case-sensitive?

Match the system: project names and usernames usually are, so the demo compares exactly. Compare case-insensitively for things like email addresses.

How is the error shown?

The input is controlled, and the Field gets invalid while the value doesn't match. That colors the field, marks the input aria-invalid and shows its FieldError.

Should the error show before people finish typing?

The demo shows it from the start, like the original. In an app you may prefer to show it after the field loses focus, while still enabling the button the moment the name matches.

Why disable the button instead of erroring on click?

A disabled button tells people they can't proceed yet, and it enables as soon as the name matches.

Is the validation accessible?

Yes. The label is tied to the input, the input is marked invalid, and the error message is part of the field, so screen readers announce it.

All 39 alert dialog examples