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.

Props

Prop Type Default Description
children ReactNode - The form control element (required)
label string - Label text for the field
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
testID string - Test ID for testing

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

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

Error State

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

Disabled State

Accessibility

  • 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

  • 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