> For the complete documentation index, see [llms.txt](https://docs.search.io/developer-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.search.io/developer-documentation/fundamentals/search-ui-widgets/takeover-search-input-widget.md).

# Takeover Search Input Widget

The Takeover Search Input widget allows users to inject Search.io search experience into an existing search input field while keeping the current appearance.

![Takeover Search Input Widget](https://1961411626-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH7uk7r2cdqH2TWXzeuDD%2Fuploads%2F20XglsZfQEcYK3QjXjS2%2Fimage.png?alt=media\&token=3a54776c-da51-4cf0-932b-7be853e0d905)

See the example in [Codesandbox](https://codesandbox.io/s/takeover-input-widget-76okt).

## Configuration

The following options can be configured when creating the takeover search input widget.

| Name                      | Type                                                            | Default                                                               | Description                                                                                                |
| ------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `selector`                | `string`                                                        | `'form[action="/search"] input[name="q"]' if the preset is 'shopify'` | The CSS selector of the input being taken over.                                                            |
| `mode`                    | `'standard'` \| `'typeahead'` \| `'suggestions'` \| `'results'` | `'results'`                                                           | The mode of the input. For details, see [Input props](https://react.docs.search.io/search-ui/input#props). |
| `omittedElementSelectors` | `string` \| `string[]`                                          | `_`                                                                   | A single or a list of CSS selector of elements to be removed when the widget has mounted.                  |

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

See the example in [Codesandbox](https://codesandbox.io/s/takeover-input-widget-76okt).