# Parts (/themes/sdk/reference/search/parts)

```ts
import { … } from '@poltura/theme-sdk/search';
```

## `SearchInput` [#searchinput]

The search field with its icon and clear button; inside [`SearchCombobox`](/themes/sdk/reference/search/parts#searchcombobox) it is the combobox the arrow keys drive.

```ts
SearchInput(props: SearchInputProps): ReactElement
```

**Props:** [`SearchInputProps`](/themes/sdk/reference/search/types#searchinputprops)

**Example**

```tsx
import { SearchInput, useSearch } from '@poltura/theme-sdk/search';

export function SearchField() {
  const search = useSearch();
  return <SearchInput value={search.query} onChange={search.setQuery} onSubmit={search.submit} />;
}
```

## `SearchResults` [#searchresults]

The products matching the query, with the searching and no-results notes.

```ts
SearchResults(props: SearchResultsProps): ReactElement | null
```

**Props:** [`SearchResultsProps`](/themes/sdk/reference/search/types#searchresultsprops)

**Example**

```tsx
import { SearchResults, useSearch } from '@poltura/theme-sdk/search';

export function LiveResults() {
  const search = useSearch({ limit: 5 });
  return search.hasQuery ? <SearchResults state={search} /> : null;
}
```

## `SearchSuggestions` [#searchsuggestions]

What search offers before the shopper types: popular searches as chips and the featured products.

```ts
SearchSuggestions(props: SearchSuggestionsProps): ReactElement | null
```

**Props:** [`SearchSuggestionsProps`](/themes/sdk/reference/search/types#searchsuggestionsprops)

**Example**

```tsx
import { SearchSuggestions, useSearch } from '@poltura/theme-sdk/search';

export function SearchStart() {
  const search = useSearch({ popularSearches: ['Coffee', 'Tea'] });
  return (
    <SearchSuggestions
      items={search.suggestions}
      featured={search.featured}
      onPick={(suggestion) => search.setQuery(suggestion.label)}
    />
  );
}
```

## `SearchDialog` [#searchdialog]

A search icon button that opens its content in a dialog near the top of the page.

```ts
SearchDialog(props: SearchDialogProps): ReactElement
```

**Props:** [`SearchDialogProps`](/themes/sdk/reference/search/types#searchdialogprops)

**Example**

```tsx
import { SearchDialog, SearchInput, SearchResults, useSearch } from '@poltura/theme-sdk/search';

export function SearchOverlay() {
  const search = useSearch();
  return (
    <SearchDialog label="Search">
      <SearchInput value={search.query} onChange={search.setQuery} onSubmit={search.submit} />
      <SearchResults state={search} />
    </SearchDialog>
  );
}
```

## `SearchCombobox` [#searchcombobox]

The search field as a combobox: suggestions before typing, live results after, the arrow keys walking both and Enter opening the highlighted one.

```ts
SearchCombobox(props: SearchComboboxProps): ReactElement
```

**Props:** [`SearchComboboxProps`](/themes/sdk/reference/search/types#searchcomboboxprops)

**Example**

```tsx
import { SearchCombobox } from '@poltura/theme-sdk/search';

export function SidebarSearch() {
  return <SearchCombobox floating placeholder='Search the store' popularSearches={['Coffee']} />;
}
```

**See also:** [`useSearch`](/themes/sdk/reference/search/hooks#usesearch), [`SearchInput`](/themes/sdk/reference/search/parts#searchinput), [`SearchResults`](/themes/sdk/reference/search/parts#searchresults), [`SearchSuggestions`](/themes/sdk/reference/search/parts#searchsuggestions)