atomic-search-box-recent-queries

This is for:

Developer

In this article

Properties
Shadow Parts

The atomic-search-box-recent-queries component can be added as a child of an atomic-search-box component, allowing for the configuration of recent query suggestions.

Go to the interactive example

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`icon`	`icon`	The SVG icon to display. Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. Use a value that starts with `assets://`, to display an icon from the Atomic package. Use a stringified SVG to display it directly.	`string \| undefined`
`maxWithQuery`	`max-with-query`	The maximum number of suggestions that will be displayed if the user has typed something into the input field.	`number`	`3`
`maxWithoutQuery`	`max-without-query`	The maximum number of suggestions that will be displayed initially when the input field is empty.	`number \| undefined`

icon

The SVG icon to display.

Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.
Use a value that starts with assets://, to display an icon from the Atomic package.
Use a stringified SVG to display it directly.

string | undefined

maxWithQuery

max-with-query

The maximum number of suggestions that will be displayed if the user has typed something into the input field.

number

3

maxWithoutQuery

max-without-query

The maximum number of suggestions that will be displayed initially when the input field is empty.

number | undefined

Shadow Parts

Part Description

Part	Description
`recent-query-clear`	The 'Clear' button for clearing recent queries .
`recent-query-title`	The 'Recent queries' title.

recent-query-clear

The 'Clear' button for clearing recent queries .

recent-query-title

The 'Recent queries' title.