# SearchInput

**When to use:** Search field with built-in debouncing and an optional result count line — list filters, search-as-you-type pages. Wraps `Input` (`InputType.Search`) and handles the debounce timer for you.

**Keywords:** text search, search text field, search box

**Import:** `import { SearchInput } from '@ahrowe/ui'`

```tsx
import { SearchInput } from '@ahrowe/ui';

// Basic — fires onDebounce 500ms after the user stops typing
<SearchInput
  value={query}
  onChange={(v) => setQuery(v)}
  onDebounce={(v) => runSearch(v)}
  placeholder="Search customers..."
/>

// Show result count below the field
<SearchInput
  value={query}
  onChange={setQuery}
  onDebounce={runSearch}
  totalAmount={results.length}
/>

// Custom debounce delay and fixed width
<SearchInput
  value={query}
  onChange={setQuery}
  onDebounce={runSearch}
  debounceMs={250}
  width={320}
/>
```

**Theming:** override theme-wide via `ThemeProvider`'s `variables`; no built-in fallback, so it's unset in the default theme until set:

| Variable | Falls back to |
|----------|---------------|
| `--search-input-color` | *(none — unset by default)* |
| `ref` | `Ref<HTMLInputElement>` | Ref to the inner `<input>`, for focusing the field |

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `value` | `string` | Controlled value (required) |
| `onChange` | `(value: string) => void` | Fires on every keystroke (required) |
| `onDebounce` | `(value: string) => void` | Fires after `debounceMs` of no typing — run searches here |
| `debounceMs` | `number` | Debounce delay (default `500`) |
| `label` | `string` | Floating label |
| `placeholder` | `string` | |
| `totalAmount` | `number` | Result count for the trailing label |
| `showAmount` | `boolean` | Show the result count line (default `true`) |
| `width` | `number \| string` | Fixed width for the wrapper |
| `className` | `string` | Root wrapper class |

**Slots:** `root` `input` `resultCount`

**Labels:** `results(count)` — the line under the field (default `12 results`). Pass `labels` to override it, on the component or app-wide through `ConfigProvider`. Type: `SearchInputLabels`.