Docs Components
FormFieldexperimental
The wrapper that gives every control a proper visible label, optional help text, and an error message that screen readers announce. A field with a problem never relies on color alone.
Anatomy
label— Visible label, for/id bound. Required marker is aria-hidden — aria-required carries the semantics.control— The single wrapped control; receives id, aria-describedby, aria-invalid, aria-required.help— Muted caption; hidden while an error is present.error— Danger-text caption with role=alert — announced on appearance, next to the field, never color alone.
API
| Prop | Type | Description |
|---|---|---|
label required | string | Visible label text. Placeholder-only fields are banned. |
required | boolean | Renders the marker and sets aria-required. |
help | string | Persistent guidance below the control. |
error | string | Validation message; replaces help and flips the control to invalid. |
children required | ReactElement | Exactly one form control. |
Guidelines
- mustEvery input in the product is wrapped in FormField (or otherwise carries a visible, associated label).
- mustError messages state what is wrong and how to fix it, adjacent to the field.
- must-notDo not use placeholder text as the only label.