## Examples

### Basic


import SearchInputBasic from "./SearchInputBasic.tsx?raw"

<LiveExample src={SearchInputBasic} />

### Match with result count


import SearchInputWithResultCount from "./SearchInputWithResultCount.tsx?raw"

<LiveExample src={SearchInputWithResultCount} />

### Match with navigable options


import SearchInputWithNavigableOptions from "./SearchInputWithNavigableOptions.tsx?raw"

<LiveExample src={SearchInputWithNavigableOptions} />

### With submit button


import SearchInputWithSubmitButton from "./SearchInputWithSubmitButton.tsx?raw"

<LiveExample src={SearchInputWithSubmitButton} />

### Focus search input using ref


import SearchInputFocusSearch from "./SearchInputFocusSearch.tsx?raw"

<LiveExample src={SearchInputFocusSearch} />

### With expandable button

Animations on the expansion and collapse of the search input may be opted into by passing `hasAnimations` to the `expandableInput` object.


import SearchInputWithExpandable from "./SearchInputWithExpandable.tsx?raw"

<LiveExample src={SearchInputWithExpandable} />

### 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.


import SearchInputAdvanced from "./SearchInputAdvanced.tsx?raw"

<LiveExample src={SearchInputAdvanced} />