# SearchInput

Compact search field for toolbars and data-table filters. Wraps the `searchInput` recipe (`variant="default"` — command-style triggers belong in `CommandPalette`).

## Examples

### Default

Set `placeholder` and an `aria-label` (defaults to the placeholder when omitted).

```tsx
import { SearchInput } from '@var-ui/react';

<SearchInput placeholder="Search…" aria-label="Search" />
```

```astro
---
import { SearchInput } from '@var-ui/astro';
---
<SearchInput placeholder="Search…" aria-label="Search" />
```

```html
<div class="var-ui-search-input" data-var-ui-search-input data-variant="default">…</div>
```

### Controlled value

Drive the field with `value` and `onChange` when the query must stay in sync with app state.

```tsx
import { SearchInput } from '@var-ui/react';
import { useState } from 'react';

const [query, setQuery] = useState('docs');

<SearchInput value={query} onChange={setQuery} placeholder="Search…" aria-label="Search" />
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| aria-label | string \| undefined | no |  |  |
| className | string \| undefined | no |  |  |
| defaultValue | string \| undefined | no |  | Uncontrolled initial value. |
| name | string \| undefined | no |  |  |
| onChange | ((value: string) => void) \| undefined | no |  |  |
| placeholder | string \| undefined | no |  |  |
| size | ControlSize \| undefined | no |  |  |
| value | string \| undefined | no |  | Controlled value for the default search field variant. |
| variant | "default" \| "command" \| undefined | no |  |  |

## Accessibility

The underlying control is a native `type="search"` input. Always provide an accessible name via `aria-label` (or rely on the default that mirrors `placeholder`). The leading search icon is `aria-hidden` so it is not announced twice.