List
The List Filter is a simple but powerful component that displays all available items in a vertical list. Users can filter associated charts or components by selecting one or multiple items from the list. Multi-selection is supported by holding the CTRL key (or equivalent on Mac).
This component is useful when all possible values should be shown explicitly to the user, ensuring transparency and ease of selection.
Best Situations to Use List Filter
Use a List Filter when you need to:
Display all available filter values to the user without requiring a dropdown.
Enable multi-selection filtering in a clear and intuitive format.
Provide side-by-side item visibility for easy scanning.
Support list swap functionality for managing selected and unselected items.
Example use cases:
Displaying all product categories for filtering sales charts.
Listing all regions, cities, or branches for quick multi-region analysis.
Allowing users to select multiple departments in HR or organizational dashboards.
Properties of the List Filter
The List Filter supports a wide range of configuration options, grouped into property panels.
Background
Background Color
Sets the background fill color of the list.
Opacity
Adjusts background transparency (0 = fully transparent, 100 = fully opaque).
Shadow
Toggles shadow effects for depth.
Shadow Color
Sets the color of the shadow.
Shadow Transparency
Adjusts shadow visibility.
General
Component Name
Assigns a unique identifier for easy reference.
Show Search
Enables search functionality for long lists.
Left, Top
Sets the component’s position on the canvas.
Height, Width
Defines the component dimensions.
Initial Visibility
Determines if the filter is visible on initial preview.
List Swap
Allows items to be moved between lists (selected vs. unselected).
Multiple Selection
Enables selecting multiple items at once.
Row Height
Defines the height of individual rows for readability.
Action Bar Height
Adjusts the height of the action bar that holds icons.
Action Icons Color
Customizes the color of action icons.
Selected Index
Highlights a specific item by default.
Auto Update GV
Automatically refreshes linked global variables when selections change.
Notify GV Update
Notifies linked global variables of updates.
Public Filter
Makes the filter accessible for use across components or users.
Title
Title Box Color
Defines the background color of the title box.
Show Title Box
Toggles the visibility of the title box.
Show Title
Enables/disables title text.
Title Bar Height
Adjusts the title bar height.
Description
Adds supplementary descriptive text below the title.
Font (Color, Size, Style, Weight, Family)
Customizes typography of the title.
Align
Aligns title text (left, center, right).
Text Decoration
Adds underline, overline, or strikethrough effects.
Style
Font Color
Sets the color of list item text.
Font Size
Defines font size for list items.
Font Style
Sets text appearance (e.g., italic).
Font Weight
Adjusts text thickness.
Font Family
Sets the typeface to match branding.
Chrome Color Opacity
Controls transparency of chrome elements.
Chrome Color
Defines color of chrome UI elements around the list.
Roll Over Color
Sets the hover background color for list items.
Selection Color
Sets background color for selected items.
Selection Font Color
Sets text color of selected items for readability.
Border
Adjusts thickness and style of the component’s border.
Border Color
Sets the border color.
Variants
The List Filter can be customized into different variants depending on configuration:
Default List – plain list with single or multiple selection.
List with Search – supports quick lookup for long lists.
List Swap Mode – enables moving items between lists.
Styled List – fully customized with background, border, and hover effects.
Notes
Use Show Search for lists with more than 10–15 values.
For better user experience, adjust Row Height to balance readability and space.
Selection Color and Selection Font Color should provide strong contrast for accessibility.