i

Form field

Forms · researched

One question in a form: a label, the input, a hint and any error message, spaced together.

molecule · Carbon: FormItem · also called Form item, Form group, Form control, Labelled · contains form-label, helper-text, error-message

Carbon's FormItem is a bare wrapper; "Form field" says the job.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Form.Item native: partly antd 6.6.5
Variants
—
Sizes
—
States documented
error
Accessibility guidance
no

Div wrapping a native label, the control, an extra line (extra), help/validation text, and sets aria-describedby / aria-invalid on the child control. validateStatus: success, warning, error, validating.

docs ↗ · code ↗

Carbon

FormItem native: no @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

A plain div wrapper that spaces a control; it carries no label, helper or error logic. Each Carbon field renders its own label and messages from props, so this is a thin match for the canonical job. React only.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/form/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FormItem"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/form/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FormItem"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/form/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Form group (CSS object, undocumented) contested native: no govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
—
Accessibility guidance
unread

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No documented form-field component. Index mapped the Form group object (govuk-form-group, bottom spacing and error styling) as a part; it is an unpublished CSS object, and each input macro renders its own label, hint and error message inside it. Disagree with the index mapping as a standalone item.

6 corrected on re-read
  • present: "absent" → "ships" Undocumented but shipped: objects/_form-group.scss emits .govuk-form-group, wrapped by every input macro; shown in example HTML on 8 pages, never described
  • alias_kind: null → "contested" Spacing+error wrapper only; label/hint/error come from other macros. No page or macro of its own
  • name_in_system: null → "Form group (CSS object, undocumented)" Class govuk-form-group
  • builds_on_native: null → "no" Generic <div class="govuk-form-group"> wrapper
  • a11y_documented: null → "unread" No docs page exists for the form group
  • urls: {"docs_url":null,"code_url":null} → {"docs_url":null,"code_url":"https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src/govuk/objects"} No docs page; objects dir 200

· code ↗

Material Web

Filled field / Outlined field (<md-filled-field>, <md-outlined-field>) contested native: no @material/web 2.5.0
Variants
filled, outlined
Sizes
—
States documented
—
Accessibility guidance
no

Index missed it. Published, exported building block with label, slotted control, supporting text, error text (role=alert), counter, start/end slots; md-*-text-field and md-*-select compose it. No docs page of its own, so contested whether it counts as a component for authors.

· code ↗

Primer

FormControl native: no @primer/react 38.40.1
Variants
—
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Primer React. div wrapper associating FormControl.Label, Caption and Validation with a child input by id; renders no input itself. Status ready.

1 corrected on re-read
  • states_documented: null → ["disabled","error"] Props: disabled; examples With validation message (error, success)

docs ↗ · code ↗

Spectrum

absentSpectrum does not ship this component. Nothing is drawn in its place.

Checked the sitemap.xml component list, S2 exports, SWC 1st-gen/gen2 trees and spectrum-css components for a standalone label plus input plus hint plus error unit: none. In Spectrum each input (Text field, Number field, Radio group and so on) carries label, help text and error itself; S2's Field wrapper is internal. Parts exist separately as Field label and Help text. Index also lists none.

USWDS

Form group native: no @uswds/uswds 3.14.0
Variants
default, error (usa-form-group--error)
Sizes
—
States documented
default, error
Accessibility guidance
no

Agrees with index. Package has styles only (margin plus an error left border); no docs page of its own; use is shown in Text input and Validation examples.

1 corrected on re-read
  • builds_on_native: "yes" → "no" usa-form-group is a generic div wrapper

· code ↗

Platform facts

Native elementnot recordedNo single HTML element groups label, control, hint and error. The pieces are label (for or wrapping), the control, and aria-describedby (APG: additional descriptive static text is referenced with aria-describedby). Spec: the label's labeled control is found by for or by nesting.
Baseline—
APG patterncheckbox
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. label — HTML label element; spec: 'a caption in a user interface'.
  2. control — Any labelable form control: input, textarea, select, etc.
  3. help text optional — Plain term; APG Checkbox/Radio Group wording: descriptive text referenced with aria-describedby.
  4. error message optional — Plain term; no HTML element. MDN aria-invalid / aria-errormessage describe association.

The seven states

default Empty or holding a value.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Focus is on the control, not the wrapper.
active n/a — Not defined for the wrapper.
disabled disabled on the control.
error Constraint validation sets :invalid on the control; MDN aria-invalid marks it for assistive technology; message text is the author's.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 9 of 35 fields changed on the second read — open any “corrected” note to see what it said before.