Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

SearchBarInput container

The SearchBarInput container provides a search input interface with real-time search suggestions and debounced search functionality. It handles user input, triggers search requests, and manages loading and error states.

Configurations

The SearchBarInput container provides the following configuration options:

OptionTypeReq?Description
searchQuerystringNoInitial search query value to pre-populate the input field.
minimumQueryLengthnumberNoMinimum number of characters required before triggering search suggestions. Default: 3.
debounceDelaynumberNoDelay in milliseconds before executing search after user stops typing. Default: 300.
defaultQueryPlaceholderstringNoPlaceholder text displayed in the search input field.
routeSearchfunctionNoCallback function called when search is executed. Receives the search query as a parameter.
slotsobjectNoAllows passing custom components for InputForm and SearchIcon slots.

Slots

The SearchBarInput container supports the following slots:

  • InputForm - Replaces the entire search input form component
  • SearchIcon - Customizes the search icon displayed in the input field

Features

The container uses debounced search functionality to prevent excessive API calls while the user is typing. The debounce delay can be configured via the debounceDelay prop.

Minimum query length

Search suggestions are only triggered when the query length meets or exceeds the minimumQueryLength threshold, helping to reduce unnecessary API calls for very short queries.

Loading and error states

The container manages loading states during search operations and handles error scenarios, providing feedback to the user through the search input component.

Event integration

The container integrates with the Adobe Commerce event bus to emit search-related events that other components can listen to and respond accordingly.

Example

import { SearchBarInput } from '@adobe-commerce/storefront-search-dropin';


function SearchPage() {
  const handleRouteSearch = (query) => {
    // Navigate to search results page
    window.location.href = `/search?q=${encodeURIComponent(query)}`;
  };


  return (
    <SearchBarInput
      searchQuery=""
      minimumQueryLength={2}
      debounceDelay={250}
      defaultQueryPlaceholder="Search products..."
      routeSearch={handleRouteSearch}
      slots={{
        SearchIcon: {
          component: CustomSearchIcon
        }
      }}
    />
  );
}