Import
import { DropdownSingleSelectModule } from '@backbase/ui-ang/dropdown-single-select'
Usage
Use the bb-dropdown-single-select-ui component to allow users to select a single value from a dropdown. The component supports two ways to provide dropdown items:
- Via the options input: Pass an array of strings or objects to the options input.
- Via content children: Add one or more bb-dropdown-single-select-option-ui elements as children.
<!-- Dropdown single select with options input -->
<bb-dropdown-single-select-ui
[options]="['Option One', 'Option Two', 'Option Three']">
</bb-dropdown-single-select-ui>
<!-- Dropdown single select with content children -->
<bb-dropdown-single-select-ui>
<bb-dropdown-single-select-option-ui
label="Option One" value="1"></bb-dropdown-single-select-option-ui>
<bb-dropdown-single-select-option-ui
label="Option Two" value="2"></bb-dropdown-single-select-option-ui>
<bb-dropdown-single-select-option-ui
label="Option Three" value="3"></bb-dropdown-single-select-option-ui>
</bb-dropdown-single-select-ui>
Both methods can be combined; all items will be displayed in the dropdown
<!-- Dropdown single select combining options input and content children -->
<bb-dropdown-single-select-ui [options]="['Option Four']">
<bb-dropdown-single-select-option-ui
label="Option One" value="1"></bb-dropdown-single-select-option-ui>
<bb-dropdown-single-select-option-ui
label="Option Two" value="2"></bb-dropdown-single-select-option-ui>
</bb-dropdown-single-select-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
compareWithFn |
(a: any, b: any) => boolean |
(a, b) => a === b |
|
defaultOptionAsPlaceholder |
boolean |
false |
|
disabled |
boolean |
false |
|
displayAttributePath |
string |
undefined |
|
iconName |
string |
'toggle-down' |
|
id |
string |
Unique string |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
options |
Array<Object | string> |
[] |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
autofocus
The autofocus input determines whether the dropdown should automatically receive focus when the page loads. Defaults to false.
<!-- Dropdown single select with autofocus enabled -->
<bb-dropdown-single-select-ui
[autofocus]="true"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
compareWithFn
The compareWithFn input allows overriding the option comparison algorithm for tracking identities when checking for changes.
<!-- Dropdown single select with custom compare function -->
<bb-dropdown-single-select-ui
[compareWithFn]="myCompareFn"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
defaultOptionAsPlaceholder
The defaultOptionAsPlaceholder input determines if the placeholder is shown as a selectable option. Defaults to false.
<!-- Dropdown single select with default option as placeholder -->
<bb-dropdown-single-select-ui
[defaultOptionAsPlaceholder]="true"
[placeholder]="'Select one'"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
disabled
The disabled input disables the dropdown, preventing user interaction. Defaults to false.
<!-- Disabled dropdown single select -->
<bb-dropdown-single-select-ui
[disabled]="true"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
displayAttributePath
The displayAttributePath input sets the path to the property used to display each option when options are objects.
<!-- Dropdown single select with object options -->
<bb-dropdown-single-select-ui
[options]="userList"
[displayAttributePath]="'name'">
</bb-dropdown-single-select-ui>
iconName
The iconName input sets the icon displayed at the right corner of the dropdown. Defaults to 'toggle-down'.
<!-- Dropdown single select with custom icon -->
<bb-dropdown-single-select-ui
[iconName]="'chevron-down'"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
id
The id input sets a unique identifier for the dropdown. If not provided, a unique string is generated automatically.
<!-- Dropdown single select with custom id -->
<bb-dropdown-single-select-ui [id]="'my-dropdown'"></bb-dropdown-single-select-ui>
label
The label input sets the label for the dropdown. Defaults to an empty string.
<!-- Dropdown single select with label -->
<bb-dropdown-single-select-ui
[label]="'Choose an option'"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
options
The options input provides the list of options to display. Can be an array of strings or objects. If it’s an array of objects, displayAttributePath needs to be used.
<!-- Dropdown single select with options -->
<bb-dropdown-single-select-ui
[options]="['A', 'B', 'C']">
</bb-dropdown-single-select-ui>
placeholder
The placeholder input sets the placeholder text for the dropdown. Defaults to an empty string.
<!-- Dropdown single select with placeholder -->
<bb-dropdown-single-select-ui
[placeholder]="'Select one'"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
readonly
The readonly input makes the dropdown read-only, preventing changes to its value. Defaults to false.
<!-- Read-only dropdown single select -->
<bb-dropdown-single-select-ui
[readonly]="true"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
required
The required input marks the dropdown as required for form validation. Defaults to false.
<!-- Required dropdown single select -->
<bb-dropdown-single-select-ui
[required]="true"
[options]="['A', 'B']">
</bb-dropdown-single-select-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emitted when the dropdown loses focus |
|
focus |
EventEmitter<FocusEvent | void> |
Emitted when the dropdown gains focus |
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 |
|
ariaAutocomplete |
Sets the aria-autocomplete attribute |
string |
|
ariaControls |
Sets the aria-controls attribute |
string |
|
ariaDescribedby |
Sets the aria-describedby attribute |
string |
|
ariaExpanded |
Sets the aria-expanded 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 |
|
role |
Customizes the ARIA role for the select element, improving accessibility for assistive technologies. Only valid ARIA widget roles are allowed. Defaults to undefined. |
string |
- The component manages ARIA attributes for the select element.
- The dropdown and its label are properly associated for screen readers.
- Keyboard navigation and focus management are supported.