Search Bars

What is a search bar?

A search bar is an input that lets users find content, products or data. It ranges from a simple field with a search icon to rich components with autocomplete suggestions, recent searches, category scopes and filter chips. Search bars sit in navbars, hero sections, documentation sites, dashboards and above long tables and product lists.

When to use a search bar

• On sites with more content than navigation can expose comfortably.
• In online stores, where many users search before they browse.
• Above tables and lists to filter results instantly.
• In command palettes for power users of web apps.

Best practices

• Wrap the search in a <form role="search"> and use <input type="search"> with a visible or visually hidden label such as "Search products".
• Give an icon-only submit button an aria-label.
• For suggestions, follow the combobox pattern: role="combobox", aria-expanded, aria-controls pointing to a role="listbox", and arrow keys to move through options.
• Debounce input events so suggestions do not fire a request on every keystroke.
• Highlight the matched part of each suggestion, and show a useful message when nothing matches.
• On mobile, an expanding search or a full-screen search overlay often works better than a narrow field in the header.
• Keep the field wide enough for typical queries and make the clear button easy to tap.
• Announce the number of results with a polite live region for instant filtering.

Framework versions

The search bar examples on this page include navbar search fields, hero search boxes, autocomplete dropdowns, search with category selects and filter bars. Bootstrap 6 versions use theme-* colour roles and ES module scripts for suggestions. Bootstrap 5 versions build on .form-control and .input-group, Tailwind CSS versions use focus ring and positioning utilities, and pure CSS versions keep things minimal. Preview each one live, copy the HTML, CSS and JS, and connect the input to your own search endpoint.