> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/SearchInput) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-searchinput--overview)

```tsx
import { useState } from 'react';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';

export const Basic = () => {
  const [value, setValue] = useState('');
  return <SearchInput value={value} onChange={setValue} />;
};
```

## Usage

```tsx
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('')`.

```tsx
import { useState } from 'react';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';

export const WithValue = () => {
  const [value, setValue] = useState('attacks');
  return <SearchInput value={value} onChange={setValue} onClear={fn()} />;
};
```

### Custom placeholder

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

```tsx
import { useState } from 'react';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';

export const CustomPlaceholder = () => {
  const [value, setValue] = useState('');
  return <SearchInput value={value} onChange={setValue} placeholder='Filter by name…' />;
};
```

### Disabled

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

```tsx
import { useState } from 'react';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';

export const Disabled = () => {
  const [value, setValue] = useState('locked query');
  return <SearchInput value={value} onChange={setValue} disabled />;
};
```

### Sizes

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

```tsx
import { useState } from 'react';
import { SearchInput } from '@wallarm-org/design-system/SearchInput';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => {
  const [d, setD] = useState('');
  const [m, setM] = useState('');
  const [s, setS] = useState('');

  return (
    <HStack gap={16} align='start'>
      <SearchInput value={d} onChange={setD} placeholder='Default' size='default' />
      <SearchInput value={m} onChange={setM} placeholder='Medium' size='medium' />
      <SearchInput value={s} onChange={setS} placeholder='Small' size='small' />
    </HStack>
  );
};
```

## Props

| Prop           | Type                                                 | Default   | Description                                                         |
| -------------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------------- |
| value \*       | `string`                                             |           | Current search value (controlled).                                  |
| onChange \*    | `(value: string) => void`                            |           | Called when the value changes (typing or clearing).                 |
| onClear        | `(() => void) \| undefined`                          |           | Called when the clear button is clicked. Fires before onChange(''). |
| size           | `SearchInputSize \| undefined`                       | `default` | Input size variant.                                                 |
| disabled       | `boolean \| undefined`                               | `false`   | @default false                                                      |
| title          | `string \| undefined`                                |           |                                                                     |
| pattern        | `string \| undefined`                                |           |                                                                     |
| defaultChecked | `boolean \| undefined`                               |           |                                                                     |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |           |                                                                     |
| autoFocus      | `boolean \| undefined`                               |           |                                                                     |
| id             | `string \| undefined`                                |           |                                                                     |
| tabIndex       | `number \| undefined`                                |           |                                                                     |
| rel            | `string \| undefined`                                |           |                                                                     |
| name           | `string \| undefined`                                |           |                                                                     |
| alt            | `string \| undefined`                                |           |                                                                     |
| height         | `string \| number \| undefined`                      |           |                                                                     |
| src            | `string \| undefined`                                |           |                                                                     |
| width          | `string \| number \| undefined`                      |           |                                                                     |
| autoComplete   | `HTMLInputAutoCompleteAttribute \| undefined`        |           |                                                                     |
| maxLength      | `number \| undefined`                                |           |                                                                     |
| minLength      | `number \| undefined`                                |           |                                                                     |
| placeholder    | `string \| undefined`                                | `Search`  |                                                                     |
| readOnly       | `boolean \| undefined`                               |           |                                                                     |
| required       | `boolean \| undefined`                               |           |                                                                     |
| checked        | `boolean \| undefined`                               |           |                                                                     |
| step           | `string \| number \| undefined`                      |           |                                                                     |
| accept         | `string \| undefined`                                |           |                                                                     |
| max            | `string \| number \| undefined`                      |           |                                                                     |
| min            | `string \| number \| undefined`                      |           |                                                                     |
| multiple       | `boolean \| undefined`                               |           |                                                                     |
| data-testid    | `string \| undefined`                                |           |                                                                     |