Content
- Placeholder: "Search {things}". It's a hint, not the label.
ExperimentalatomInputs
SearchInput
The pill search field with a clear button.
import { … } from "@brdgapp/ui/components/search-input"Usage
SearchInput is Bridge's search field: a pill with a search icon on the left and a clear button on the right once there's text. It is controlled: you own the value. The usual mistake is filtering only the rows already loaded when the server can search everything.
When to use
- Searching a list, table or tab.
When not to use
- For a general text field. Bridge's text input moves into the package later.
Anatomy
Field. 40px tall pill on
--surface-secondary; white when focused.Search icon. 16px; turns blue when the field has focus.
Clear button. An IconButton, shown only when there's text and
onClearis set.
Examples
Search people
Type to filter the sample network.
Try “Okonkwo”
States
| Rest | Focus | |
|---|---|---|
| Empty | ||
| Has text |
| State | What happens |
|---|---|
| Rest | Grey fill, light border. |
| Focus | White fill, blue border and a soft blue ring; the icon turns blue. |
| Has text | The clear button appears. |
Behavior
- Built on Base UI Input, like Input, so it can sit inside a Field and gets the same keyboard and form behavior.
classNamegoes on the wrapper, so a width limit keeps the clear button inside the pill.- Debounce the query (Bridge OS uses 300ms) and search on the server where the endpoint supports it.
- Place the search row above the list's loading, empty and error states, so people can type while it loads.
Do and don't
Do
Search on the server, so every match is found.Don't
Filter only the page already loaded and call it search.Accessibility
- Give it an
aria-label(or a visible label): the placeholder disappears when typing. - Announce the result count in a polite live region.
| Keys | Action |
|---|---|
| Esc | Clears the field (the browser's search behavior). |
| Tab | Reaches the clear button. |
API reference
SearchInput
The search field. Extends Base UI Input props, the same as a text input (except type).
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The query. |
onChange | (event) => void | — | Update the query. |
onClear | () => void | — | Clear it. Without this there's no clear button. |
className | string | — | Layout only, on the wrapper. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- IconButton
- Used by components
- None
- Used in patterns
- Loading, empty and errorForms and validationSearch, filter and sortEducation and onboardingKeyboard and commandsPermissions and availability
- Used in templates
- Table page
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- Bridge OS's placeholder used
--text-disabled(2:1). The package uses--text-muted(4.71:1). - Bridge OS's clear button was a hand-made 24px button; it is now IconButton (28px).
Sources
- Bridge OS
components.md→ SearchInput;src/components/ui/search-input.tsx.