# Form with validation errors

> Form with validation errors

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-field-11).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-field-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-field-11-light-45971da0e7fe73b7.png
- Registry item: https://reui.io/r/new-york-v4/c-field-11.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-field-11.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: `button`, `field`, `input`, `input-group`

## Files

### `c-field-11.tsx`

```tsx
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-xs">
      <FieldGroup>
        <Field data-invalid>
          <FieldLabel htmlFor="val-email">
            Email <span className="text-destructive">*</span>
          </FieldLabel>
          <InputGroup>
            <InputGroupAddon>
              <IconPlaceholder
                lucide="MailIcon"
                tabler="IconMail"
                hugeicons="MailIcon"
                phosphor="EnvelopeIcon"
                remixicon="RiMailLine"
                aria-hidden="true"
              />
            </InputGroupAddon>
            <InputGroupInput
              id="val-email"
              type="email"
              defaultValue="invalid-email"
              placeholder="you@example.com"
            />
          </InputGroup>
          <FieldError>Please enter a valid email address.</FieldError>
        </Field>
        <Field data-invalid>
          <FieldLabel htmlFor="val-password">
            Password <span className="text-destructive">*</span>
          </FieldLabel>
          <InputGroup>
            <InputGroupAddon>
              <IconPlaceholder
                lucide="LockIcon"
                tabler="IconLock"
                hugeicons="SquareLock01Icon"
                phosphor="LockSimpleIcon"
                remixicon="RiLockLine"
                aria-hidden="true"
              />
            </InputGroupAddon>
            <InputGroupInput
              id="val-password"
              type="password"
              defaultValue="short"
              placeholder="Enter password"
            />
          </InputGroup>
          <FieldError
            errors={[
              { message: "Must be at least 8 characters." },
              { message: "Must contain at least one number." },
            ]}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="val-confirm">Confirm Password</FieldLabel>
          <InputGroup>
            <InputGroupAddon>
              <IconPlaceholder
                lucide="LockIcon"
                tabler="IconLock"
                hugeicons="SquareLock01Icon"
                phosphor="LockSimpleIcon"
                remixicon="RiLockLine"
                aria-hidden="true"
              />
            </InputGroupAddon>
            <InputGroupInput
              id="val-confirm"
              type="password"
              placeholder="Repeat password"
            />
          </InputGroup>
          <FieldDescription>
            Re-enter your password to confirm.
          </FieldDescription>
        </Field>
        <Button className="w-full">Create Account</Button>
      </FieldGroup>
    </div>
  )
}
```