The search bar is a navigation element that allows the user to find products, and upon clicking on them, redirect to their respective page.

Where this element can be seen?

The search bar can usually be seen in the header, but it can be used globally.

How should this element be designed?

The search bar may have 2 different states:

• active: (by default the search icon is replaced with the cancel icon)
• default
• hovered

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Designs should represent search results and no results on desktop and mobile as well.

How the design may look like?

Design example #1

Design example #2

How to develop styles for this element?

The SearchField component is responsible for rendering the search bar.

The SearchOverlay component is responsible for the overlay that shows when you are typing into the search bar. If the project is not using 3rd party extension for the search results or for output are used default components and functionality, search result styling is in the scope of this task.

Search field inherits Field component’s global styles if adjustments are needed very important to isolate search field styles to not break global field’s theming.

The SearchItem component is responsible for rendering individual items in the search overlay.

How the implementation may look like?

Implementation Example #1

Implementation Example #2