InputSearch

Usage

import { InputSearch } from '@acronis-platform/ui-react';

InputSearch wraps an internal search box — a bordered field holding a leading magnifier, a borderless native <input>, and a trailing clear button — and adds an optional label above it (with a required marker). Every other prop — placeholder, value, onClear, disabled, … — passes straight through to the input. A visible label names the field automatically. Themed by the --ui-input-search-* tokens.

Search is exported as an alias of InputSearch, so import { Search } gives you the same component.

className is merged onto the outer wrapper, not the input — use it to size the whole field. The wrapper has no w-full, so it shrinks to its min-width inside a constrained flex/grid ancestor instead of being force-stretched:

<InputSearch aria-label="Search" placeholder="Search table" className="w-56" />

Examples

A labeled search field:

<InputSearch label="Find a report" placeholder="Search…" />

Required:

<InputSearch label="Search" required placeholder="Type to search" />

Controlled, with a clear handler:

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

<InputSearch
  label="Search"
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onClear={() => setQuery('')}
/>

Clear button

The clear (×) button appears whenever the field is non-empty and not disabled. Activating it empties the input, refocuses it, and fires a native change event with an empty value before calling onClear — so controlled and uncontrolled usage both stay in sync.

It renders as a ghost icon button: the glyph uses --ui-button-icon-global-icon-color-idle, and it paints --ui-button-icon-global-container-color-hover / --ui-button-icon-global-container-color-active backgrounds on hover and press.

API Reference

InputSearchProps extends the internal search box's props, so it also accepts every native <input> attribute plus onClear.