A combobox is for choosing one known option from a list, often with typeahead. Search is for finding rows when the person only knows a fragment. Gmail's inbox search is search. Picking a country from 200 options is a combobox.

Should results update on every keystroke?

Yes for local lists under a few hundred rows. For server search, wait until the person pauses typing or presses Enter, and show a loading state while the request runs. Updating on every key for a slow API feels broken.

Where does the search icon go?

On the leading edge in left-to-right layouts, inside the field border. It is decorative. The label or placeholder carries the accessible name.

What about a clear button?

Add one when the field often holds a long query someone will want to wipe in one click. Keep it inside the field on the trailing edge, with an accessible name like Clear search.

Does type="search" change behaviour?

Browsers may add a clear control on some platforms and treat Enter differently. The visual design is yours either way. Use the type when the field's only job is search.

How do I show no results?

Replace the list with a short message inside the same region. Say what was searched and offer one next step, like clearing the query or checking spelling.

Search

A search field lets someone type to find rows in a set they do not have memorised. The query narrows what is already on screen or what the server returns.

Forms and inputBuild difficulty: Medium<input type="search">

Also called Search box, Search input, Filter field.

Search invoices

5 results

Acme Corpinv-1042£1,240
Northwindinv-1038£890
Globexinv-1031£2,100
Acme Corpinv-1024£450
Initechinv-1019£3,200

Type a customer name or invoice number. The list filters on every keystroke. Clear the field to bring every row back.

For designers

Search is how people reach for something when they remember a piece of it, not the whole name. Stripe's dashboard search, Notion's page finder and any table with a filter box all share the same contract: type, see fewer rows, pick one or keep refining.

The cost is attention on every keystroke. If the list is twelve items, a select shows them all in one click. If the list is twelve hundred invoices and someone knows the customer name starts with Nor, search earns its place.

Place the field where the results live. A search box above the list it filters teaches the relationship in one glance. A search icon in the header that jumps to a separate results page is a different pattern, closer to a command palette than to inline search.

Use search when

Someone knows part of a name, number or keyword and wants matching rows
The list is long enough that scanning every row costs time
Results can update on every keystroke without confusing the person typing

Reach for something else when

The person is picking one value from a short list they already know by name. Use a combobox instead.
The goal is to narrow a table by several independent criteria at once. Use filters instead.
There are only three or four fixed options and they all fit on screen. Use a select instead.
The field is only for jumping to a command or page by name. Use a command palette instead.

Variants

With scope

All

Compact in a toolbar

A narrow field for filtering a table already on screen.

The same search field with a scope chip and a compact width. Scope changes what the query runs against in a real app.

Scoped. A chip or dropdown beside the field limits which columns or record types the query runs against. Use it when one search box serves more than one kind of result.

Compact. A narrow field in a toolbar that filters a table already visible. The results are the table rows themselves, not a separate panel.

With live count. A result count under the field confirms the filter worked. Pair it with aria-live so screen reader users hear when the count changes.

How to build a search

Start with a text input and a label. Add type="search" when the browser's search affordances help. Wrap a decorative magnifier in a group with the input so the icon does not steal focus.

<label for="invoice-search">Search invoices</label>
<div>
  <svg aria-hidden="true">…</svg>
  <input
    id="invoice-search"
    type="search"
    name="q"
    placeholder="Customer or invoice number"
    autocomplete="off"
    aria-controls="invoice-results"
  />
</div>
<ul id="invoice-results" aria-label="Invoices">
  <li>…</li>
</ul>

Tab lands on the input. Typing filters the list in script or on the server. Connect the input to the results region with aria-controls. Announce count changes with a live region. Debounce server calls by 200 to 300ms so fast typists do not fire ten requests.

Keep the placeholder short and specific: Search invoices beats Search. If the field sits in a toolbar that only filters one table, say Filter in the placeholder and skip the word search entirely. The icon already signals the job.

Edge cases

Empty query. Show the full list or a sensible default. Do not flash a no results state before the person has typed.

Very short queries. Consider a minimum length before hitting the server. One letter matching half the database is rarely useful.

Highlighting matches. Bold the matching substring inside each row if the list stays visible. Colour alone fails WCAG 1.4.1, so keep the full row text readable without the highlight.

Loading and errors. Show a spinner inside the results region while a server search runs. If the request fails, keep the typed query in the field and offer Try again rather than clearing what someone already wrote.

Common questions

Search or combobox?: A combobox is for choosing one known option from a list, often with typeahead. Search is for finding rows when the person only knows a fragment. Gmail's inbox search is search. Picking a country from 200 options is a combobox.
Should results update on every keystroke?: Yes for local lists under a few hundred rows. For server search, wait until the person pauses typing or presses Enter, and show a loading state while the request runs. Updating on every key for a slow API feels broken.
Where does the search icon go?: On the leading edge in left-to-right layouts, inside the field border. It is decorative. The label or placeholder carries the accessible name.
What about a clear button?: Add one when the field often holds a long query someone will want to wipe in one click. Keep it inside the field on the trailing edge, with an accessible name like Clear search.
Does type="search" change behaviour?: Browsers may add a clear control on some platforms and treat Enter differently. The visual design is yours either way. Use the type when the field's only job is search.
How do I show no results?: Replace the list with a short message inside the same region. Say what was searched and offer one next step, like clearing the query or checking spelling.

Last reviewed 27 AUG 2026