Atom

FormField

A wrapper component for form controls that provides consistent labeling, helper text, and error handling across different input types.

Overview

The FormField component wraps form controls like Input, Select, and Textarea to provide consistent labeling, helper text, and error display. It ensures accessibility by properly associating labels with their inputs.

We'll never share your email
Password must be at least 8 characters

Props

Prop Type Default Description
children ReactNode - The form control element (required)
label string - Label text for the field
htmlFor string - ID of the input element for label association
helperText string - Helper text below the field
error string - Error message (replaces helper text)
required boolean false Shows required indicator (*) on label
disabled boolean false Applies disabled styling to label
orientation 'vertical' | 'horizontal' 'vertical' Layout orientation

Variants

Orientation

FormField supports both vertical (default) and horizontal layouts.

 
<FormField label="Vertical (Default)">
  <Input placeholder="Label above input" />
</FormField>

<FormField label="Horizontal" orientation="horizontal">
  <Input placeholder="Label beside input" />
</FormField>

Examples

Required Field

 
<FormField label="Full Name" required>
  <Input placeholder="Enter your name" />
</FormField>

With Helper Text

Username must be 3-20 characters
 
<FormField
  label="Username"
  helperText="Username must be 3-20 characters"
>
  <Input placeholder="Choose a username" />
</FormField>

Error State

Please enter a valid email address
 
<FormField
  label="Email"
  error="Please enter a valid email address"
>
  <Input type="email" placeholder="Enter email" />
</FormField>

Disabled State

Accessibility

  • Label Association: Labels are properly associated with inputs via the htmlFor attribute.
  • Required Indicator: Required fields show a visual asterisk that screen readers can announce.
  • Error Announcement: Error messages are visually distinct and can be announced by screen readers.
  • WCAG Compliance: Meets AA standards for form labeling and error identification.

Best Practices

  • Always provide a htmlFor that matches the input's id
  • Use clear, concise labels that describe the expected input
  • Provide helpful error messages that explain how to fix the issue
  • Don't nest FormField components inside each other