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).

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

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

Controlled value

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

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" />

Props

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.