SearchInput

Search with an icon, clear button and loading state; no built-in networking.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add search-input

What add search-input installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Icon, contextual clear and loading; your app controls the search.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`loading` Shows a spinner instead of the clear button.	`boolean`	`false`
`onClear` Called when the clear button is pressed.	`() => void`	—
`...InputProps` Accepts value, onValueChange and the rest of the Input props.	`—`	—

The states that apply to this component and their visual treatment.

State	Treatment
Empty	Only the search icon; no clear button.
With text	The clear button (with aria-label) appears if onClear is set.
Loading	loading replaces the clear button with a Spinner without blocking typing.

The clear button has an aria-label; it appears only when there is text and onClear is set.

The loading state uses a Spinner with role="status"; it does not block typing.