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
`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. 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`

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.

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.
`input`	The search box input.
`loading`	The search box loading animation.
`submit-button`	The search box submit button.
`suggestion`	A suggested query correction.
`suggestions`	A list of suggested query corrections.
`wrapper`	The search box wrapper.

active-suggestion

The currently active suggestion.

clear-button

The button to clear the search box of input.

input

The search box input.

loading

The search box loading animation.

submit-button

The search box submit button.

suggestion

A suggested query correction.