Components Filters Filter Single Selection

Filter Single Selection

Overview API Examples Style Tokens

Work in progress

Choose a single-selection filter for modifying data results based on a single attribute, providing users with straightforward control over specific criteria.

It is possible replace the label with other elements like rating, status badges and others.

Technical Overview

The LmnFilterSingleSelectionComponent enables users to select a single option from a list of choices. It extends the abstract LmnFilter class, ensuring consistent behavior and integration with the filter container system.

Key Features

  • Single Selection: Allows users to select only one option at a time using radio buttons
  • Customizable Templates: Supports custom templates for radio buttons and labels
  • Accessibility Support: Comprehensive ARIA attributes for screen reader compatibility
  • Negative Styling: Optional negative styling variant for different visual contexts
  • Programmatic Control: Methods to clear selections or select specific values

When to Use

Use the LmnFilterSingleSelectionComponent when:

  • Users need to select exactly one option from a list
  • The filtering criteria are mutually exclusive
  • You need a compact UI for presenting selection 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 inputRadioName for the radio button group
  3. An array of LmnFilterSelectionItem<T> objects representing the available options