i

Search

Entering · researched

A field for entering a search term, with a button or clear control, to find content.

molecule · contains text-input, button

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

Documented as a sub-component on the Input page: an input plus a button (enterButton), with a loading prop.

docs ↗ · code ↗

Carbon

Search native: yes @carbon/react 1.117.0
Variants
Default, Fluid
Sizes
small (sm), medium (md), large (lg)
States documented
default, focus, disabled
Accessibility guidance
yes

Renders input type=search plus a clear button inside a div role=search. Docs list states as enabled, focus, filled, disabled. Source also accepts size xs. Expandable and Fluid search are separate components.

2 corrected on re-read
  • variants: ["Default","Fluid","Expandable"] → ["Default","Fluid"] Prose: two styles, default and fluid; Expandable appears only as a live-demo story, not as a documented variant
  • urls: {"docs_url":"https://carbondesignsystem.com/components/search/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Search"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/search/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Search"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

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

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No search component or pattern. The only search found is the Design System site's own site search, which is not a published component.

Material Web

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

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Search is listed under unbuilt components in the roadmap. The only related feature is type="search" on the text field, which is a plain input type with no search-specific UI.

Primer

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

No public search component. Looked in the component index, Internal Components list (QuickSearch and Filter exist there but are marked as not available for external use) and src/ tree. Search appears only as a UI pattern ('Search' scenario) and as TextInput with a leading visual.

Spectrum

Search field native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, disabled, error
Accessibility guidance
yes

Docs, sizes and states from the React Spectrum (rsp) page and SearchField.json. Native check: S2 SearchField uses React Aria Input (input), and SWC 1st-gen sp-search renders a form with an input type=search. Accessibility section is the Button keyboard table reused verbatim, not specific to this component.

docs ↗ · code ↗

USWDS

Search native: yes @uswds/uswds 3.14.0
Variants
.usa-search--big, .usa-search--small
Sizes
.usa-search--big, .usa-search--small
States documented
default
Accessibility guidance
yes

Template is a form role=search with input type=search and a submit button.

docs ↗ · code ↗

Platform facts

Native elementinput type=search, within the search elementSpec: the Text and Search states share one section; the input is a one-line plain-text edit control, and Search may look like the platform search control. MDN type=search attributes: list, maxlength, minlength, pattern, placeholder, readonly, size, spellcheck (non-standard incremental, results). Container: the search element (spec: flow content, only global attributes) represents a part of a document containing controls for a search or filtering operation. MDN: some browsers show a clear (cross) icon and store previous searches. Re-verified: MDN <search> implicit role search; @mdn/browser-compat-data 8.1.4 html.elements.search: Chrome 118, Firefox 118, Safari 17, standard_track true. The 'No support in current engines' annotation embedded in the single-page HTML spec is stale and should not be used.
Baseline—
APG patternlandmarks
ARIA rolesearchbox
Shipped by4 of 7 systems

Anatomy

  1. label — MDN (Search form labels and accessibility): without a label screen reader users get no indication of what the input is; alternatives are the search landmark or aria-label on the input.
  2. search input — input type=search: a one-line text control; spec says the difference from text is primarily stylistic. Part name is plain.
  3. submit button optional — A button type=submit in the MDN examples; not required when search is done wholly in script (MDN <search> web-app example).
  4. search landmark optional — The search element (or role=search on a form) defines a search landmark; APG Landmarks lists a Search Landmark Example.
  5. results optional — MDN <search>: results are not part of the search element; they belong in the main content. Suggestions of 'quick search' may sit inside it.

The seven states

default Empty or holding a query.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Text entry focus; MDN says Chrome also clears the field on Escape.
active n/a — No distinct pressed state.
disabled disabled attribute; readonly also exists (MDN).
error MDN type=search Validation section: required, minlength/maxlength and pattern drive :invalid.
loading n/a — Not defined by HTML; pending results are an author concern.

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