When there is a search query with matches, the search bar needs controls to move through the different search matches.

Design considerations

• Previous and next controls. Allow moving to the previous/next search result.
• Differentiate selected match. When going through different matches, the one that is the currently selected should have a distinguishable look. We can use orange (#FCB254) for the active match while the rest can be yellow (#F4EC86).
• Disable controls when not relevant. At the first match, “previous” control should be disabled (as shown in the example above, becoming 50% transpatent). Similarly, at the last match, “next” should be disabled.
• Indicate the current position of the selected match. An “X of Y” indicator will provide feedback about the total of matches in the board, and which one is the current one selected.