Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Search

A Search component enhances user experience by enabling quick, intuitive, and refined information retrieval.

  • Overview
  • Specs
  • Guidelines

Pattern

A Search component is a user interface element that allows users to input queries to find specific information in an application or website. It is designed to enhance user experience by providing quick access to relevant data based on the user’s input.

To enhance user experience, the Search component often includes a responsive design for optimal use on multiple devices, accessibility features for users with disabilities, and error handling to efficiently manage scenarios without results.

search_bar_anatomy
Search Bar anatomy

1: Search Icon

2: Quick Filters

3: Recently opened apps and items

4: Navigation Icon

5: View all Search Results

search_bar_usedfor
Search Bar quick filters in use

Used for:

Topbar

To maintain consistency across all views, the Search Bar is placed inside the topbar pattern.

Data Grid

In order to filter more easily, a Search Bar is integrated into the topbar.

Ease of Use

A Search Bar offers a familiar and intuitive interface for users, making it easier to understand and interact with in different applications and platforms;

Don’t use for:

Sidebar

A Search Bar should not be inserted in a sidebar, as the search for menu entries is already covered by the search in the top bar.

Limited Use

If the app or website has a very specific and limited set of tasks users can perform, a Search Bar might not be necessary. A well-designed interface with clear calls to action can be more efficient for users who know exactly what they need to do.

Search applied inside Sidebar

Demo

Access the Figma file and inspect the element using Dev Mode.

search_bar_demo
Search Bar demo

Last Update

Old version of Search
search_bar_usedfor
New version of search bar
  • Updated color of items in different states;
  • Updated drop-down;
  • Added new quick filters feature;

Filter Area

Under Maintenance …