[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ClearSearchInput](./x-components.clearsearchinput.md) ## ClearSearchInput variable This component renders a button to delete the current query. **Signature:** ```typescript _default: import("vue").DefineComponent<{}, { dynamicClasses: import("vue").ComputedRef; clearSearchInputEvents: import("vue").Ref<{ UserPressedClearSearchBoxButton: undefined; }, { UserPressedClearSearchBoxButton: undefined; } | { UserPressedClearSearchBoxButton: undefined; }>; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, { BaseEventButton: import("vue").DefineComponent<{}, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ``` ## Remarks A button that when pressed emits the [SearchBoxXEvents.UserPressedClearSearchBoxButton](./x-components.searchboxxevents.userpressedclearsearchboxbutton.md) and [SearchBoxXEvents.UserClearedQuery](./x-components.searchboxxevents.userclearedquery.md) events, expressing the user intention to clear the current query. It also adds `x-clear-search-input--has-empty-query` as class when there is no query.