---
title: BoxHeader component (Deprecated)
slug: '1166'
canonical_url: https://docs.coveo.com/en/1166/
collection: coveo-for-salesforce
source_format: adoc
---
# BoxHeader component (Deprecated)
> **Deprecated**
>
> This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

The `BoxHeader` component takes care of instantiating a [`Searchbox`](https://coveo.github.io/search-ui/components/searchbox.html) component with preconfigured options and a placeholder.
Optionally, this component can also display a Remove context checkbox.
You should normally place this component at the top of your box.

## Options

### includeSearchBox

Specifies whether to initialize a [`Searchbox`](https://coveo.github.io/search-ui/components/searchbox.html) component.
The default value is `true`.

```xml
<div data-include-search-box='true'></div>
```

If this option is set to `true`, the component initializes a `Searchbox` component with the following overridden default configuration options:

- [`enableSearchAsYouType`](https://coveo.github.io/search-ui/components/querybox.html#options.enablesearchasyoutype): `true`

- [`searchAsYouTypeDelay`](https://coveo.github.io/search-ui/components/querybox.html#options.searchasyoutypedelay): `300`

- [`enableOmnibox`](https://coveo.github.io/search-ui/components/searchbox.html#options.enableomnibox): `false`

All other [Querybox](https://coveo.github.io/search-ui/components/querybox.html) and [Omnibox](https://coveo.github.io/search-ui/components/omnibox.html) options retain their original default values.

You can specify additional or different options for the `Searchbox` in the `BoxHeader` markup or when initializing the framework.

All `Querybox` options are available.
`Omnibox` options become available if you set `enableOmnibox` to `true`.

**Example**

[,xml]
```
$('#MyBox').coveo('initBox', {
    SearchBox : {
        // You can override the Searchbox default values.
        searchAsYouTypeDelay : 650
        // You can instantiate an Omnibox instead of a Querybox by setting enableOmnibox to true.
        enableOmnibox : true
        // Querybox options are available one way or another, since the Omnibox component extends the Querybox.
        enableWildcards : true
        // You can access Omnibox options as well if enableOmnibox is true.
        enableFieldAddon : true
    }
})

[ ... ]

// If you specify different values for the same option in the initialization function and in the component markup, the markup value will override the initialization value.

<div class='CoveoBoxHeader' data-enable-search-as-you-type='false' data-enable-omnibox='false'></div>
```

> **Note**
>
> Component markup configuration applies after initialization configuration.
> 
> This means that in the previous example, the `BoxHeader` component would actually instantiate a `Querybox` and disable the search-as-you-type feature.
> This implies that the `searchAsYouTypeDelay` initialization configuration has no effect, since this option requires the `enableSearchAsYouType` option to be `true` to be applied.
> The [`enableFieldAddon`](https://coveo.github.io/search-ui/components/omnibox.html#options.enablefieldaddon) configuration in the initialization function also becomes useless, as this option is specific to the `Omnibox` component.

### placeholder

If [`includeSearchBox`](https://docs.coveo.com/en/1166#includesearchbox) is `true`, specifies the placeholder you want to set in the `Searchbox`.

The default value is the localized string for Search.

```xml
<div data-placeholder='<MY_SEARCHBOX_PLACEHOLDER>'></div>
```

Where you can replace `<MY_SEARCHBOX_PLACEHOLDER>` by the placeholder to set in the `Searchbox`.

### allowNonContextualSearch

If [`includeSearchBox`](https://docs.coveo.com/en/1166#includesearchbox) is `true`, specifies whether to display a **Remove context** checkbox when the end user starts typing in the `Searchbox` input.

When checked, this checkbox removes the part of the query expression that might have been added by each query component.

The default value is `false`.

```xml
<div data-allow-non-contextual-search='false'></div>
```

**Example**

When the end user opens a case about `Power Generator`, items related to `Power Generator` are shown.
If the user starts typing in the Searchbox input while the `allowNonContextualSearch` option is set to `true`, a checkbox will appear to allow the user to disable the query that shows items related to `Power Generator`, allowing them to search outside of the Power Generator scope.

## Methods

This component doesn't provide any methods.

## Usage

```xml
<div class='CoveoBoxHeader'></div>
```