Search field

A pill-shaped search box with the glass, the words and a ⌘ K hint while empty, and a clear button once something is typed; Escape clears it.

ui.searchcomponents/ui/search-field.tsx

Use case

For the AI

Use it above a list or a table to narrow what is on screen: clients by name, orders by number, invoices by company. Large, it is a page's main search; small, it fits a toolbar above a table, level with the small buttons there. It is controlled: the value lives in state and filters the rows as it changes.

Use it when

Filtering a table or a list on the page (clients, orders)
A page's main search (size lg)
A search in a toolbar above a table (size sm)

Use something else when

Jumping to any record or action from anywhere, by keyboard: Command bar
Typing a value in a form with suggestions as you type: Autocomplete
Picking one item from a long list in a form: Combobox
A plain typed value in a form: Input

Examples

Type: the shortcut leaves, the clear button pops in. Escape clears.

Filled

In a bar: the same size as the buttons beside it

Large, for a page's main search

Code

Import

import { SearchField } from "@/components/ui/search-field"

Usage

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

<SearchField
  value={query}
  onValueChange={setQuery}
  placeholder="Search clients"
  aria-label="Search clients"
  shortcut={false}
/>

Rules

It is controlled: value and onValueChange are required.
Always pass aria-label (Search clients); the placeholder defaults to Search.
The ⌘ K hint is only drawn: wire the shortcut yourself, or pass shortcut={false}.
Escape and the clear button empty it; do not add a clear button of your own.
size is xs, sm, default, lg or xl, the buttons' own heights (26, 30, 36, 40, 48px): in a bar, give the search the size of the buttons beside it, never a height of its own.