Dropdown Multi Select Option

Import

                                                        
                                                        
                                                            import { DropdownMultiSelectModule } from '@backbase/ui-ang/dropdown-multi-select'  
                                                        
                                                            

Usage

Use the bb-dropdown-multi-select-option-ui component as content children inside the dropdown multi select component to define individual options.

                                                        
                                                        
                                                            <!-- Basic dropdown multi select option usage -->
                                                        <bb-dropdown-multi-select-ui [label]="'Select options'">
                                                            <bb-dropdown-multi-select-option-ui 
                                                                [label]="'Dropdown Item 1'" 
                                                                [value]="'1'">
                                                            </bb-dropdown-multi-select-option-ui>
                                                        </bb-dropdown-multi-select-ui>  
                                                        
                                                            

Inputs

id

The id input sets a unique identifier for the option element. If not provided, a unique string is generated automatically.

                                                        
                                                        
                                                            <!-- Dropdown multi select option with custom id -->
                                                        <bb-dropdown-multi-select-ui [label]="'Select options'">
                                                            <bb-dropdown-multi-select-option-ui 
                                                                [id]="'my-option-1'"
                                                                [label]="'Option 1'" 
                                                                [value]="'1'">
                                                            </bb-dropdown-multi-select-option-ui>
                                                        </bb-dropdown-multi-select-ui>  
                                                        
                                                            

label

The label input sets the display text shown to users for this option in the dropdown list.

                                                        
                                                        
                                                            <!-- Dropdown multi select option with custom label -->
                                                        <bb-dropdown-multi-select-ui [label]="'Select fruits'">
                                                            <bb-dropdown-multi-select-option-ui 
                                                                [label]="'Apple'" 
                                                                [value]="'apple'">
                                                            </bb-dropdown-multi-select-option-ui>
                                                        </bb-dropdown-multi-select-ui>  
                                                        
                                                            

state

The state input is used internally by the parent dropdown component to track the selection status. This property should not be set manually.

value

The value input sets the unique value that will be stored in the form control when this option is selected.

                                                        
                                                        
                                                            <!-- Dropdown multi select option with specific value -->
                                                        <bb-dropdown-multi-select-ui [label]="'Select products'">
                                                            <bb-dropdown-multi-select-option-ui 
                                                                [label]="'Premium Account'" 
                                                                [value]="'premium-account-001'">
                                                            </bb-dropdown-multi-select-option-ui>
                                                        </bb-dropdown-multi-select-ui>  
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

• Each option automatically receives proper ARIA attributes when rendered by the parent dropdown component, including role="option", aria-selected, and unique id attributes.
• The options are part of a listbox structure with role="listbox" and aria-multiselectable="true" managed by the parent component.
• Options are properly labeled for screen readers using the label input value.
• Keyboard navigation is supported through the parent component's listbox implementation, allowing users to navigate between options using arrow keys.
• The parent component manages aria-activedescendant to communicate which option currently has focus to assistive technologies.
• Each option includes a checkbox input that is properly associated with its label for screen reader compatibility.