Z

FormField

Primary workhorse for forms - combines label, input, helper text, and error messages into a cohesive field component.

Narrative Section Stable

Basic Usage

FormField wraps any input Building Block with a label, optional helper text, and error handling.

Enter your first and last name

We'll only use this for urgent alerts

Error States

FormField displays trauma-informed error messages with clear visual indicators.

Success States

Show positive feedback when validation passes.

This email is available

Inline Layout

Use inline layout for toggles and switches in settings.

Receive alerts about Zika risk in your area

Get instant alerts on your device

Different Input Types

FormField works with all Building Block input components.

Share any concerns or questions you have

Select your current risk level

Props

Prop Type Default Description
label string required Field label text
for string required ID of the input element
required boolean false Show required indicator (*)
optional boolean false Show optional indicator
help string null Helper text (calm guidance)
error string null Error message text
state string 'default' default, error, success, disabled
layout string 'stacked' stacked, inline (for toggles)
class string '' Additional CSS classes

Accessibility & Trauma-Informed Design

WCAG 2.1 AA Compliance

  • Proper label-input association using for attribute
  • Helper text linked via aria-describedby
  • Error messages use role="alert" and aria-live="polite"
  • Required fields marked with asterisk and aria-label
  • Error icon provides visual redundancy (not color alone)

Trauma-Informed Principles

  • Error messages explain what's needed, not what's wrong
  • Helper text provides calm, supportive guidance
  • Optional fields clearly marked to reduce pressure
  • Success states provide positive reinforcement
  • Clear visual hierarchy reduces cognitive load

Best Practices

  • Always provide a label - never use placeholder as label
  • Use helper text to explain why information is needed
  • Keep error messages specific and actionable
  • Use inline layout for settings-style toggles
  • Ensure input IDs match the for attribute

Code Example

<x-narrative-sections.form-field
    label="Email Address"
    for="email"
    required
    help="We'll use this to send you important alerts"
    error=""
    state="default"
>
    <x-building-blocks.input-email
        name="email"
        id="email"
        value=""
        state="default"
    />
</x-narrative-sections.form-field>