Field - Prisma — ContextQMD

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

Usage

Basic Field

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

tsx

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

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

Live Example:

<div className="max-w-md my-4"> <Field> <FieldLabel htmlFor="email-basic">Email</FieldLabel> <Input id="email-basic" type="email" placeholder="Enter your email" /> </Field> </div>

Field with Description

Add helpful context with FieldDescription:

tsx

import { Field, FieldLabel, FieldDescription, Input } from "@prisma/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:

<div className="max-w-md my-4"> <Field> <FieldLabel htmlFor="username-desc">Username</FieldLabel> <Input id="username-desc" placeholder="Enter username" /> <FieldDescription>Choose a unique username for your account.</FieldDescription> </Field> </div>

Field with Error

Display validation errors with FieldError:

tsx

import { Field, FieldLabel, FieldDescription, FieldError, Input } from "@prisma/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:

<div className="max-w-md my-4"> <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> </div>

Field Group

Group multiple fields together with consistent spacing:

tsx

import { Field, FieldLabel, FieldDescription, FieldGroup, Input, Button } from "@prisma/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:

<div className="max-w-md my-4"> <FieldGroup> <Field> <FieldLabel htmlFor="name-group">Name</FieldLabel> <Input id="name-group" placeholder="Enter your name" /> </Field> <Field> <FieldLabel htmlFor="email-group-live">Email</FieldLabel> <Input id="email-group-live" 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> </div>

Horizontal Field

Use horizontal orientation for inline layouts:

tsx

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

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

Live Example:

<div className="max-w-md my-4"> <Field orientation="horizontal"> <FieldLabel htmlFor="search-horizontal">Search</FieldLabel> <Input id="search-horizontal" placeholder="Search..." /> </Field> </div>

Responsive Field

Use responsive orientation to adapt to screen size:

tsx

import { Field, FieldLabel, FieldDescription, Input } from "@prisma/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:

<div className="max-w-2xl my-4"> <FieldGroup> <Field orientation="responsive"> <FieldLabel htmlFor="company-resp">Company Name</FieldLabel> <Input id="company-resp" placeholder="Acme Inc." /> </Field> <Field orientation="responsive"> <FieldLabel htmlFor="website-resp">Website</FieldLabel> <Input id="website-resp" type="url" placeholder="https://example.com" /> </Field> </FieldGroup> </div>

Multiple Errors

Display multiple validation errors:

tsx

import { Field, FieldLabel, FieldError, Input } from "@prisma/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:

<div className="max-w-md my-4"> <Field> <FieldLabel htmlFor="password-multi">Password</FieldLabel> <Input id="password-multi" type="password" defaultValue="abc" aria-invalid="true" /> <FieldError errors={[ { message: "Password must be at least 8 characters" }, { message: "Password must contain a number" }, { message: "Password must contain a special character" } ]} /> </Field> </div>

Complete Form Example

A full form using all Field features:

tsx

import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, Input, Button } from "@prisma/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="[email protected]" 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:

  <Field>
    <FieldLabel htmlFor="email-complete-live">Email</FieldLabel>
    <Input id="email-complete-live" type="email" placeholder="[email protected]" required />
    <FieldDescription>We'll never share your email with anyone.</FieldDescription>
  </Field>
  
  <Field>
    <FieldLabel htmlFor="message-complete-live">Message</FieldLabel>
    <Input id="message-complete-live" placeholder="Your message..." />
    <FieldDescription>Tell us how we can help you.</FieldDescription>
  </Field>
  
  <div className="flex gap-2">
    <Button type="button" variant="default-weaker">Cancel</Button>
    <Button type="submit">Submit</Button>
  </div>
</FieldGroup>

</form> </div>

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:

tsx

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