Field

A flexible field component for building accessible forms with labels, descriptions, and error messages.

Usage

Basic Field

A Field provides structure for form inputs with proper spacing and layout:

import { Field, FieldLabel, Input } from "@prisma-docs/eclipse";

export function BasicField() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="Enter your email" />
    </Field>
  );
}

Live Example:

Field with Description

Add helpful context with FieldDescription:

import { Field, FieldLabel, FieldDescription, Input } from "@prisma-docs/eclipse";

export function FieldWithDescription() {
  return (
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <FieldDescription>Choose a unique username for your account.</FieldDescription>
      <Input id="username" placeholder="Enter username" />
    </Field>
  );
}

Live Example:

Field with Error

Display validation errors with FieldError:

import { Field, FieldLabel, FieldDescription, FieldError, Input } from "@prisma-docs/eclipse";

export function FieldWithError() {
  return (
    <Field>
      <FieldLabel htmlFor="email-error">Email</FieldLabel>
      <Input 
        id="email-error" 
        type="email" 
        defaultValue="invalid-email"
        aria-invalid="true"
      />
      <FieldDescription>We'll send updates to this address.</FieldDescription>
      <FieldError>Please enter a valid email address</FieldError>
    </Field>
  );
}

Live Example:

Field Group

Group multiple fields together with consistent spacing:

import { Field, FieldLabel, FieldDescription, FieldGroup, Input, Button } from "@prisma-docs/eclipse";

export function FieldGroupExample() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="name">Name</FieldLabel>
        <Input id="name" placeholder="Enter your name" />
      </Field>
      <Field>
        <FieldLabel htmlFor="email-group">Email</FieldLabel>
        <Input id="email-group" type="email" placeholder="Enter your email" />
        <FieldDescription>We'll send updates to this address.</FieldDescription>
      </Field>
      <div className="flex gap-2">
        <Button type="button" variant="default-weaker">Reset</Button>
        <Button type="submit">Submit</Button>
      </div>
    </FieldGroup>
  );
}

Live Example:

Horizontal Field

Use horizontal orientation for inline layouts:

import { Field, FieldLabel, Input } from "@prisma-docs/eclipse";

export function HorizontalField() {
  return (
    <Field orientation="horizontal">
      <FieldLabel htmlFor="search">Search</FieldLabel>
      <Input id="search" placeholder="Search..." />
    </Field>
  );
}

Live Example:

Responsive Field

Use responsive orientation to adapt to screen size:

import { Field, FieldLabel, FieldDescription, Input } from "@prisma-docs/eclipse";

export function ResponsiveField() {
  return (
    <FieldGroup>
      <Field orientation="responsive">
        <FieldLabel htmlFor="company">Company Name</FieldLabel>
        <Input id="company" placeholder="Acme Inc." />
      </Field>
      <Field orientation="responsive">
        <FieldLabel htmlFor="website">Website</FieldLabel>
        <Input id="website" type="url" placeholder="https://example.com" />
      </Field>
    </FieldGroup>
  );
}

Live Example:

Multiple Errors

Display multiple validation errors:

import { Field, FieldLabel, FieldError, Input } from "@prisma-docs/eclipse";

export function MultipleErrors() {
  const errors = [
    { message: "Password must be at least 8 characters" },
    { message: "Password must contain a number" },
    { message: "Password must contain a special character" }
  ];

  return (
    <Field>
      <FieldLabel htmlFor="password-multi">Password</FieldLabel>
      <Input 
        id="password-multi" 
        type="password" 
        defaultValue="abc"
        aria-invalid="true"
      />
      <FieldError errors={errors} />
    </Field>
  );
}

Live Example:

Complete Form Example

A full form using all Field features:

import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, Input, Button } from "@prisma-docs/eclipse";

export function CompleteForm() {
  return (
    <form>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="full-name">Full Name</FieldLabel>
          <Input id="full-name" placeholder="John Doe" required />
        </Field>
        
        <Field>
          <FieldLabel htmlFor="email-complete">Email</FieldLabel>
          <Input id="email-complete" type="email" placeholder="john@example.com" required />
          <FieldDescription>We'll never share your email with anyone.</FieldDescription>
        </Field>
        
        <Field>
          <FieldLabel htmlFor="message-complete">Message</FieldLabel>
          <FieldDescription>Tell us how we can help you.</FieldDescription>
          <Input id="message-complete" placeholder="Your message..." />
        </Field>
        
        <div className="flex gap-2">
          <Button type="button" variant="default-weaker">Cancel</Button>
          <Button type="submit">Submit</Button>
        </div>
      </FieldGroup>
    </form>
  );
}

Live Example:

Component Props

Field

orientation - Layout orientation ("vertical" | "horizontal" | "responsive", default: "vertical")
className - Additional CSS classes (string, optional)
children - Field content (ReactNode, required)
All standard div attributes

FieldLabel

htmlFor - ID of the associated input (string, required for accessibility)
className - Additional CSS classes (string, optional)
children - Label text (ReactNode, required)
All Label component props

FieldDescription

className - Additional CSS classes (string, optional)
children - Description text (ReactNode, required)
All standard paragraph attributes

FieldError

children - Error message (ReactNode, optional)
errors - Array of error objects with message property (Array, optional)
className - Additional CSS classes (string, optional)
All standard div attributes

FieldGroup

className - Additional CSS classes (string, optional)
children - Group of Field components (ReactNode, required)
All standard div attributes

Features

✅ Vertical, horizontal, and responsive layouts
✅ Integrated label, description, and error display
✅ Multiple error message support
✅ Accessible with proper ARIA attributes
✅ Consistent spacing and alignment
✅ Works with any form input component
✅ Disabled state support
✅ Container queries for responsive layouts
✅ Fully typed with TypeScript

Best Practices

Always use FieldLabel with a htmlFor attribute that matches the input's id
Use FieldDescription to provide helpful context, not just to repeat the label
Display FieldError only when there's an actual validation error
Use FieldGroup to organize related fields together
For complex forms, consider using form validation libraries like React Hook Form
Use horizontal orientation sparingly, mainly for search fields or simple inputs
Keep error messages clear, actionable, and specific
Use responsive orientation for forms that need to work well on all screen sizes

Common Use Cases

The Field component is perfect for:

Forms - Building accessible, well-structured forms
Login pages - Email and password fields with validation
Settings - Configuration forms with descriptions
Contact forms - Multi-field forms with error handling
Search interfaces - Horizontal search fields
Profile editing - User information forms
Checkout flows - Payment and shipping forms
Surveys - Multi-field questionnaires

Accessibility

The Field component follows accessibility best practices:

Uses semantic HTML with proper structure
Labels are properly associated with inputs via htmlFor and id
Descriptions provide additional context for screen readers
Errors are announced with role="alert"
Supports all ARIA attributes
Keyboard navigable
Proper focus management
Works with assistive technologies
Respects reduced motion preferences

Styling

The Field component uses a flexible layout system:

Vertical: Stacked layout with full-width inputs
Horizontal: Side-by-side label and input
Responsive: Stacked on mobile, horizontal on desktop
Spacing: Consistent gaps between elements
Error color: Uses text-destructive design token
Description color: Uses text-muted-foreground design token

Customize by passing className props:

<Field className="gap-4">
  <FieldLabel className="font-bold">Custom Label</FieldLabel>
  <Input />
</Field>

Field

Usage

Component Props

Features

Best Practices

Common Use Cases

Accessibility

Styling

On this page