i

Input group

Entering · researched

An input joined to adjacent text or controls (prefix, suffix, button) as one compact row.

molecule · contains text-input

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

Space.Compact (Input.Group is deprecated) native: partly antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
—
Accessibility guidance
no

Space.Compact joins inputs, selects, buttons into one row; Space.Addon (since 5.29) supplies a text cell. Input.Group is deprecated in source (warns to use Space.Compact).

1 corrected on re-read
  • builds_on_native: "no" → "partly" Space.Compact div wraps native input; Space.Addon div.ant-space-addon; Input.Group warns deprecated

docs ↗ · code ↗

Carbon

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

Checked docs components list and source; no component joining an input with prefix, suffix or button. Closest are ComboButton and the number input steppers, which are different jobs.

GOV.UK

Text input (prefix and suffix options) subset native: yes govuk-frontend 6.5.1
Variants
prefix, suffix, prefix and suffix
Sizes
width-2, width-3, width-4, width-5, width-10, width-20, width-30
States documented
default, error
Accessibility guidance
no

Not a separate component: Input accepts prefix and suffix (and formGroup.beforeInput/afterInput) which wrap the native input and the added text in a flex row. Index had no entry for this; the Password input also joins a button to an input. No prefix/suffix button variant documented.

3 corrected on re-read
  • variants: null → ["prefix","suffix","prefix and suffix"] fixtures.json; docs heading "Prefixes and suffixes". Text only; password-input separately joins input and button
  • sizes: null → ["width-2","width-3","width-4","width-5","width-10","width-20","width-30"] govuk-input--width-* classes; docs "Use appropriately-sized text inputs"
  • states_documented: null → ["default","error"] fixture "with prefix and suffix and error"

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: text field takes prefix-text, suffix-text and leading/trailing-icon slots (text-field.md), and nothing joins separate controls.

Primer

TextInput subset native: yes @primer/react 38.40.1
Variants
—
Sizes
small, medium, large
States documented
error, disabled, loading
Accessibility guidance
yes

Disagrees with index (said not shipped). Primer React: TextInput takes leadingVisual, trailingVisual and a TextInput.Action (button) inside one bordered wrapper around a native input; there is no separate input-group component.

docs ↗ · code ↗

Spectrum

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

Checked the sitemap.xml component list, S2 exports, SWC trees and spectrum-css components for a joined input plus addon: none. SWC 1st-gen has In-field button (sp-infield-button, a part placed in a field; installed at 1.12.4) and S2 NumberField includes steppers, but there is no group wrapper. Index also lists none.

USWDS

Input prefix/suffix native: yes @uswds/uswds 3.14.0
Variants
error (usa-input-group--error), success (usa-input-group--success), width (usa-input-group--[width])
Sizes
2xs, xs, sm, md, lg, xl, 2xl
States documented
default, error
Accessibility guidance
yes

Agrees with index. Prefix or suffix element attached to a native text input; page shows an error example.

2 corrected on re-read
  • variants: ["prefix","suffix"] → ["error (usa-input-group--error)","success (usa-input-group--success)","width (usa-input-group--[width])"] variants table lists --error, --success, --[width]; prefix/suffix are parts
  • sizes: [] → ["2xs","xs","sm","md","lg","xl","2xl"] --[width] accepts 2xs, xs, sm/small, md/medium, lg, xl, 2xl

docs ↗ · code ↗

Platform facts

Native elementnot recordedNo source defines an input group. Prefix, suffix and joined button are standard text, label and button elements; APG Toolbar applies only if arrow-key navigation between controls is desired (not stated).
Baseline—
APG patternnone
ARIA role—
Shipped by4 of 7 systems

Anatomy

    The seven states

    default Joined row.
    hover Pointer-only CSS state; not defined by APG or HTML.
    focus Focus on the input or button.
    active n/a — Not interactive.
    disabled Disabled per control.
    error Validity belongs to the input.
    loading n/a — Not defined by APG or HTML.

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