Form Field Group

A wrapper molecule that pairs any input atom with a label, help text, and error message. Ensures consistent spacing, accessibility linking, and validation display across all form fields.

Preview — Required Field with Help Text

Location Description

Describe the location as precisely as possible.

Preview — Field with Error

Reporter Name

Reporter name is required.

Variants

Required Field

Optional Field (optional)

With Help Text

This help text provides additional context.

With Error

This field has a validation error.

With Textarea

Use the textarea atom inside the group.

Accessibility

Label uses for attribute linking to the input's id.
Error messages use role="alert" for screen reader announcement.
Required indicator (*) is aria-hidden — the input itself carries aria-required.
Help text and error are linked via aria-describedby on the wrapped input.

Trauma-Informed Design

Error messages are descriptive and non-blaming: "Reporter name is required" not "You forgot the name."
Help text provides context for field reporters who may be unfamiliar with the form.
Optional labels reduce pressure — users know they can skip non-essential fields.
Consistent layout across all fields reduces cognitive load during stressful data entry.