Skip to content

Search Input

A header search trigger that opens a modal search field with live autosuggest, scoped to the content types you choose. Best for: site-wide search in the header - pairs with the Search Results module on the destination page.

📷 Hero image

Target file: assets/img/search-input/hero.webp

The open search modal dialog centered over a dimmed page, showing the search field with a magnifier icon and a placeholder, and a live autosuggest list of results below it as the visitor types. Light modal surface with Dark field text and a Primary-colored icon and active suggestion. Captured at desktop width.

At a glance

Header Search Modal

  • What it does: renders a search icon that opens a modal dialog with a search form. As the visitor types, a live autosuggest list appears, and the form posts to the global search results page or a custom page you pick, scoped to the content types you enable.
  • Best used for: a header search that lets visitors search across pages, blog posts, knowledge articles, and case studies from anywhere on the site.
  • Not the right fit if: you need to render the results listing itself (use Search Results on the destination page).
  • 🔗 Live demo: (add demo link)

Add it to your page

  1. Add or select the Search Input module in your header.
  2. Under Results, keep the default global results page or turn on Use custom search results page and pick your Search results page.
  3. In Search results include, enable the content types you want searched.
  4. Optionally turn on the Button with an icon and label (this shows only when the theme header search button is enabled).
  5. Edit the Default text strings (placeholder, autosuggest messages, screen-reader labels) to match your voice.

Design recipes

Each recipe is a look plus the exact fields to reproduce it.

A minimal magnifier that opens the modal.

📷 Result

Target file: recipe-icon-only-trigger-default.webp

A close crop of the header showing just the magnifier search icon among the header actions, no label. Dark icon on a Light header background.

Field Set to
Button › Add icon off
Default text › Placeholder text your prompt

A labeled search button with an icon (theme header search button must be on).

📷 Result

Target file: recipe-button-with-icon.webp

A close crop of the header showing a labeled "Search" button with a magnifier icon on the left of the text, styled in the Primary color.

Field Set to
Button › Add icon on
Button › Title Search
Button › Icon side left or right
Styles › Button › Spacing between icon and text gap-m

Restricts results to specific content types.

📷 Result

Target file: recipe-scoped-search.webp

The open search modal with an autosuggest list showing only blog-post results for the typed query, demonstrating the narrowed content scope.

Field Set to
Search results include › Website pages off
Search results include › Blog posts on
Results › Group ID one content group (optional)

Routes searches to a chosen page instead of the global one.

📷 Result

Target file: recipe-custom-results-page.webp

The open search modal at the moment of submit, with the custom results page URL visible in the browser address bar to show searches routing to a chosen destination.

Field Set to
Results › Use custom search results page on
Results › Search results page a page with the Search Results module

"I want to..." quick reference

Goal Setting
Show a labeled search button Button › Add icon + set Title (also requires the theme header search button on)
Put the icon after the label Button › Icon side = right
Send searches to a specific page Results › Use custom search results page + Search results page
Search only blog posts Search results include › turn off others, keep Blog posts
Include knowledge base / case studies Search results include › Knowledge articles / Case studies
Limit to one content group Results › Group ID
Change the input placeholder Default text › Placeholder text
Reword the live suggestions header Default text › Autosuggest results message ([[search_term]] token)
Adjust the button icon-label gap Styles › Button › Spacing between icon and text

Field reference

The editor is organized into a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (24 fields total - expand each group as needed.)

Content tab

Button
Field Type Options Default
Add icon boolean - off
Icon icon - Magnifying Glass (SOLID)
Title text - Search
Icon side choice left / right left

The button appears only when the header search button is enabled in theme settings.

Results
Field Type Default
Use custom search results page boolean off
Search results page page -
Group ID number -

Search results include: Website pages (on), Landing pages (off), Blog posts (on), Knowledge articles (off), Case studies (off).

Default text

Editable strings for the modal and its accessibility layer:

  • Placeholder text, Autosuggest results message, Autosuggest no results message (use [[search_term]]).
  • Screen-reader labels for the field, button, and suggestions (use [[number_of_results]] / [[search_term]]).
  • Auto suggest example lines - sample suggestions shown only inside the editor preview, never on the live page.

Style tab

Styles - Button
Field Type Options Default
Spacing between icon and text choice gap-0 to gap-4xl gap-m

Applies when an icon is added to the button.

Tips & gotchas

Pair with Search Results

This module only sends the query. Put the Search Results module on the destination page so visitors land on an actual results listing.

The button needs the theme toggle

The labeled search button appears only when the header search button is enabled in your theme settings. If your button is not showing, check the theme first.

Editor-only samples

The auto-suggest example lines exist so the dropdown is visible while you build. They never render on the live page, so you can leave them as-is.