Searchbar

Searchbar is a search input with a leading magnifier icon, a clear button that appears once the field is non-empty, an optional loading spinner, and an optional keyboard hint. It is purely presentational — it holds no search logic, so you can wire it to any search backend.

SearchbarTrigger is a companion button that looks like a Searchbar but opens a search surface (typically a dialog) instead of accepting text.

Usage

1
2
3
4
5
6
7
8
9
import { Searchbar } from "@e-infra/design-system"

const [query, setQuery] = useState("")

<Searchbar
  value={query}
  onValueChange={setQuery}
  placeholder="Search documentation…"
/>

Uncontrolled

Leave value out and the component manages its own text. Use onValueChange to observe it.

1
<Searchbar defaultValue="button" onValueChange={(v) => console.log(v)} />

Loading State

While a query is in flight, loading replaces the clear button with a spinner.

1
2
3
const { query, setQuery, isLoading } = useSearch()

<Searchbar value={query} onValueChange={setQuery} loading={isLoading} />

Keyboard Hint

shortcut renders a <kbd> on the right while the field is empty. It is hidden below the sm: breakpoint. The component does not bind the key itself — register the listener where the search surface lives.

1
<Searchbar shortcut="⌘ K" />

Sizes

1
2
3
<Searchbar size="sm" />
<Searchbar size="md" />
<Searchbar size="lg" />

Trigger Variant

Use SearchbarTrigger where a live input would mislead — a site header whose results open in a command palette, for example. It matches the Searchbar shell exactly, so the two read as one control across the transition.

1
2
3
4
5
6
7
import { SearchbarTrigger } from "@e-infra/design-system"

<SearchbarTrigger
  placeholder="Search documentation…"
  shortcut="⌘ K"
  onClick={() => setOpen(true)}
/>

Inside a Dialog

Drop the border and rounding to seat the field flush against the top of a command palette.

1
2
3
4
5
6
7
8
<Command shouldFilter={false}>
  <Searchbar
    value={query}
    onValueChange={setQuery}
    className="rounded-none border-0 border-b shadow-none focus-within:ring-0"
  />
  <CommandList>{/* results */}</CommandList>
</Command>

Searchbar Props

SearchbarTrigger Props

Structure

Behavior