[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [HierarchicalFilter](./x-components.hierarchicalfilter.md) ## HierarchicalFilter variable Renders a hierarchical filter recursively, emitting the needed events when clicked. **Signature:** ```typescript _default: import("vue").DefineComponent; required: true; }; childrenAnimation: (ObjectConstructor | StringConstructor | FunctionConstructor)[]; clickEvents: PropType>; cssClasses: { type: PropType<(string | Dictionary)[]>; default: () => never[]; }; childrenFiltersClass: StringConstructor; filterItemClass: StringConstructor; }>, { innerClickEvents: import("vue").ComputedRef<{ ColumnsNumberProvided?: number | undefined; RenderedColumnsNumberChanged?: number | undefined; SuggestionsDisplayed?: import("@empathyco/x-types").Suggestion[] | undefined; TogglePanelStateChanged?: boolean | undefined; UserAcceptedAQuery?: string | undefined; UserAcceptedSpellcheckQuery?: string | undefined; UserClickedAResult?: import("@empathyco/x-types").Result | undefined; UserClickedADisplayResult?: import("@empathyco/x-types").Result | undefined; UserClickedCloseEventsModal?: void | undefined; UserClickedCloseModal?: string | undefined; UserClickedCloseX?: void | undefined; UserClickedOutOfMainModal?: void | undefined; UserClickedColumnPicker?: number | undefined; UserClickedOpenEventsModal?: void | undefined; UserClickedOpenModal?: string | undefined; UserClickedOpenX?: void | undefined; UserClickedOutOfEventsModal?: void | undefined; UserClickedOutOfModal?: string | undefined; UserClickedPanelToggleButton?: string | undefined; UserClickedResultAddToCart?: import("@empathyco/x-types").Result | undefined; UserClickedAResultRating?: import("@empathyco/x-types").Result | undefined; UserClickedScrollToTop?: string | undefined; UserOpenXProgrammatically?: void | undefined; UserPressedArrowKey?: import("../../../..").ArrowKey | undefined; UserReachedEmpathizeTop?: void | undefined; UserSelectedAResultVariant?: { result: import("@empathyco/x-types").Result; variant: import("@empathyco/x-types").ResultVariant; level: number; queryPreviewHash: import("vue").ComputedRef | null; } | undefined; UserSelectedASuggestion?: import("@empathyco/x-types").Suggestion | undefined; SnippetCallbackExecuted?: { event: import("../../../../wiring/events.types").XEvent; callbackReturn: unknown; payload: import("../../../..").ExtractPayload; metadata: import("../../../..").WireMetadata; } | undefined; ModuleRegistered?: keyof import("../../../x-modules.types").XModulesTree | undefined; DeviceProvided?: string | null | undefined; EmpathizeClosed?: void | undefined; EmpathizeOpened?: void | undefined; UserClosedEmpathize?: void | undefined; UserChangedExtraParams?: Dictionary | undefined; ExtraParamsChanged?: Dictionary | undefined; ExtraParamsProvided?: Dictionary | undefined; ExtraParamsInitialized?: Dictionary | undefined; FacetsGroupChanged?: import("../..").FacetsGroup | undefined; FacetsGroupProvided?: import("../..").FacetsGroup | undefined; PreselectedFiltersProvided?: import("@empathyco/x-types").RawFilter[] | undefined; SelectedFiltersChanged?: Filter[] | undefined; SelectedFiltersForRequestChanged?: Filter[] | undefined; UserChangedSelectedFilters?: Filter[] | undefined; UserClickedAFilter?: Filter | undefined; UserClickedAHierarchicalFilter: HierarchicalFilterModel; UserClickedANumberRangeFilter?: import("@empathyco/x-types").NumberRangeFilter | undefined; UserClickedASimpleFilter?: import("@empathyco/x-types").SimpleFilter | undefined; UserClickedAllFilter?: [string | number] | undefined; UserModifiedEditableNumberRangeFilter?: import("@empathyco/x-types").EditableNumberRangeFilter | undefined; UserClickedClearAllFilters?: Array | undefined; FacetsQueryChanged?: string | undefined; HistoryQueriesDisplayed?: import("@empathyco/x-types").HistoryQuery[] | undefined; HistoryQueriesQueryChanged?: string | undefined; HistoryQueriesStorageKeyChanged?: string | undefined; SessionHistoryQueriesChanged?: import("@empathyco/x-types").HistoryQuery[] | undefined; UserPressedClearHistoryQueries?: void | undefined; UserPressedRemoveHistoryQuery?: import("@empathyco/x-types").HistoryQuery | undefined; UserSelectedAHistoryQuery?: import("@empathyco/x-types").HistoryQuery | undefined; UserClickedEnableHistoryQueries?: void | undefined; UserClickedDisableHistoryQueries?: void | undefined; UserClickedConfirmDisableHistoryQueries?: void | undefined; UserClickedDismissDisableHistoryQueries?: void | undefined; IdentifierResultsChanged?: import("@empathyco/x-types").Result[] | undefined; IdentifierResultsRequestUpdated?: import("@empathyco/x-types").IdentifierResultsRequest | null | undefined; UserClickedAIdentifierResult?: import("@empathyco/x-types").Result | undefined; NextQueriesChanged?: import("@empathyco/x-types").NextQuery[] | undefined; NextQueriesDisplayed?: import("@empathyco/x-types").NextQuery[] | undefined; NextQueriesRequestUpdated?: import("@empathyco/x-types").NextQueriesRequest | null | undefined; UserSelectedANextQuery?: import("@empathyco/x-types").NextQuery | undefined; NextQueryPreviewMountedHook?: string | undefined; PopularSearchesRequestUpdated?: import("@empathyco/x-types").PopularSearchesRequest | undefined; PopularSearchDisplayed?: import("@empathyco/x-types").Suggestion[] | undefined; UserSelectedAPopularSearch?: import("@empathyco/x-types").Suggestion | undefined; QueryPreviewRequestUpdated?: import("@empathyco/x-types").SearchRequest | undefined; UserAcceptedAQueryPreview?: import("../../../queries-preview").QueryPreviewInfo | undefined; QueryPreviewUnselected?: Dictionary | undefined; QueryPreviewMounted?: string | undefined; QueryPreviewUnmounted?: { queryPreviewHash: string; cache: boolean; } | undefined; QueriesPreviewChanged?: Dictionary | undefined; QueryPreviewResultReceived?: import("../../../queries-preview").QueryPreviewItem | undefined; QuerySuggestionsChanged?: import("@empathyco/x-types").Suggestion[] | undefined; QuerySuggestionsRequestUpdated?: import("@empathyco/x-types").QuerySuggestionsRequest | null | undefined; UserSelectedAQuerySuggestion?: import("@empathyco/x-types").Suggestion | undefined; RecommendationsChanged?: import("@empathyco/x-types").Result[] | undefined; RecommendationsRequestUpdated?: import("@empathyco/x-types").RecommendationsRequest | undefined; UserClickedARecommendation?: import("@empathyco/x-types").Result | undefined; RelatedTagsChanged?: import("@empathyco/x-types").RelatedTag[] | undefined; RelatedTagsRequestUpdated?: import("@empathyco/x-types").RelatedTagsRequest | null | undefined; SelectedRelatedTagsChanged?: import("@empathyco/x-types").RelatedTag[] | undefined; UserDeselectedARelatedTag?: import("@empathyco/x-types").RelatedTag | undefined; UserPickedARelatedTag?: import("@empathyco/x-types").RelatedTag | undefined; UserSelectedARelatedTag?: import("@empathyco/x-types").RelatedTag | undefined; ScrollRestoreSucceeded?: void | undefined; ScrollRestoreFailed?: void | undefined; UserAlmostReachedScrollEnd?: boolean | undefined; UserChangedScrollDirection?: import("../../../..").ScrollDirection | undefined; UserReachedScrollEnd?: boolean | undefined; UserReachedScrollStart?: boolean | undefined; UserScrolled?: number | undefined; UserScrolledToElement?: string | undefined; SearchBoxQueryChanged?: string | undefined; UserHoveredInSearchBox?: void | undefined; UserHoveredOutSearchBox?: void | undefined; UserBlurredSearchBox?: void | undefined; UserClearedQuery?: string | undefined; UserClickedSearchBox?: void | undefined; UserFocusedSearchBox?: void | undefined; UserIsTypingAQuery?: string | undefined; UserPressedClearSearchBoxButton?: void | undefined; UserPressedEnterKey?: string | undefined; UserPressedSearchButton?: string | undefined; UserTalked?: string | undefined; FacetsChanged?: import("@empathyco/x-types").Facet[] | undefined; PageChanged?: number | undefined; PartialResultsChanged?: import("@empathyco/x-types").PartialResult[] | undefined; ReloadSearchRequested?: void | undefined; ResultsChanged?: import("@empathyco/x-types").Result[] | undefined; SearchRequestChanged?: import("../../../search").InternalSearchRequest | null | undefined; SearchRequestUpdated?: import("../../../search").InternalSearchRequest | null | undefined; SearchResponseChanged?: import("../../../search").InternalSearchResponse | undefined; SearchTaggingChanged?: import("@empathyco/x-types").TaggingRequest | undefined; SortChanged?: string | undefined; SpellcheckChanged?: string | undefined; UserClickedASort?: string | undefined; SelectedSortProvided?: string | undefined; UserClickedPartialQuery?: string | undefined; UserReachedResultsListEnd?: void | undefined; UserClickedARedirection?: import("@empathyco/x-types").Redirection | undefined; UserClickedAPromoted?: import("@empathyco/x-types").Promoted | undefined; UserClickedABanner?: import("@empathyco/x-types").Banner | undefined; UserClickedAbortARedirection?: void | undefined; UserSelectedAPage?: number | undefined; SemanticQueryRequestUpdated?: import("@empathyco/x-types").SemanticQueriesRequest | null | undefined; SemanticQueriesResponseChanged?: import("@empathyco/x-types").SemanticQuery[] | undefined; UserSelectedASemanticQuery?: import("@empathyco/x-types").SemanticQuery | undefined; ConsentChanged?: boolean | undefined; ConsentProvided?: boolean | undefined; PDPIsLoaded?: string | undefined; ResultURLTrackingEnabled?: string | undefined; SearchTaggingReceived?: import("@empathyco/x-types").TaggingRequest | undefined; TrackableElementDisplayed?: import("@empathyco/x-types").Taggable | undefined; UserClickedPDPAddToCart?: string | undefined; TaggingConfigProvided?: import("../../../tagging").TaggingConfig | undefined; ExperienceControlsEventsChanged?: Partial | undefined; ExperienceControlsRequestUpdated?: import("@empathyco/x-types").ExperienceControlsRequest | null | undefined; ParamsLoadedFromUrl?: import("../../../../types").UrlParams | undefined; ExtraParamsLoadedFromUrl?: Dictionary | undefined; PushableUrlStateUpdated?: import("../../../../types").UrlParams | undefined; ReplaceableUrlStateUpdated?: import("../../../../types").UrlParams | undefined; RelatedPromptsRequestUpdated?: import("@empathyco/x-types").RelatedPromptsRequest | null | undefined; SelectedRelatedPromptChanged?: number | undefined; UserSelectedARelatedPrompt?: number | undefined; UserSelectedARelatedPromptQuery?: number | undefined; UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined; UserClickedARelatedPromptAdd2Cart?: import("@empathyco/x-types").Result | undefined; RelatedPromptsResponseChanged?: import("@empathyco/x-types").RelatedPrompt[] | undefined; RelatedPromptsUnmounted?: void | undefined; ReloadRelatedPromptsRequested?: void | undefined; AiSuggestionsRequestUpdated?: import("@empathyco/x-types").AiSuggestionsRequest | null | undefined; AiSuggestionsSearchRequestUpdated?: import("@empathyco/x-types").AiSuggestionsSearchRequest | null | undefined; AiSuggestionsSearchChanged?: import("@empathyco/x-types").AiSuggestionSearch[] | undefined; UserClickedAiOverviewExpandButton?: boolean | undefined; UserClickedAnAiOverviewResult?: import("@empathyco/x-types").Result | undefined; AiComponentMounted?: void | undefined; }>; innerCssClasses: import("vue").ComputedRef<(string | Dictionary)[]>; renderedChildrenFilters: import("vue").ComputedRef; getChildFilterClickEvents: (childFilter: HierarchicalFilterModel) => Partial; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; required: true; }; childrenAnimation: (ObjectConstructor | StringConstructor | FunctionConstructor)[]; clickEvents: PropType>; cssClasses: { type: PropType<(string | Dictionary)[]>; default: () => never[]; }; childrenFiltersClass: StringConstructor; filterItemClass: StringConstructor; }>> & Readonly<{}>, { cssClasses: (string | Dictionary)[]; }, {}, { FiltersList: import("vue").DefineComponent<{}, {}, any>; RenderlessFilter: import("vue").DefineComponent<{}, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```