# Search input

<figure><img src="/files/XmJzIycoHisn568NiiVs" alt=""><figcaption></figcaption></figure>

## Overview

A customizable search form component that provides a responsive search interface with various styling and layout options. Features include configurable button display, search overlay support, and flexible padding controls.

## Common use cases

* Use small size for header/navigation integrations
* Enable search overlay for a more immersive search experience
* Consider showing the search button for better accessibility on mobile devices
* Match button color scheme with your site's design system
* Adjust padding settings based on surrounding content

## Block settings

### General

| Setting                | Description                 | Options                   |
| ---------------------- | --------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |

### Content

| Setting               | Description                                       | Options                                                                                                                                                              |
| --------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Placeholder           | Placeholder text for the search input             | Text input (default: Search for product)                                                                                                                             |
| Enable search overlay | Opens search results in an overlay when enabled   | Checkbox (default: true)                                                                                                                                             |
| Show button           | Displays a submit button next to the search input | Checkbox (default: false)                                                                                                                                            |
| Button label          | Label text for the search button                  | <p>Text input (default: Search)<br><br>Visible when show button is true</p>                                                                                          |
| Button color          | Color scheme for the search button                | <p>• Primary<br>• Secondary (default)<br>• Tertiary<br>• Neutral<br>• Plain<br>• Outline<br>• Inverted outline<br>• Blur<br><br>Visible when show button is true</p> |
| Layout                | Controls the layout of input and button           | <p>• Stacked<br>• Inline (default)<br><br>Visible when show button is true</p>                                                                                       |

### Spacing

| Setting                   | Description                                    | Options                   |
| ------------------------- | ---------------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the search form | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the search form        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the search form     | Checkbox (default: false) |

### Style

| Setting | Description                           | Options                                         |
| ------- | ------------------------------------- | ----------------------------------------------- |
| Size    | Controls the size of the search input | <p>• Small<br>• Medium (default)<br>• Large</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/navigation/search/search-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.