i

Text input

Entering · researched

A single-line field for typing short free-form text.

atom · also called Text field, Input, Text area, Textarea

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

Input superset native: yes antd 6.6.5

instance Text area · multi-line

Variants
outlined, filled, borderless, underlined
Sizes
large, medium, small
States documented
default, disabled, error
Accessibility guidance
no

Input.TextArea, Input.Search, Input.Password and Input.OTP are on the same page. Status values are error and warning.

1 corrected on re-read
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Text input native: yes @carbon/react 1.117.0

instance Text area · multi-line

Variants
Text input, Text area
Sizes
small (32px), medium (40px), large (48px)
States documented
default, active, focus, error, disabled
Accessibility guidance
yes

Source renders native input. Docs state also include warning, skeleton, read-only; password input is a further variant.

2 corrected on re-read
  • variants: ["Default","Fluid","Text area"] → ["Text input","Text area"] usage.mdx Variants table has only Text input and Text area; Fluid is a separate component (FluidTextInput)
  • sizes: ["extra small (24px)","small (32px)","medium (40px)","large (48px)"] → ["small (32px)","medium (40px)","large (48px)"] Docs: 'three text input height sizes: small, medium, and large'; source union also has xs

docs ↗ · code ↗

GOV.UK

Text input native: yes govuk-frontend 6.5.1

instance Text area · multi-line

Variants
—
Sizes
govuk-input--width-2, govuk-input--width-3, govuk-input--width-4, govuk-input--width-5, govuk-input--width-10, govuk-input--width-20, govuk-!-width-full, govuk-!-width-three-quarters, govuk-!-width-two-thirds, govuk-!-width-one-half, govuk-!-width-one-third, govuk-!-width-one-quarter
States documented
default, error, disabled
Accessibility guidance
no

Textarea, Password input and Character count are separate component pages. Width is set with govuk-input--width-* classes.

1 corrected on re-read
  • sizes: null → ["govuk-input--width-2","govuk-input--width-3","govuk-input--width-4","govuk-input--width-5","govuk-input--width-10","govuk-input--width-20","govuk-!-width-full","govuk-!-width-three-quarters","govuk-!-width-two-thirds","govuk-!-width-one-half","govuk-!-width-one-third","govuk-!-width-one-quarter"] 'Use appropriately-sized text inputs' documents fixed width and fluid width override classes; prior null missed this

docs ↗ · code ↗

Material Web

Text field native: yes @material/web 2.5.0

instance Text area · multi-line

Variants
Filled text field, Outlined text field
Sizes
—
States documented
default, focus, disabled, error
Accessibility guidance
yes

Wraps an internal <input>/<textarea> (type=textarea supported). The page has no Accessibility section but notes labels need aria-label and aria-labelledby is unsupported.

1 corrected on re-read
  • a11y_documented: "no" → "yes" docs page has "## Accessibility" section advising aria-label on fields with external labels

docs ↗ · code ↗

Primer

TextInput native: yes @primer/react 38.40.1

instance Text area · multi-line

Variants
—
Sizes
small, medium, large
States documented
error, disabled, loading
Accessibility guidance
yes

Also ships Textarea and TextInputWithTokens as separate components. Disabled state not stated on page summary; inferred only via standard input attrs, so treat as weak.

2 corrected on re-read
  • builds_on_native: "unread" → "yes" TextInput renders UnstyledTextInput, which returns a plain <input> element
  • a11y_documented: "unread" → "yes" Read /accessibility/: Built-in accessibility features, Implementation requirements, How to test

docs ↗ · code ↗

Spectrum

Text field native: yes @spectrum-web-components/button 1.12.4

instance Text area · multi-line

Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, disabled, error
Accessibility guidance
yes

Sizes from the TextField data file; labelPosition (top, side) is a separate option. SWC 1st-gen renders <input> or <textarea>.

docs ↗ · code ↗

USWDS

Text input native: yes @uswds/uswds 3.14.0

instance Text area · multi-line

Variants
error, success
Sizes
2xs, xs, sm, md, lg, xl, 2xl
States documented
default, error, disabled
Accessibility guidance
yes

Sizes are widths. Textarea is a separate package (usa-textarea).

docs ↗ · code ↗

Platform facts

Native elementinput type=text (and textarea for multi-line)Per the spec text state, these input attributes apply: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, size. Constraint validation drives :valid/:invalid. MDN: the placeholder is not a label and should not substitute for one.
Baseline—
APG patternnone
ARIA roletextbox
Shipped by7 of 7 systems

Anatomy

  1. label — label element; MDN warns placeholder is no substitute. No APG pattern, so plain term.
  2. input — The editable single-line control.
  3. placeholder optional — Hint text, disappears on typing.
  4. help/description text optional — Linked by aria-describedby; plain term, not named by HTML.
  5. error message optional — Plain term; HTML exposes validity via constraint validation, not a named part.

The seven states

default Empty or holding its value.
hover Pointer-only CSS state.
focus Receives text entry; browser draws a focus ring.
active n/a — No distinct pressed state; focus covers editing.
disabled disabled makes it non-interactive and not submitted; readonly stays submitted.
error Constraint validation exposes :invalid; message text is the author's.
loading n/a — Not defined by HTML; async validation or lookup is an author addition.

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