ClearSearchInput

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
  • UserClearedQuery

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!

We are cookie-less

This is a cookie-free area. Who needs cookies when you can have trust? Feel free to browse our site and the only cookies you need to worry about are the edible kind.