Skip to content

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

Free

Form with Validation State Alert Dialog for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not transfer the project.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger :asChild="true">
    <Button variant="outline">Transfer</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Transfer Project</AlertDialogTitle>
      <AlertDialogDescription>
        Type the project name to confirm the transfer.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <Field :invalid="invalid">
      <FieldLabel>
        Project Name: <span class="font-mono">{{ projectName }}</span>
      </FieldLabel>
      <Input
        @input="handleChange"
        placeholder="Type project name"
        type="text"
        :value="value"
      />
      <FieldError>Project name does not match</FieldError>
    </Field>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose :asChild="true">
        <AlertDialogAction :disabled="invalid">Transfer</AlertDialogAction>
      </AlertDialogClose>
    </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 asChild and 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". The rest is on the Field page.

Input

Sets input="handleChange", placeholder="Type project name", type="text" and value="value". The rest is on the Input page.

All 39 alert dialog examples