## Usage

Use the `<SearchInput />` component when you need to design a search or filtering experience, where the user can specify a word or phrase in order to find relevant matching results.

```tsx live
const [value, setValue] = useState('');

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setValue(event.target.value);
};

const handleClear = () => {
  setValue('');
};

const fruits = ['apple', 'banana', 'orange', 'grapefruit', 'mango', 'strawberry', 'peach', 'apricot'];

return (
  <Flex flexDirection="column" gap="small">
    <SearchInput
      value={value}
      onChange={handleChange}
      onClear={handleClear}
      placeholder="Search fruit..."
      aria-label="Search fruit"
    />

    <Flex as="ul" minHeight="24px">
      {fruits
        .filter((fruit) => fruit.includes(value) || value === '')
        .map((fruit, index, array) => (
          <Box as="li" key={fruit}>
            {fruit}
            {!(index === array.length - 1) && ', '}
          </Box>
        ))}
    </Flex>
  </Flex>
);
```

<Notice>
  <Text>
    The `<SearchInput />` relies on being controlled with state. You “own” the state, which is managed by providing
    handlers to the component.
  </Text>
</Notice>

### onChange

Use the native `onChange` prop to control the search input's value.

### onClear

The search input can be cleared by using the `onClear` prop to pass in a function that clears the state. This function is triggered by clicking on the X-icon, or pressing Escape on keyboard, while the input is focused.

## Size

The input supports two sizes, `small` and `medium` (default). Prefer using size consistently with other form controls that support the same sizes.

```tsx live
<Flex flexDirection="column" gap="small">
  <SearchInput size="small" placeholder="Small" aria-label="Search" />
  <SearchInput placeholder="Medium (default)" aria-label="Search" />
</Flex>
```

## Placeholder and label

Use the `placeholder` prop to provide a visual hint or example of what the user can enter.

Use `aria-label` to provide a label for assistive technologies, or alternatively nest the input in a [Field](/packages/field/).

```tsx live
<SearchInput placeholder="Search employees..." aria-label="Search employees..." />
```

## Disabled

Use the `disabled` prop when the user shouldn't be able to manipulate the value of the input.

```tsx live
<SearchInput disabled placeholder="Disabled" aria-label="Search" />
```

## Invalid

Use the `invalid` prop to communicate that validation has failed for this particular search input.

```tsx live
<SearchInput invalid placeholder="Invalid" aria-label="Search" />
```

## Other native props

The `<SearchInput />` also supports the following native `InputHTMLAttributes` (see [props](/packages/search-input/props) for a full list):

- `onBlur`
- `onFocus`
- `onChange`
- `placeholder`
- `value`

SearchInput

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources