Form Field

Overview

A compound component that generates a unique ID and automatically wires htmlFor, aria-invalid, and aria-describedby to its child control. Eliminates manual ID management for form fields.

Usage

import { FormField, Input } from "@leanicon/web-builder-library";

<FormField error={errors.email} required>
  <FormField.Label>Email address</FormField.Label>
  <FormField.Control>
    <Input type="email" placeholder="[email protected]" />
  </FormField.Control>
  <FormField.Description>We'll never share your email.</FormField.Description>
  <FormField.Error />
</FormField>;

With error

Notes

• FormField.Control uses React.cloneElement to inject id, aria-invalid, and aria-describedby into the direct child element.
• FormField.Description hides itself when error is set; FormField.Error shows itself only when error is set.
• FormField.Error renders the error prop as text if no children are provided.
• Dark mode is handled via semantic tokens.