FilterSelect

Features

• Search functionality
• Single/Multiple selection modes
• Hierarchical data support
• Controlled and uncontrolled modes
• Customizable UI elements
• Selection cascade support

Basic Usage

# FilterSelect component
dmc.FilterSelect(
    id="unique-id",
    data=categories,  # Data to filter from
    value=[],  # Initially no selections
    searchTerm="",  # Initial search term
    # Required props from interface
    selectionMode="multiple",  # Allow multiple selections
    dataModel="tree",  # Flat list of data
    # Control flags
    showSelectedOnlyToggle=True,  # Show toggle for selected items
    showClearButton=True,  # Show clear selection button
    showSelectAllButton=True,  # Show select all button
    # Optional but useful props
    showSearch=True,  # Show search input
    showActionButtons=True,  # Show Apply/Cancel buttons
    size="small",
),

Props

Category Structure

Each entry in the data array should have the following structure:

{
  "id": "unique_id",
  "name": "Category Name",
  "disabled": false,
  "children": [
    {
      "id": "child_id",
      "name": "Child Category",
      "disabled": false,
      "children": [...]
    },
    ...
  ]
}

Required Props

Name	Type	Description
data	array	The data to be displayed in the filter select. Expects an object with Category
dataModel	list | tree	Defines the data structure between a flat list or an hierarchical tree of items
selectionMode	single | multiple	Defines the selection mode between single (with radio button) or multiple (checkboxes)

Optional Props

Name	Type	Default	Description
autoApplyOnSingleSelect	boolean	false	Automatically apply selection and close dropdown in single selection mode
chipLabelMaxWidth	string	"100px"	Maximum width of chip labels
collapseIdenticalPaths	boolean	false	Whether to collapse identical paths in tree mode. Only works when dataModel is "tree".
enableSelectionCascade	boolean	true	Enables cascading selection in hierarchical data
footerMessage	string	undefined	Message to display in the footer of the dropdown
helperText	string	undefined	Helper text below component input
isLoading	boolean	false	Shows loading state
label	string	undefined	Label displayed above the filter select
limitTags	number	1	Maximum number of visible selected tags
placeholder	string	undefined	Input placeholder text
preserveHierarchyOnSearch	boolean	false	Maintains hierarchy during search
showActionButtons	boolean	false	Shows/hides action buttons
showClearButton	boolean	true	Shows/hides the clear selection button
showSearch	boolean	false	Enables/disables search functionality
showSelectedOnlyToggle	boolean	true	Shows/hides the selected-only toggle
showSelectionControl	boolean	true	Shows/hides selection controls (works for single selection only)
showSelectAllButton	boolean	true	Shows/hides the select all button
showWarningMessage	boolean	false	Shows/hides warning messages
warningMessage	string	This filter is being impacted by other filters.	Warning message to display in the dropdown
size	"small" | "medium"	"small"	Size of the component
value	array	undefined	Selected values (controlled mode)
visibleItemsCount	number	8	Number of items to display in the dropdown. More than that will be visible if the user scrolls
disableClearable	boolean	false	Disables the clear button. True by default if selectionMode is single
expandedByDefault	boolean	false	Expands the parent nodes to show first-level children
popoverWidth	string	undefined	Width of the popover. Use to override the default width calculated by the component

Callback Props

Name	Type	Description
onCancel	function	Called when selection is cancelled
onFilterSave	function	Called when filter settings are saved
onSearchChange	function	Called when search input changes

Notes

• Use controlled mode when you need to manage the selection state in your application
• Enable preserveHierarchyOnSearch when working with hierarchical data to maintain structure during search
• The limitTags prop controls how many selected items are visible in the input field. -1 shows all (default). 0 shows only the "+X" overflow chip.
• Items inside data with ID equal to null and/or name equals to n/a will not be visible in the dropdown.
• Passing disabled: true to an item will disable it in the dropdown and in the selected items list.