Filter Multiple Selection

Work in progress

Opt for a multi-selection filter when users need the flexibility to choose multiple attributes to modify the data results.

If the filter options exceed the collapseThreshold configuration, only the first maxCollapsedItems options are displayed by default, while the rest are hidden. The user can click on button "Show more" to reveal the additional options. The threshold of visible items is also customizable by the integrator.

If the options are more than searchThreshold, the user can also search throughout the list. It’s not mandatory, but recommended, as in some projects, due to technical constraints, it’s not possible to include the search feature. It can also be applied to lists with fewer than searchThreshold items.

Technical Overview

The LmnFilterMultipleSelectionComponent allows users to select multiple options from a list of choices. It extends the abstract LmnFilter class, ensuring consistent behavior and integration with the filter container system.

Key Features

• Multiple Selection: Allows users to select multiple options simultaneously
• Collapsible Interface: Automatically collapses long lists with configurable thresholds
• Search Capability: Includes built-in search functionality for large option sets
• Accessibility Support: Comprehensive ARIA attributes for screen reader compatibility
• Customizable Templates: Supports custom templates for search, checkboxes, and labels

When to Use

Use the LmnFilterMultipleSelectionComponent when:

• Users need to select multiple options from a list
• The filtering criteria are not mutually exclusive
• You want to provide a compact UI for potentially large sets of options
• You need to integrate with a LmnFilterContainerDirective for coordinated filtering

Implementation

To implement the filter, you need to provide:

1. A unique filterId for identification
2. An array of LmnFilterSelectionItem<T> objects representing the available options