atomic-search-box

This is for:

Developer

In this article

Introduction
User Experience and Best Practices
Properties
Shadow Parts

The atomic-search-box component creates a search box with built-in support for suggestions.

Go to the interactive example

Introduction

The Search Box component is the core of a search page, allowing the user to type and submit a query. There is built-in support for query suggestions in the Search Box component.

User Experience and Best Practices

Guidelines

It’s important to have it visible and clear to the user, best practices suggest that it should be in the top-center or upper-right section.

Reference

Search Best Practices Part 1 - The Search Box

Search: Visible and Simple

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`disableSearch`	`disable-search`	Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.	`boolean`	`false`
`numberOfQueries`	`number-of-queries`	The amount of queries displayed when the user interacts with the search box. By default, a mix of query suggestions and recent queries will be shown. You can configure those settings using the following components as children: - atomic-search-box-query-suggestions - atomic-search-box-recent-queries	`number`	`8`
`redirectionUrl`	`redirection-url`	Defining this option makes the search box standalone (see Use a Standalone Search Box). This option defines the default URL the user should be redirected to, when a query is submitted. If a query pipeline redirect is triggered, it will redirect to that URL instead (see query pipeline triggers).	`string \| undefined`
`suggestionTimeout`	`suggestion-timeout`	The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won’t be shown.	`number`	`400`

disableSearch

disable-search

Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.

boolean

false

numberOfQueries

number-of-queries

The amount of queries displayed when the user interacts with the search box. By default, a mix of query suggestions and recent queries will be shown. You can configure those settings using the following components as children: - atomic-search-box-query-suggestions - atomic-search-box-recent-queries

number

8

redirectionUrl

redirection-url

Defining this option makes the search box standalone (see Use a Standalone Search Box).

This option defines the default URL the user should be redirected to, when a query is submitted. If a query pipeline redirect is triggered, it will redirect to that URL instead (see query pipeline triggers).

string | undefined

suggestionTimeout

suggestion-timeout

The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won’t be shown.

number

400

Shadow Parts

Part Description

Part	Description
`active-suggestion`	The currently active suggestion.
`clear-button`	The button to clear the search box of input.
`clear-icon`	The clear button’s icon.
`input`	The search box input.
`instant-result-show-all-button`	The button to show all items for the current instant results search rendered by an `atomic-search-box-instant-results` component.
`instant-results-item`	An instant result rendered by an `atomic-search-box-instant-results` component.
`loading`	The search box loading animation.
`submit-button`	The search box submit button.
`submit-icon`	The search box submit button’s icon.
`suggestion`	A suggested query correction.
`suggestion-divider`	An item in the list that separates groups of suggestions.
`suggestion-with-query`	An item in the list that will update the search box query.
`suggestions`	A list of suggested query corrections on each panel.
`suggestions-left`	A list of suggested query corrections on the left panel.
`suggestions-right`	A list of suggested query corrections on the right panel.
`suggestions-wrapper`	The wrapper that contains suggestions panels.
`wrapper`	The search box wrapper.

active-suggestion

The currently active suggestion.

clear-button

The button to clear the search box of input.

clear-icon

The clear button’s icon.

input

The search box input.

instant-result-show-all-button

The button to show all items for the current instant results search rendered by an atomic-search-box-instant-results component.

instant-results-item

An instant result rendered by an atomic-search-box-instant-results component.

loading

The search box loading animation.

submit-button

The search box submit button.

submit-icon

The search box submit button’s icon.

suggestion

A suggested query correction.

suggestion-divider

An item in the list that separates groups of suggestions.

suggestion-with-query

An item in the list that will update the search box query.

suggestions

A list of suggested query corrections on each panel.

suggestions-left

A list of suggested query corrections on the left panel.

suggestions-right

A list of suggested query corrections on the right panel.

suggestions-wrapper

The wrapper that contains suggestions panels.

wrapper

The search box wrapper.