---
title: "Search bar UI: anatomy, variants and examples | Kombai"
description: "A search bar is a field where people type a few words to find content, often with suggestions that appear as they type."
canonical_url: https://kombai.com/glossary/search-bar/
author: "The Kombai Team"
---

# Search bar

A search bar is a field where people type a few words to find content, often with suggestions that appear as they type.

- Also called: search field, search box
- Platforms: Web, Mobile
- In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/search-bar/), [90 mobile designs](https://kombai.com/gallery/mobile/search-bar/)

- [Bramblewick](https://kombai.com/gallery/inspirations/search-bar-ios-16/) (Mobile)
- [Halcyra](https://kombai.com/gallery/inspirations/search-bar-web-7/) (Web)
- [Bellbuoy](https://kombai.com/gallery/inspirations/search-bar-ios-13/) (Mobile)

## What is a search bar?

A search bar is a text field built for finding things. People type a few words, and the product shows matching suggestions or results, either as they type or after they press Search. A magnifier icon marks the field, and a clear button empties it.

- It sits at the top of the page, list or sheet it searches.
- Placeholder text often names what it searches, like "Search orders".

## When to use search bar

- **Large catalogs.** Shops, menus and libraries with more items than people can browse.
- **People know what they want.** A product name, a contact or an order number.
- **Questions in their own words.** Help centers where people describe a problem.

## When not to use one

- **Short lists.** A list that fits on one screen is faster to scan than to search.
- **Known values.** Use filter chips or a dropdown for size, color or status.
- **Running commands.** Jumping to actions and settings by keyboard suits a command palette.

## Anatomy

1. **Search icon**: Marks the field as search
2. **Input**: Holds the query
3. **Clear button**: Empties the field
4. **Suggestions**: Matches as people type
5. **Match highlight**: Shows what matched
6. **States**: Empty, focus, typing, no results

## Variants

We sorted every search bar design in the Kombai gallery and found five patterns.

### 1. Suggestions as you type

The default. A list of completions under the field that updates with every letter, often with the matching text in bold.

- [Halewind](https://kombai.com/gallery/inspirations/search-bar-ios-6/) (Mobile)
- [Mossgrove](https://kombai.com/gallery/inspirations/search-bar-ios-17/) (Mobile)
- [Moraven](https://kombai.com/gallery/inspirations/search-bar-web-1/) (Web)

### 2. Recent and popular before typing

An empty field opens a panel of recent searches, trending items or starter queries, so people can tap instead of type.

- [Kunzite](https://kombai.com/gallery/inspirations/search-bar-web-6/) (Web)
- [Havenreel](https://kombai.com/gallery/inspirations/search-bar-ios-62/) (Mobile)
- [Weftmoor](https://kombai.com/gallery/inspirations/search-bar-web-17/) (Web)

### 3. Scoped search

Tabs, segments or chips under the field limit the search to one kind of result, like stores, people or payouts.

- [Cindernote](https://kombai.com/gallery/inspirations/search-bar-ios-54/) (Mobile)
- [Eskerly](https://kombai.com/gallery/inspirations/search-bar-ios-89/) (Mobile)
- [Vaultry](https://kombai.com/gallery/inspirations/search-bar-ios-80/) (Mobile)

### 4. Search inside a picker

A small field at the top of a dialog or sheet that filters a list of people, files or assets to choose from.

- [Kilnhollow](https://kombai.com/gallery/inspirations/search-bar-web-26/) (Web)
- [Firncrest](https://kombai.com/gallery/inspirations/search-bar-web-41/) (Web)
- [Quildex](https://kombai.com/gallery/inspirations/search-bar-ios-66/) (Mobile)

### 5. No-results states

When nothing matches, the page repeats the query and offers a way forward: a spelling hint, popular items or other searches.

- [Whimbrel](https://kombai.com/gallery/inspirations/search-bar-web-9/) (Web)
- [Sorrelane](https://kombai.com/gallery/inspirations/search-bar-web-24/) (Web)
- [Vaneford](https://kombai.com/gallery/inspirations/search-bar-web-42/) (Web)

## Where search bars show up

### Shops and menus

Find a drink, a dish or a product by name, with matches as rows or cards under the bar.

- [Ashbriar](https://kombai.com/gallery/inspirations/search-bar-ios-51/) (Mobile)
- [Ramekin](https://kombai.com/gallery/inspirations/search-bar-ios-45/) (Mobile)
- [Pomvale](https://kombai.com/gallery/inspirations/search-bar-ios-65/) (Mobile)

### Places and addresses

Type part of a street or a city and pick the right match, often over a map.

- [Skerrivik](https://kombai.com/gallery/inspirations/search-bar-ios-4/) (Mobile)
- [Keelson](https://kombai.com/gallery/inspirations/search-bar-web-12/) (Web)
- [Alidane Atlas](https://kombai.com/gallery/inspirations/search-bar-web-13/) (Web)

### Help centers

A large search box at the top of support pages, with popular topics underneath.

- [Squallwave](https://kombai.com/gallery/inspirations/search-bar-web-8/) (Web)
- [Wickerly](https://kombai.com/gallery/inspirations/search-bar-ios-72/) (Mobile)
- [Rabbetwell](https://kombai.com/gallery/inspirations/search-bar-web-50/) (Web)

### People and accounts

Find someone to follow, pay or message by name or handle.

- [Ripplecourt](https://kombai.com/gallery/inspirations/search-bar-ios-43/) (Mobile)
- [Nockwell](https://kombai.com/gallery/inspirations/search-bar-web-43/) (Web)
- [Broadstride](https://kombai.com/gallery/inspirations/search-bar-ios-34/) (Mobile)

## Search bar vs similar components

| | [Search bar](https://kombai.com/glossary/search-bar/) | [Command palette](https://kombai.com/glossary/command-palette/) | [Filter chips](https://kombai.com/glossary/filter-chips/) | [Text field](https://kombai.com/glossary/text-field/) |
|---|---|---|---|---|
| Finds | Content that matches the words | Pages and actions to run | Items that match set values | Nothing. It collects a value |
| Opens | Always visible, or from an icon | A shortcut like Cmd+K | Always visible above a list | Always visible in a form |
| Best for | Catalogs, inboxes, help centers | Moving fast in large apps | Narrowing results by type or price | Names, emails and codes |

## Build notes

- Wrap the search in a <search> element, or add role="search" to its <form>.
- Use <input type="search"> and name it with a <label> or aria-label, like "Search orders".
- For suggestions, use the combobox pattern: role="combobox" with aria-expanded and aria-controls pointing at a listbox.
- Down Arrow moves into the suggestions, Enter picks one and Escape closes the list. Focus stays in the field.
- Keep the query in the field on the results page, so people can edit it.
- When nothing matches, say so, repeat the query and offer a way forward.

## FAQ

### Should a search bar show results as people type?

Show suggestions as people type when matches are quick to find, like product names or places. Wait for Enter when every search is slow, like a full-text search across documents. Either way, Enter should run the search.

### Does a search bar need a visible label?

Not always. A magnifier icon and placeholder text are a familiar pattern. The field still needs an accessible name, from a visually hidden <label> or aria-label, because placeholder text isn't a reliable label for screen reader users.

### What should search show when nothing matches?

Say that nothing matched and repeat the query, so people can spot a typo. Then give them somewhere to go: a spelling suggestion, popular items or a link to browse. A blank page reads like an error.

### What's the difference between a search bar and a command palette?

A search bar finds content, like products, messages or help articles. A command palette finds pages and actions and runs them, and usually opens with a shortcut like Cmd+K. Many apps have both.

## Related terms

- [Command palette](https://kombai.com/glossary/command-palette/)
- [Filter chips](https://kombai.com/glossary/filter-chips/)
- [Text field](https://kombai.com/glossary/text-field/)
- [Dropdown menu](https://kombai.com/glossary/dropdown-menu/)

## References

- [WAI-ARIA Authoring Practices: Combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
- [MDN: The search input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/search)
- [MDN: The search element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search)