i

Form

Forms · researched

A container that groups fields and submit actions so a person can enter and send information.

organism · contains form-field, fieldset, button, button-group

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 native: yes antd 6.6.5
Variants
outlined, borderless, filled, underlined
Sizes
small, medium, large
States documented
disabled
Accessibility guidance
no

Renders a native form element (via @rc-component/form). Layouts horizontal, vertical, inline; variants apply to contained controls.

2 corrected on re-read
  • sizes: null → ["small","medium","large"] Form API row: size small|medium|large (antd components only)
  • states_documented: null → ["disabled"] Form API row: disabled, "Set form component disable"

docs ↗ · code ↗

Carbon

Form native: yes @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
default, active, focus, error, disabled, loading
Accessibility guidance
yes

Renders a native form element. FluidForm (fluid style) is a separate export that the index correctly placed as an instance.

2 corrected on re-read
  • states_documented: ["disabled","error"] → ["default","active","focus","error","disabled","loading"] Form page States table lists Enabled, Active, Focus, Error, Warning, Disabled, Skeleton
  • urls: {"docs_url":"https://carbondesignsystem.com/components/form/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Form"} → {"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/Form"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/form/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

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

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 Form component; the Question pages pattern (/patterns/question-pages/) describes a page layout wrapping fields and a button, but there is no form wrapper component or macro.

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. Only form-associated behaviour mixins in labs/behaviors (form-associated.ts, form-submitter.ts); controls are form-associated, but there is no form component.

Primer

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

Index mapped the Forms UI pattern (low confidence); that is guidelines, not a component. No Form component in docs index or src tree (FormControl is a single field, see form-field). Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Form native: yes
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L, XL
States documented
—
Accessibility guidance
no

Implementations: S2 Form wraps React Aria Form, whose DOMRenderProps type is 'form', so it renders a native form element; v3 Form and spectrum-css form 1.2.0 (template uses a form element) also exist. No spectrum.adobe.com page and no SWC element; the S2 MDX has no accessibility section. Not in installed SWC 1.12.4.

docs ↗ · code ↗

USWDS

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

Agrees with index. Page is guidance plus form settings (no component preview of its own); source has only styles and a stories file. Large variant read from packages/usa-form styles; page has Accessibility guidance.

docs ↗ · code ↗

Platform facts

Native elementformSpec content model: flow content, no form element descendants; attributes include accept-charset, action, autocomplete, enctype, method, name, novalidate, target. MDN: implicit ARIA role is form (APG Landmarks page lists a Form Landmark Example and names eight landmark roles; the sources read here do not state in what conditions a form becomes a landmark).
Baseline—
APG patternlandmarks
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. form element — HTML form: 'a hyperlink that can be manipulated through a collection of form-associated elements' (spec wording, sic).
  2. form controls — Spec/MDN: form-associated elements inside, whose values are submitted.
  3. submit control optional — MDN form: a button or input of type submit sends the form; a form can also be submitted by other means. Not required by the spec.

The seven states

default Container of fields.
hover n/a — Not interactive.
focus n/a — The form element is not focusable; its controls are.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error MDN form: novalidate switches validation off on submit; otherwise constraint validation blocks submission and reports invalid controls.
loading Inference, no source: submitting state is an application concern; HTML defines no loading state for form.

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