Field

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

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>
  )
}