Design system Inputs

Search

One search component for filtering a page or opening a matching result — including the query, clear control, result list, and match highlighting.

.mk-search.mk-search-clear.mk-search-results-wrap.mk-optlist

Overview

Search is one input with two jobs. It may filter the collection already on the page, or open matching results when the agent needs to find and open one. The magnifier, query, clear control, match highlighting, and result list remain one component in both modes. Search never selects a value into its field.

Usage

Filter content already on the pagePage filter narrows the current collection as the query changes and does not need an attached results panel.
Find and open a destinationSuggestion search opens matching results beneath the field; choosing one navigates to that result rather than storing it as a field value.
State the searchable scopeThe label or placeholder identifies what can be found. Matching query text is highlighted within results, and No match remains attached to the complete field.

Anatomy

1 2 3

4 5

1Magnifier. The registry search icon names the field before any text is entered. It is decorative and never pressed.
2Query area. The placeholder states the scope; the typed query replaces it and drives filtering.
3Clear control. The neutral registry close icon removes the complete query and restores the unfiltered set.
4Result panel. Optional. It opens directly below the field and contains the narrowed result set.
5Result. A pressable destination with a title, optional supporting line, and optional photo. The matching query fragment is highlighted; no row is selected into the field.

States

State	Specimen	What changes
Rest		The empty field and its available results establish one attached search surface before a query is entered.
Query entered		The list narrows under the same field and the matching text fragment receives a restrained warm background.
Result hover		A quiet row wash previews the destination. It is an action affordance, not a selected value.
Keyboard focus		The standard outline follows the complete destination target while the query highlight remains inside its title.
No match	Nothing matches “Typed query”.	The answer remains inside the panel attached to its query. A detached empty box never substitutes for the result list.

Do and don't

Use the registry close icon in neutral ink, inside the search face.

Don't

A bare input has neither the search affordance nor the component's clear behaviour.

Copy

The placeholder names the scopeUse “Search” when only one collection exists; otherwise name what can be found.
Supporting lines distinguishAdd one short fact only when neighbouring results cannot be told apart by title.
No-match names the queryRepeat it verbatim so the agent can see what to loosen.

Accessibility

Filtering uses a search inputtype="search" exposes the field's purpose and the appropriate software keyboard.
Results remain destinationsThe input names its result list with aria-controls; each matching row keeps its own native link or button semantics and never exposes aria-selected.
Results are announcedA polite live region reports the narrowed count or no-match answer.
Clear has an accessible nameThe icon is hidden from assistive technology; the button announces “Clear search”.

When to reach for something else

A short fixed setUse Dropdown or a visible selector; typing adds ceremony.
Plain text entryUse Text input; search finds, it does not store prose.

Markup

<div class="mk-search-results-wrap">
  <div class="mk-search">
    <svg class="glyph" data-mk-icon="search" aria-hidden="true"></svg>
    <input class="mk-input" type="search" aria-controls="search-results">
    <button class="mk-search-clear" type="button" aria-label="Clear search">
      <svg data-mk-icon="close" aria-hidden="true"></svg>
    </button>
  </div>
  <ul class="mk-optlist" id="search-results" aria-label="Search results">
    <li><a class="mk-opt" href="…">…matching result…</a></li>
  </ul>
</div>