Skip to content
Search input
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 | Text input (default: Search) |
| Button color | Color scheme for the search button | • Primary |
| Layout | Controls the layout of input and button | • Stacked |
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 | • Small |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |