Form Field

A composable form field that wires a Label, control, helper text, and error message together via React context. The useFormField hook provides the field ID and error state to any child component.

import { FormField, FormLabel, FormControl, FormDescription, FormMessage }from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add form-field

Usage

form-field-usage.tsx

import {
  FormField,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from "@aetherstack/patterns"
import { Input } from "@aetherstack/ui"

// Basic field
<FormField name="email" required>
  <FormLabel>Email address</FormLabel>
  <FormControl>
    <Input type="email" placeholder="you@example.com" />
  </FormControl>
  <FormDescription>We'll send a confirmation to this address.</FormDescription>
</FormField>

// Field with error
<FormField name="email" error="Invalid email address">
  <FormLabel>Email address</FormLabel>
  <FormControl>
    <Input type="email" />
  </FormControl>
  <FormMessage />
</FormField>

Props

Component	Prop	Type	Description
FormField	name	string	Used to generate stable IDs for label/input association.
FormField	id	string	Explicit ID override. Auto-generated from name if omitted.
FormField	error	string	Error message. When set, label turns red and FormMessage shows it.
FormField	required	boolean	Adds a red asterisk to the label.
FormLabel	—	LabelProps	Forwards all Label props. htmlFor is set automatically.
FormControl	children	ReactElement	Single child element that receives the id and aria-describedby.
FormDescription	—	HTMLParagraphElement props	Helper text below the control.
FormMessage	children	ReactNode	Shown when FormField has an error. Falls back to children.

Accessibility

→FormLabel sets htmlFor to the field ID automatically — no manual wiring needed.
→FormControl adds aria-describedby pointing to the description and/or error message.
→FormControl adds aria-invalid="true" when an error is present.
→FormMessage renders with role="alert" to announce errors to screen readers.
→Required fields show a visual asterisk (aria-hidden) — combine with required on the native input for full a11y.