Import
import { SelectListModule } from '@backbase/ui-ang/select-list'
Usage
Use the bb-select-list-ui component to render a select list and access its API. The component requires the items input to provide selectable options.
<!-- Basic select list usage -->
<bb-select-list-ui
[label]="'Select List'"
[placeholder]="'Start typing. e.g. single'"
[items]="items">
</bb-select-list-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
filterEnabled |
boolean |
true |
|
id |
string |
Auto-generated |
|
inputClassName |
string |
undefined |
|
isOpen |
boolean |
undefined |
|
items |
T[] |
[] |
|
label |
string |
undefined |
|
loading |
boolean |
false |
|
maxSelectedItems |
string | number |
'none' |
|
minTermLength |
number |
2 |
|
multiple |
boolean |
false |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
string | number |
undefined |
autofocus
The autofocus input sets whether the select list should be auto-focused when shown.
<!-- Select list with autofocus enabled -->
<bb-select-list-ui [autofocus]="true" [items]="items"></bb-select-list-ui>
disabled
The disabled input sets whether the component is mutable or clickable.
<!-- Disabled select list -->
<bb-select-list-ui [disabled]="true" [items]="items"></bb-select-list-ui>
filterEnabled
The filterEnabled input determines if typeahead should be used to filter the items list. If enabled, the items list cannot be updated asynchronously as the filtering and the underlying data will get out of sync.
<!-- Select list with filtering disabled -->
<bb-select-list-ui [filterEnabled]="false" [items]="items"></bb-select-list-ui>
id
The id input sets the unique identifier for the select list element.
<!-- Select list with custom ID -->
<bb-select-list-ui [id]="'my-select-list'" [items]="items"></bb-select-list-ui>
inputClassName
The inputClassName input sets additional CSS class names for the input form control.
<!-- Select list with custom input class -->
<bb-select-list-ui [inputClassName]="'custom-select-class'" [items]="items"></bb-select-list-ui>
isOpen
The isOpen input controls whether the dropdown is open or closed programmatically.
<!-- Select list that opens programmatically -->
<bb-select-list-ui [isOpen]="true" [items]="items"></bb-select-list-ui>
items
The items input provides a list of items to select from based on the input text. Each item must have a name property for display.
<!-- Select list with items array -->
<bb-select-list-ui [items]="[
{ name: 'Single One', value: 'single-one' },
{ name: 'Single Two', value: 'single-two' }
]"></bb-select-list-ui>
label
The label input sets the label text for the select list.
<!-- Select list with label -->
<bb-select-list-ui [label]="'Choose an option'" [items]="items"></bb-select-list-ui>
loading
The loading input sets whether the data in the list is loading, displaying a loading indicator.
<!-- Select list in loading state -->
<bb-select-list-ui [loading]="true" [items]="items"></bb-select-list-ui>
maxSelectedItems
The maxSelectedItems input sets the maximum number of selected items when using multiple selection. Use 'none' for unlimited selection.
<!-- Select list with maximum 3 selections -->
<bb-select-list-ui
[maxSelectedItems]="3"
[multiple]="true"
[items]="items">
</bb-select-list-ui>
minTermLength
The minTermLength input sets the minimum number of characters required before searching for items.
<!-- Select list requiring 3 characters before search -->
<bb-select-list-ui [minTermLength]="3" [items]="items"></bb-select-list-ui>
multiple
The multiple input determines if the list allows multiple selection.
<!-- Select list with multiple selection -->
<bb-select-list-ui [multiple]="true" [items]="items"></bb-select-list-ui>
placeholder
The placeholder input sets the placeholder text to display in the input.
<!-- Select list with placeholder -->
<bb-select-list-ui
[placeholder]="'Start typing to search...'"
[items]="items">
</bb-select-list-ui>
readonly
The readonly input sets whether the select list is read-only. If true, the input cannot be edited but can display a selected value.
<!-- Read-only select list -->
<bb-select-list-ui [readonly]="true" [items]="items"></bb-select-list-ui>
required
The required input sets whether the select list is required for form validation.
<!-- Required select list -->
<bb-select-list-ui [required]="true" [items]="items"></bb-select-list-ui>
size
The size input configures the minimum width to fit the specified number of characters.
<!-- Select list with custom size -->
<bb-select-list-ui [size]="30" [items]="items"></bb-select-list-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emits when the select list loses focus |
|
clear |
EventEmitter<void> |
Emits when the clear action is performed |
|
focus |
EventEmitter<FocusEvent | void> |
Emits when the select list receives focus |
|
search |
EventEmitter<string> |
Emits when search is performed, outputting the search term |
|
valueChange |
EventEmitter<any> |
Emits when the selected value changes |
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 |
|---|---|---|
|
aria-activedescendant |
Identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application |
string |
|
aria-autocomplete |
Indicates whether inputting text could trigger display of predictions for a combobox, searchbox, or textbox |
string |
|
aria-controls |
Indicates which element or elements the user interface widget controls |
string |
|
aria-describedby |
References an element that contains a detailed description of the widget |
string |
|
aria-expanded |
Indicates if a control is expanded or collapsed, and whether its child elements are displayed or hidden |
string |
|
aria-invalid |
Indicates the entered value is not in a format expected by the application |
string |
|
aria-label |
Accessible label when control does not need to render a label tag |
string |
|
aria-labelledby |
References other elements on the page to define an accessible name |
string |
|
aria-owns |
Defines a visual, functional, or contextual relationship when the DOM hierarchy cannot represent the relationship |
string |
|
role |
Customizes the ARIA role for the HTML input element to improve accessibility |
string |