Dropdown Multi Select

Multi-select dropdown component allowing users to select multiple options from a list.

Import


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

Usage

Use the bb-dropdown-multi-select-ui component to allow users to select multiple options from a dropdown.


                                                        
                                                        
                                                            <!-- Basic dropdown multi select usage -->
                                                        <bb-dropdown-multi-select-ui [placeholder]="'Select options'"></bb-dropdown-multi-select-ui>

Inputs

Input	Format	Default
autofocus	boolean	false
container	NgbDropdown['container']	null
disabled	boolean	false
dropdownHeaderText	string	undefined
dropdownPosition	PlacementArray	defaultDropdownPosition
filtering	boolean	false
id	string	Unique string
inputClassName	string
label	string	''
placeholder	string	'No items selected'
readonly	boolean	false
required	boolean	false

autofocus

The autofocus input determines whether the dropdown should automatically receive focus when the page loads. Defaults to false.


                                                        
                                                        
                                                            <!-- Dropdown multi select with autofocus enabled -->
                                                        <bb-dropdown-multi-select-ui
                                                            [autofocus]="true"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

container

The container input specifies which element the dropdown should be appended to.


                                                        
                                                        
                                                            <!-- Dropdown multi select with custom container -->
                                                        <bb-dropdown-multi-select-ui
                                                            [container]="'body'"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

disabled

The disabled input disables the dropdown, preventing user interaction. Defaults to false.


                                                        
                                                        
                                                            <!-- Disabled dropdown multi select -->
                                                        <bb-dropdown-multi-select-ui
                                                            [disabled]="true"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

dropdownHeaderText

The dropdownHeaderText input sets the header text displayed at the top of the dropdown.


                                                        
                                                        
                                                            <!-- Dropdown multi select with header text -->
                                                        <bb-dropdown-multi-select-ui
                                                            [dropdownHeaderText]="'Choose items'"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

dropdownPosition

The dropdownPosition input sets the position of the dropdown.


                                                        
                                                        
                                                            <!-- Dropdown multi select with custom position -->
                                                        <bb-dropdown-multi-select-ui
                                                            [dropdownPosition]="['bottom-end']"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

filtering

The filtering input enables filtering of options in the dropdown.


                                                        
                                                        
                                                            <!-- Dropdown multi select with filtering enabled -->
                                                        <bb-dropdown-multi-select-ui
                                                            [filtering]="true"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

id

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


                                                        
                                                        
                                                            <!-- Dropdown multi select with custom id -->
                                                        <bb-dropdown-multi-select-ui
                                                            [id]="'my-dropdown-multi-select'"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

inputClassName

The inputClassName input allows you to add custom CSS classes to the underlying input element.


                                                        
                                                        
                                                            <!-- Dropdown multi select with custom input class -->
                                                        <bb-dropdown-multi-select-ui
                                                            [inputClassName]="'my-custom-class'"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

label

The label input sets the label for the dropdown.


                                                        
                                                        
                                                            <!-- Dropdown multi select with label -->
                                                        <bb-dropdown-multi-select-ui
                                                            [label]="'Fruits'"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

placeholder

The placeholder input sets the placeholder text when no options are selected.


                                                        
                                                        
                                                            <!-- Dropdown multi select with custom placeholder -->
                                                        <bb-dropdown-multi-select-ui
                                                            [placeholder]="'Pick your favorites'">
                                                        </bb-dropdown-multi-select-ui>

readonly

The readonly input makes the dropdown read-only, preventing changes to its value. Defaults to `false`.


                                                        
                                                        
                                                            <!-- Read-only dropdown multi select -->
                                                        <bb-dropdown-multi-select-ui
                                                            [readonly]="true"
                                                            [placeholder]="'Select options'">
                                                        </bb-dropdown-multi-select-ui>

required

The required input marks the dropdown as required for form validation. Defaults to false.


                                                        
                                                        
                                                            <!-- Required dropdown multi select -->
                                                        <bb-dropdown-multi-select-ui
                                                            [required]="true"
                                                            [placeholder]="'Select options'">
                                                        </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.

ARIA

These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.

Input	Description	Type
ariaActivedescendant	Sets the aria-activedescendant attribute	string
ariaDescribedby	Sets the aria-describedby attribute	string
ariaInvalid	Sets the aria-invalid attribute	string
ariaLabel	Sets the aria-label attribute	string
ariaLabelledby	Sets the aria-labelledby attribute	string
ariaOwns	Sets the aria-owns attribute	string

The component manages ARIA attributes for the dropdown and listbox.

The dropdown and options are labeled and described for screen readers.

Keyboard navigation and focus management are supported.