Skip to content

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

Free

Form with Validation State Alert Dialog for React

A transfer dialog that shows an error and keeps Transfer disabled until the typed name matches my-project.

The label shows the name to type. From the start, the field says Project name does not match and Transfer stays disabled. A match does not transfer the project.

Ask for the name when a checkbox is too easy to tick, and enable the button only on an exact match. A lighter confirm is a Checkbox. In React, Base UI does not transfer the project.

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" />}>
    Transfer
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Transfer Project</AlertDialogTitle>
      <AlertDialogDescription>
        Type the project name to confirm the transfer.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <Field invalid={invalid}>
      <FieldLabel htmlFor="transfer-project-name">
        Project Name: <span className="font-mono">{projectName}</span>
      </FieldLabel>
      <Input
        id="transfer-project-name"
        onChange={handleChange}
        placeholder="Type project name"
        type="text"
        value={value}
      />
      {invalid ? (
        <FieldError>Project name does not match</FieldError>
      ) : null}
    </Field>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction disabled={invalid}>Transfer</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

Sets disabled={invalid}. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets invalid={invalid} and htmlFor="transfer-project-name". The rest is on the Field page.

Input

Sets id="transfer-project-name", onChange={handleChange}, placeholder="Type project name", type="text" and value={value}. The rest is on the Input page.

All 39 alert dialog examples