[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [SearchInput](./x-components.searchinput.md) ## SearchInput variable This component renders an input field that allows the user to type a query. It also reacts to query changes through event listening. **Signature:** ```typescript _default: import("vue").DefineComponent, { query: import("vue").ComputedRef; inputElement: import("vue").Ref; emitUserHoveredInSearchBox: () => void; emitUserHoveredOutSearchBox: () => void; emitUserBlurredSearchBox: () => void; emitUserClickedSearchBox: () => void; emitUserFocusedSearchBox: () => void; emitUserIsTypingAQueryEvents: () => void; emitUserPressedEnterKey: () => void; emitUserPressedArrowKey: (event: KeyboardEvent) => void; preventSpecialKey: (event: InputEvent) => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly> & Readonly<{}>, { maxLength: number; autofocus: boolean; instant: boolean; instantDebounceInMs: number; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```