ClearSearchInput

This component renders a button to delete the current query.

Slots

Name	Description	Bindings (name - type - description)
default	Required. Button content (text, icon, or both)	None

Events

This component emits the following events:

• UserPressedClearSearchBoxButton (opens new window)
• UserClearedQuery (opens new window)

See it in action

Here a basic example of how the clear button is rendered.

Type any term in the input field and then click the Clear button to try it out!

Play with default slot

In this example, a custom text is passed in the default slot instead of the default text to customize the button content.

Click the icon button to try it out!

Play with events

In this example, the UserPressedClearSearchBoxButton event is implemented, triggering the message “clear” when the clear search input button is clicked.

Click the Clear button to try it out!

Extending the component

Components can be combined and communicate with each other. Commonly, the ClearSearchInput component communicates with the SearchInput, deleting the search term entered.

Type any term in the input field and then click the icon button to try it out!