> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# search:box
export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
return
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.searchBox
[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.searchBox
[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1058
## Description
The Header Search directive
## Usage
as element:
```xml wrap theme={"dark"}
```
#### Parameters
| Param | Type | Details |
| ----------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| response | **Object** | A response object |
| query *(optional)* | **string** | The name of the query object |
| action *(optional)* | **string** | Page the search should take place on, results will not change automatically when an action is set. |
| placeholder *(optional)* | **string** | Placeholder for the search box |
| button-label *(optional)* | **string** | Label of the button. |
| delay *(optional)* | **number** | The delay before searching, not applicable if an action is set or instant search is being used. If a delay is greater then 1, results will load instantly on the page. |
| platform *(optional)* | **string** | The platform to use for social search |
| size *(optional)* | **string** | The size of the search box (tiny, small, large, huge, massive) |
| social *(optional)* | **boolean** | Whether to enable the social features of the search header. Defaults to false. If you require a customized [Bookmark List Tag](/docs/4/app-studio/reference/tags/lightning.directive.collaborateBookmarkList) or [Saved Query List Tag](/docs/4/app-studio/reference/tags/lightning.directive.collaborateSavedQueryList) you can add your own inside the search box tag and these will be used instead. |
| search-within-checkbox *(optional)* | **boolean** | Show the 'search within' option as a checkbox. This enables the query to retain the filters already applied when checked. If not checked the search is reset when a query is entered and the form submitted. If you want this functionality but don’t want a checkbox showing, you can use this attribute set to be false, and set `search-within-default-value` to be true - this uses a hidden field instead of a checkbox. |
| search-within-label *(optional)* | **boolean** | The label for the 'search within' checkbox. |
| search-within-default-value *(optional)* | **boolean** | Whether to enable 'search within' by default. The default is option is 'false'. |
| min-length *(optional)* | **number** | The number of characters before a search is performed, only applicable for instant-results, query suggestions, advanced search or when a delay without an action. Default: 2 |
| pre-search *(optional)* | **function** | Callback function that will be called on a search submit before the request is sent, receives the current URL state as a parameter that can be updated. |
## Example
#### Source
```xml wrap theme={"dark"}
