i

Form label

Forms · researched

Text that names a form field.

atom · also called Label

"Label" alone clashes with Primer Label and Polaris Chip (small status markers); "Form label" is unambiguous.

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 label prop subset native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Index said not shipped. There is no standalone label component, but Form.Item renders a native label element from its label prop (with colon, required mark, tooltip, htmlFor). Subset of Form.Item.

docs ↗ · code ↗

Carbon

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

Renders a label element via the internal Text helper with htmlFor. Storybook page in the repo, usage covered in Form docs. 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/FormLabel"} → {"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/FormLabel"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/form/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Label native: yes govuk-frontend 6.5.1
Variants
bold, as page heading
Sizes
xl, l, m, s
States documented
—
Accessibility guidance
unread

Renders a native label element. Has no page of its own on the design system site (the page URL returns 404); documented within each input component's page. Variants are from template fixtures, not docs prose.

2 corrected on re-read
  • variants: ["styled-as-xl-text","styled-as-large-text","styled-as-medium-text","styled-as-small-text","as page heading (xl, l, m, s)"] → ["bold","as page heading"] fixtures.json: "with bold text" and "as page heading" (h1 wrapper)
  • sizes: null → ["xl","l","m","s"] Classes govuk-label--xl/l/m/s in fixtures.json (docs silent; no Label page, 404)

· 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: labels are the label property of the fields (text-field.md Labels section).

Primer

FormControl.Label subset native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Disagrees with index (said not shipped). Primer React: FormControl.Label is a subcomponent of FormControl (renders a label for the child input); no standalone Label-for-input component (the Label component is a status pill, not this).

1 corrected on re-read
  • a11y_documented: "no" → "yes" Shared FormControl accessibility page covers the label

docs ↗ · code ↗

Spectrum

Field label native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
small, medium, large, extra-large
States documented
default, hover, active, focus, disabled
Accessibility guidance
no

Docs from the rsp page; SWC 1st-gen sp-field-label renders a native label element (with required asterisk icon), and spectrum-css fieldlabel 10.2.0 uses label. S2 has an internal Field wrapper (not public) and v3 has Label. Installed SWC 1.12.4 has field-label. The accessibility fragment is the generic Button keyboard table.

2 corrected on re-read
  • sizes: null → ["small","medium","large","extra-large"] Page: Field labels come in four sizes: small, medium, large, 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

Label native: yes @uswds/uswds 3.14.0
Variants
error (usa-label--error), required (usa-label--required)
Sizes
—
States documented
default, error
Accessibility guidance
no

Agrees with index. Style package for the native label; no component page of its own; labels appear in every form-control example (e.g. Text input).

2 corrected on re-read
  • variants: [] → ["error (usa-label--error)","required (usa-label--required)"] scss defines .usa-label--error and .usa-label--required (docs silent)
  • states_documented: ["default"] → ["default","error"] scss/usa-input.twig show label error modifier

· code ↗

Platform facts

Native elementlabelSpec content model: phrasing content, no descendant labelable elements unless it is the labeled control; attribute for. MDN: multiple labels may name one control; the for value is an id of a labelable element. Clicking a label activates its control is browser behaviour not verified here.
Baseline—
APG patternnone
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. label text — Spec label: 'a caption in a user interface'.
  2. labeled control — Spec: found via the for attribute or by nesting the control in the label.

The seven states

default Static text.
hover n/a — Not interactive on its own.
focus n/a — Not focusable; its control is.
active n/a — Not interactive.
disabled n/a — Not defined.
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. 8 of 35 fields changed on the second read — open any “corrected” note to see what it said before.