build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  SearchInput

SearchInput

v1.0.3Updated 20 Jul 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 · 13 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
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

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

Override built-in UI strings (i18n)

Partial<SearchInputLabels>—

Related

Platform docsAll componentsSource files