Field

Forms 5

About

A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Field to your project and fits it to your theme.

Code

How Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Field,
  FieldContent,
  FieldError,
  FieldLabel,
} from "@/components/ui/interfaces-field"
import { Input } from "@/components/ui/input"

export default function DemoErrorState() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
      <div className="w-full max-w-md">
        <Field data-invalid="true">
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <FieldContent>
            <Input
              id="email"
              placeholder="Enter email"
              aria-invalid="true"
            />
            <FieldError>Invalid email address</FieldError>
          </FieldContent>
        </Field>
      </div>
    </div>
  )
}