Search Input

Default

npx visor add search-input

This copies two files into your project:

This also installs the input component as a dependency.

import { SearchInput } from '@/components/ui/search-input/search-input';

<SearchInput placeholder="Search..." />

Prop	Type	Default	Description
`onClear`	`() => void`	—	Callback when the clear button is clicked.
`placeholder`	`string`	—	Placeholder text for the search field.
`disabled`	`boolean`	`false`	Disables the search input.
`className`	`string`	—	Additional CSS class names to merge onto the wrapper.
`...props`	`React.InputHTMLAttributes<HTMLInputElement>`	—	All standard HTML input attributes are forwarded.

The component also accepts all standard <input> HTML attributes.

Renders type="search" which adds browser-native clear functionality on some platforms
The search icon is aria-hidden="true" — it is decorative
The clear button (when shown) has aria-label="Clear search" and is only rendered when the input has a value
Provide a visible <Label> or aria-label to describe the search scope (e.g., "Search components", "Search users")
In a live-search context, pair with an aria-live="polite" region to announce result counts as the user types