# Search Input

Search field with a clear button and a busy indicator while results load. Focus brightens the field, matching text in results can be highlighted, and a frosted glass style is included.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add search-input
```

## Import

```tsx
import { SearchInput, SearchMatch } from "@/components/ui/search-input/search-input";
```

## Variants

- `directory` — Team directory: `npx @lumioui/cli add search-input-directory`
- `glass` — Glass capsule: `npx @lumioui/cli add search-input-glass`

## Props

### SearchInput

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Visible label above the field. |
| `helper?` | `string` | Helper text below the field. |
| `error?` | `string` | Error message. |
| `debounceMs?` | `number` | Debounce duration in ms for onChangeText. While a debounced query is  pending, the leading glyph shows busy dots. |
| `searching?` | `boolean` | A search is running (e.g. awaiting results) — the leading glyph shows  busy dots until it turns false, then swaps back. |
| `onClear?` | `() => void` | Called when the clear button is pressed. |
| `icon?` | `React.ReactNode` | Leading icon slot. |
| `className?` | `string` | Classes for the input element. |
| `containerClassName?` | `string` | Classes for the outer wrapper. |
| `glass?` | `boolean` | Capsule mode — the field becomes a floating glass pill  (search rides over content instead of sitting on the surface). |
| `glassTint?` | `string` | Glass mode only: tint the capsule (e.g. a dark wash over a bright photo). |
| `size?` | `"sm" | "md"` | Field height — "sm" 36pt (search inside a navigation bar), "md" 44pt  (default, standalone search on a screen). |

### SearchMatch

| Prop | Type | Notes |
| --- | --- | --- |
| `text` | `string` | The result text. |
| `query` | `string` | The query — its first case-insensitive match is lit. |
| `className?` | `string` | Classes for the whole line (size, weight). |
| `numberOfLines?` | `number` | — |

## Icons rendered

- `x` — /icons.html?i=x
- `search` — /icons.html?i=search

Source: https://lumioui.com/components/search-input