# Field Demo

> Example usage of Field.

A shadcn/ui block from the [@mizzle](https://mizzle.saddy.me/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/mizzle/field-demo).

- Page, with a live preview: https://shadcn.exchange/r/mizzle/field-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/mizzle/field-demo-light-39d15f490d753cc7.png
- Registry item: https://mizzle.saddy.me/r/field-demo.json
- Categories: forms
- Listed: 2026-10-17, source last changed 2026-10-17

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/mizzle/field-demo.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: `@mizzle/field`, `@mizzle/input`

## Notes from the registry

Docs: https://mizzle.saddy.me/docs/components/forms/field

## Files

### `registry/demos/forms/field-demo.tsx`

```tsx
"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/mizzle/forms/field"
import { Input } from "@/components/mizzle/forms/input"

export default function FieldDemo() {
  return (
    <Field
      validationMode="onBlur"
      validate={(value) =>
        typeof value === "string" && value.endsWith("@example.com")
          ? "Use your work address, not the example one."
          : null
      }
      className="w-[320px] max-w-full"
    >
      <FieldLabel>Work email</FieldLabel>
      <Input type="email" required placeholder="you@company.com" />
      <FieldDescription>We send the invite here.</FieldDescription>
      <FieldError />
    </Field>
  )
}
```