# Alert Dialog Form 5 - Form with Validation State

> Alert dialog with validation error state and disabled action.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/alert-dialog-alert-dialog-form-5).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/alert-dialog-alert-dialog-form-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/alert-dialog-alert-dialog-form-5-light-a60f3278347e99a0.png
- Registry item: https://shadcnblocks.com/r/alert-dialog-alert-dialog-form-5.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/alert-dialog-alert-dialog-form-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `alert-dialog`, `button`, `input`, `label`

## Files

### `example/alert-dialog/alert-dialog-form-5.tsx`

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export const title = "Form with Validation State";

const Example = () => (
  <AlertDialog>
    <AlertDialogTrigger asChild>
      <Button variant="outline">Transfer</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Transfer Project</AlertDialogTitle>
        <AlertDialogDescription>
          Type the project name to confirm the transfer.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <div className="space-y-4 py-4">
        <div className="space-y-2">
          <Label htmlFor="confirm-name">
            Project Name: <span className="font-mono">my-project</span>
          </Label>
          <Input
            className="border-destructive focus-visible:ring-destructive"
            id="confirm-name"
            placeholder="Type project name"
          />
          <p className="text-xs text-destructive">
            Project name does not match
          </p>
        </div>
      </div>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction className="opacity-50" disabled>
          Transfer
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

export default Example;
```