[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [SearchInputPlaceholder](./x-components.searchinputplaceholder.md) ## SearchInputPlaceholder variable . This component renders an animated placeholder for the search input in the shape of a list of iterating messages that can be configured to happen always or only when hovering the input **Signature:** ```typescript _default: import("vue").DefineComponent<{ messages: { type: PropType; required: true; }; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; animationIntervalMs: { type: NumberConstructor; default: number; }; animateOnlyOnHover: BooleanConstructor; }, { isVisible: import("vue").ComputedRef; message: import("vue").ComputedRef; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; required: true; }; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; animationIntervalMs: { type: NumberConstructor; default: number; }; animateOnlyOnHover: BooleanConstructor; }>>, { animation: string | Function | Record; animationIntervalMs: number; animateOnlyOnHover: boolean; }, {}> ```