atomic-search-box
atomic-search-box
The atomic-search-box component creates a search box with built-in support for suggestions.
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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
|
|
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 |
|
|
Shadow Parts
| Part | Description |
|---|---|
|
The currently active suggestion. |
|
The button to clear the search box of input. |
|
The search box input. |
|
The search box loading animation. |
|
The search box submit button. |
|
A suggested query correction. |
|
A list of suggested query corrections. |
|
The search box wrapper. |
Very useful
Not really
Very useful
Not really