i

Error message

Forms · researched

Text beside a field saying what is wrong with the entry and how to fix it.

atom · also called Inline error, Validation message

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 validation text (Form.ErrorList for Form.List) subset native: no antd 6.6.5
Variants
—
Sizes
—
States documented
error
Accessibility guidance
no

Index mapped Form.ErrorList; docs say it only works with Form.List rules. Ordinary per-field error text is produced by Form.Item (from rules or the help prop, linked via aria-describedby), not a standalone component.

1 corrected on re-read
  • alias_kind: "contested" → "subset" decided independently from definition vs markup

docs ↗ · code ↗

Carbon

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

Checked docs components list, repo component directory (react and web-components) and form docs. No standalone component: each field renders its own message from invalidText/warnText props inside a div with the form-requirement class (e.g. CheckboxGroup, Dropdown source).

GOV.UK

Error message native: yes govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
error
Accessibility guidance
no

Renders a p with a visually hidden 'Error:' prefix, referenced from the field by aria-describedby.

docs ↗ · code ↗

Material Web

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

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. Not a component: md-*-text-field and md-*-select take an error-text property that replaces supporting text (the field renders it with role=alert).

Primer

FormControl.Validation subset native: no @primer/react 38.40.1
Variants
error, success
Sizes
—
States documented
error
Accessibility guidance
yes

Disagrees with index (said not shipped). Primer React: FormControl.Validation renders error or success text tied to the input (variant error/success); also TextInput validationStatus. Only a part of FormControl, not standalone.

1 corrected on re-read
  • a11y_documented: "no" → "yes" Same FormControl accessibility page covers validation messages, aria-invalid, aria-describedby

docs ↗ · code ↗

Spectrum

Help text (negative / error) subset native: no @spectrum-web-components/button 1.12.4
Variants
neutral, negative
Sizes
small, medium, large, extra-large
States documented
default, disabled, error
Accessibility guidance
no

Index disagreement: it said not shipped. The rsp Help text page documents an Error state, SWC 1st-gen sp-help-text has variant negative (installed at 1.12.4) and S2/v3 fields take an errorMessage prop. It is a mode of Help text, not its own component.

2 corrected on re-read
  • sizes: null → ["small","medium","large","extra-large"] Page: Help text comes in four sizes: small, medium, large, and extra-large
  • a11y_documented: "yes" → "no" rsp accessibility fragment is the Button keyboard table (identical to rsp button fragment), not about this component

docs ↗ · code ↗

USWDS

Error message native: no @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
error
Accessibility guidance
no

Agrees with index. Package is a style class only (bold error-dark text); no component page of its own. Use is demonstrated under Validation and Text input; Form page has accessibility guidance on messages.

1 corrected on re-read
  • builds_on_native: "yes" → "no" span.usa-error-message with role=alert

· code ↗

Platform facts

Native elementoutput (spec example only; no element is defined for field error text) plus the constraint validation API (setCustomValidity / validationMessage) for the browser-shown messageNo HTML element is defined for a field error message. Adjacent native pieces: (a) the output element ('the result of a calculation performed by the application, or the result of a user action'; MDN: many browsers implement it as an aria-live region); the HTML Living Standard popover section includes an example that sets successMessage or errorMessage as text of a popover span inside an output element. (b) Constraint validation: an element can have a custom validity error message (setCustomValidity), exposed as validationMessage, which the user agent may show on reportValidity(); the :user-invalid pseudo-class exists. ARIA: aria-invalid=true plus aria-errormessage pointing at the visible message (MDN: the referenced element should often be a live region); association also by aria-describedby. APG Alert is the pattern for a brief important message that does not interrupt; no source says an inline field error must use it.
Baseline—
APG patternspinbutton
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. message text — MDN aria-errormessage: the element(s) that provide the error message; it 'should describe what is wrong and inform the user what is required to make the object valid'.
  2. invalid control — MDN: aria-invalid=true marks the object in error, and aria-errormessage on it references the message element. The message element must be visible when relevant.

The seven states

default Shown when the entry is invalid.
hover n/a — Not interactive.
focus n/a — Text is not focusable.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

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