#SearchInput

A search field with a magnifying-glass icon and a clear button that appears once there is a value. Controlled only — pass value and onChange, and optionally onClear to react to the clear button specifically.

Source · Storybook

#Usage

import { SearchInput } from '@wallarm-org/design-system/SearchInput';

#Examples

#With value

When the field has a value the clear button appears at the inline end. Clicking it fires onClear, then onChange('').

#Custom placeholder

A custom placeholder when "Search" is not descriptive enough.

#Disabled

Dimmed, with the clear button hidden even when a value is present — there is nothing the reader can act on.

#Sizes

The same height scale as Input, so a search field lines up with the fields around it.

#Props