# Search input widget

The search input widget is typically used in a global template and positioned in the header of the page. It renders a search input field as well as search suggestions, depending on the mode.

![Search input widget](https://1961411626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH7uk7r2cdqH2TWXzeuDD%2Fuploads%2FN8b9nh6Of4wLuMpQQxIu%2Fimage.png?alt=media\&token=7549a7de-0364-4fb1-a7a9-6844f31ec973)

See the example in [Codesandbox](https://codesandbox.io/s/search-input-widget-mui1w).

## Configuration

The following options can be configured when creating the Search Input Widget.

| Name       | Type                                                            | Default                                | Description                                                                                                                                                                                                                                             |
| ---------- | --------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`     | `'standard'` \| `'typeahead'` \| `'suggestions'` \| `'results'` | `'suggestions'`                        | The mode of the input. For details, see [Input props](https://react.docs.search.io/search-ui/input#props).                                                                                                                                              |
| `redirect` | `{url: string, queryParamName: string}`                         | `{url: 'search', queryParamName: 'q'}` | Options to set the redirect URL and the name of the search query param, normally, the destination is where the [Search Results Widget](https://docs.search.io/developer-documentation/fundamentals/search-ui-widgets/search-results-widget) is located. |

```html
<div data-widget="search-input">
  <script type="application/json">
    {
      "account": "1594153711901724220",
      "collection": "bestbuy",
      "pipeline": "query",
      "selector": "#search-input",
      "mode": "suggestions",
      "redirect": {
        "url": "search.html",
        "queryParamName": "q"
      }
    }
  </script>
</div>
<script async src="https://cdn.search.io/embed/1/loader.js"></script>
```