Searchbar Design system

Start your search with a clear scope and response.

7 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Label the search rangeIndicates whether you are searching across the entire product or the current list.Placeholders can suggest examples but do not replace access labels.Example “Search in documents” with the example “Document name or content”.Keep entering and deleting convenientAllow query editing, quick deletion, and appropriate keyboard usage.The delete button needs to have a name and not lose focus; After deletion, the search scope must still be clear.Agree on how to start searchingSupports Enter or updates as you enter with predictable status.If there is a send button, the response has received the operation and avoids creating duplicate requests during the timeout.

Interaction and usability

Try the operation, change the status and continue working.

Controllable hintsIf appropriateIf there are hints, support arrows, Enter, Escape and differentiate with results.The hint must indicate whether the selection will go directly to the content or instead of a query; try both Escape and arrow keys.Keep history in controlIf appropriateIf you save an old search, delete it and explain the scope of the save.Delete individual queries or entire history when appropriate, and don't let users confuse personal history with general suggestions.Response loaded and not foundKeep keywords, notify the number of results and instructions when there are no results.Keep keywords with the results you are viewing; When the network fails, users need to know they can try again without re-entering.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Place search where it fits the taskMake the search field easy to find when searching is the main task, or provide a clear way to open it when secondary. Keep its position consistent across related screens.Try starting your search from a page deep on your phone, not just from the first screen.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Label the search range

Placeholders can suggest examples but do not replace access labels.

EXAMPLES

Usage examples

Label the search range

“Search in documents” with the example “Document name or content”.

Searchbar Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

Label the search range

Usage examples

Label the search range

Find a checklist

No checklists found