@patternfly/react-core/src/components/SearchInput/examples/SearchInput.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: 'Search input'
section: components
cssPrefix: 'pf-v6-c-search-input'
propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
---

import { useRef, useState } from 'react';
import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

## Examples

### Basic

```ts file='./SearchInputBasic.tsx'
```

### Match with result count

```ts file='./SearchInputWithResultCount.tsx'
```

### Match with navigable options

```ts file='./SearchInputWithNavigableOptions.tsx'
```

### With submit button

```ts file='./SearchInputWithSubmitButton.tsx'
```

### Focus search input using ref

```ts file='./SearchInputFocusSearch.tsx'
```

### With expandable button

```ts file='./SearchInputWithExpandable.tsx'
```

### Advanced

The search input component can be used to dynamically build a one to one attribute-value advanced search.
Using the `attributes` prop alongside the `advancedSearchDelimiter` will expose this functionality, as demonstrated in
the following example. The search input component can also be used as a composable component and paired with a Popper 
or other elements to build a completely custom advanced search form. This feature is demonstrated 
in the search input's <a href="/components/search-input/react-demos">react demos</a>.

The values used in the attribute-value form fields may contain spaces. The values containing spaces
should be wrapped with quotes inside the summary search string in the input field. If the latter is
autogenerated from the individual fields the quotes will be autoplaced.

```ts file='./SearchInputAdvanced.tsx'
```