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

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) Visible when show button is true
Button color	Color scheme for the search button	• Primary • Secondary (default) • Tertiary • Neutral • Plain • Outline • Inverted outline • Blur Visible when show button is true
Layout	Controls the layout of input and button	• Stacked • Inline (default) Visible when show button is true

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 • Medium (default) • Large

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only