Scope Selector Bar
Search scope chip switcher showing result counts per scope alongside a query input that updates its placeholder to match the active scope.
Search scope chip switcher showing result counts per scope alongside a query input that updates its placeholder to match the active scope.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Scope Selector Bar is the where-to-search control: three chips in a bordered switcher group (This project 34, This team 128, Everywhere 412) with the active chip inverted, and a Search Input to the right that placeholder-updates to match the active scope. A live footer line echoes the item count for the selected scope, or switches to Searching "..." in This project up to 34 results once a query is typed.
Scopes are one array with uniform shape; the footer derives from the active scope via find so no index guard is needed. The inline chip group avoids a dropdown and makes the scope change a single tap.
Reach for this block at the top of a command palette or search results page, wired to your search endpoint so switching scope re-fetches under the dashed placeholder panel.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the global search scope bar. Other selector bars:
Tip: show the count per chip before any query so users know where results live before they type.