build69 / Components / Text Inputs / SearchInput

SearchInput

v1.0.5Updated 28 Sept 2026

Canonical build69 search-input composite. Leading magnifier, optional clear button, platform-aware ⌘K kbd hint, optional global keyboard shortcut, debounced onDebouncedChange, async loading spinner, pill / full-width var

View source ← Back to catalog

Preview

Live · 14 stories

DefaultOpen ↗

▸Why this is recommendedformsearchinputkbd+5

The default, out-of-the-box SearchInput.

Recommended for+14

✓Topbar global search
✓DataTable / list filter
✓Sidebar quick-filter
✓Command-palette trigger

Tags+6

formsearchinputkbddebounceshortcuttopbarfilterdefault

Features+4

Variants: default / subtle / ghost / outline
Sizes: sm / default / lg
Platform-aware ⌘K / Ctrl+K kbd hint via Kbd primitive
Global keyboard shortcut focuses the input from anywhere
Debounced onDebouncedChange with configurable debounceMs
Clear (×) button when value present
Async loading spinner (replaces clear)
rounded="full" pill mode
width presets: auto / sm / md / lg / xl / full
i18n: labels prop overrides the clear-button aria-label
Labelled by FormField: the placeholder fallback name steps aside for the field label, the box fills the field column, aria-invalid paints the destructive ring on the input, and FormField draws no overlay icon over the clear button / spinner

Not recommended for−2

✕Multi-value chip pickers (use TagInput)
✕Async option picking (use ComboboxAsync)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "SearchInput" })

Usage

import { SearchInput } from '@/components/inputs/search-input';

<SearchInput
  variant="subtle"
  width="md"
  showKbd
  shortcut={['mod', 'K']}
  onDebouncedChange={runSearch}
  debounceMs={300}
  placeholder="Search invoices, customers, tasks…"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

value

Controlled value

string—

onValueChange

Value callback

function—

onDebouncedChange

Fires after debounce

function—

debounceMs

Debounce delay (default 200, 0 disables)

number—

variant

Visual variant

'default' | 'subtle' | 'ghost' | 'outline'—

size

Size scale

'sm' | 'default' | 'lg'—

showKbd

Show platform-aware kbd hint

boolean | string[]—

shortcut

Global keyboard shortcut to focus

string[]—

loading

Show trailing spinner

boolean—

rounded

Pill mode

'default' | 'full'—

width

Width preset; defaults to auto, or full when the search box is a FormField control

'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'full'—

labels

Override built-in UI strings (i18n)

Partial<SearchInputLabels>—

aria-labelledby

Id(s) of the element(s) that label the input (the placeholder fallback name then steps aside); wins over a FormField label