Hierarchical Combobox

The Hierarchical Combo Box Filter combines the functionality of a Combo Box and Check Box but arranges its items in a hierarchical structure (e.g., Country → State → City). This allows users to expand categories and make multi-level, multi-item selections simultaneously.

It is particularly useful when filtering across nested categories or drill-down dimensions, enabling precise control without overwhelming the interface.

Best Situations to Use Hierarchical Combo Box

Use a Hierarchical Combo Box Filter when you need to:

  • Present nested or grouped values (e.g., Continent → Country → City).

  • Allow users to select multiple values across different hierarchy levels.

  • Enable targeted filtering instead of displaying aggregated data for all items.

  • Provide a structured, expandable dropdown for large categorical datasets.

Example use cases:

  • Selecting one or more cities for a sales or demographic chart.

  • Filtering departments and sub-departments in an organization chart.

  • Analyzing product categories and subcategories in an e-commerce dashboard.

Properties of the Hierarchical Combo Box Filter

The component has configurable property groups for layout, style, and theming.

Background

Property
Description

Shadow

Enables a shadow effect for depth.

Shadow Color

Defines the shadow color.

Shadow Transparency

Adjusts shadow visibility from subtle to prominent.


Style

Property
Description

Rollover Color

Sets the hover background color for interactive feedback.

Selection Color

Highlights selected items in the hierarchy.

Background Color

Defines the main component background color.

Panel Background Color

Sets background color of the panel area.

Border Radius

Adjusts the corner roundness of the component.

Panel Border Radius

Sets corner curvature specifically for the panel.

Font Size

Determines dropdown text size.

Font Style

Sets text styling (normal, italic).

Font Weight

Controls text thickness (light → bold).

Font Family

Selects the typeface for consistency with brand theme.

Font Color

Sets the main text color.

Panel Font Color

Defines text color specifically inside the panel.

Text Decoration

Adds underlines, overlines, or strikethrough.

Advance Theme

Enables advanced theming for deeper customization.

Variants

The Hierarchical Combo Box Filter can be customized into different variants by changing its properties, such as:

  • Nested single-level selection (e.g., only countries).

  • Nested multi-level selection (e.g., countries + cities).

  • Multi-select with checkboxes across hierarchy levels.

Notes

  • Best suited for large, structured datasets where values are organized hierarchically.

  • Use multi-select mode for comparative analysis across categories.

  • When many nodes exist, consider enabling search functionality for better usability.