Import
import { OptionListModule } from '@backbase/ui-ang/option-list'
Usage
Use the bb-option-list-ui component to display a group of option buttons. The options input is required and must contain between 2 and 9 options.
<!-- Basic option list usage -->
<bb-option-list-ui
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' }
]">
</bb-option-list-ui>
On-Color variant
When the option list is placed on a darker background, you can use the on-color variant for better contrast and visibility. Apply the bb-option-list--on-color CSS class to the component.
<!-- Option list with on-color variant for dark backgrounds -->
<div style="background-color: var(--bs-primary); padding: 2rem;">
<bb-option-list-ui
class="bb-option-list--on-color"
[label]="'Select your preference'"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' }
]">
</bb-option-list-ui>
</div>
The on-color variant ensures that the option buttons have appropriate styling and contrast when used against colored or dark backgrounds, following the same pattern as other components in the design system.
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
columns |
1 | 2 | 3 |
1 |
|
disabled |
boolean |
false |
|
id |
string |
A unique string |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
mode |
"radio" | "checkbox" |
"radio" |
|
options (required) |
OptionListItem[] |
|
|
preserveColumnsAmount |
boolean |
false |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
autofocus
The autofocus input determines whether the option list should automatically receive focus when the page loads.
<!-- Option list with autofocus enabled -->
<bb-option-list-ui
[autofocus]="true"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
columns
The columns input sets the number of columns for displaying the option buttons. Supports 1, 2, or 3 columns.
<!-- Option list with 2 columns -->
<bb-option-list-ui
[columns]="2"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' },
{ label: 'Option 4', value: 'option-4' }
]">
</bb-option-list-ui>
disabled
The disabled input disables the entire option list, preventing user interaction with all option buttons.
<!-- Disabled option list -->
<bb-option-list-ui
[disabled]="true"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
id
The id input sets a unique identifier for the option list. If not provided, a unique string is generated automatically.
<!-- Option list with custom id -->
<bb-option-list-ui
[id]="'my-option-list'"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
inputClassName
The inputClassName input allows you to add custom CSS classes to the option list component.
<!-- Option list with custom CSS class -->
<bb-option-list-ui
[inputClassName]="'my-custom-class'"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
label
The label input sets the label text for the option list. The label is displayed as a legend within the fieldset element.
<!-- Option list with label -->
<bb-option-list-ui
[label]="'Choose your preference'"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
mode
The mode input determines the selection behavior. Use "radio" for single selection or "checkbox" for multiple selection.
<!-- Option list with checkbox mode for multiple selection -->
<bb-option-list-ui
[mode]="'checkbox'"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' }
]">
</bb-option-list-ui>
options
The options input provides the list of options to display as buttons. Each option must have a label and value property, and can optionally include a disabled property. The component requires between 2 and 9 options.
<!-- Option list with disabled option -->
<bb-option-list-ui
[options]="[
{ label: 'Available', value: 'available' },
{ label: 'Unavailable', value: 'unavailable', disabled: true },
{ label: 'Coming Soon', value: 'coming-soon' }
]">
</bb-option-list-ui>
preserveColumnsAmount
The preserveColumnsAmount input ensures that the number of displayed columns remains constant across all screen sizes. When set to false, the number of columns will be reduced to 1 on extra small screens.
<!-- Option list preserving column layout on all screen sizes -->
<bb-option-list-ui
[columns]="3"
[preserveColumnsAmount]="true"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' },
{ label: 'Option 4', value: 'option-4' },
{ label: 'Option 5', value: 'option-5' },
{ label: 'Option 6', value: 'option-6' }
]">
</bb-option-list-ui>
readonly
The readonly input makes the option list read-only, preventing changes to its value while still allowing focus and interaction for accessibility.
<!-- Read-only option list -->
<bb-option-list-ui
[readonly]="true"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
required
The required input marks the option list as required for form validation.
<!-- Required option list -->
<bb-option-list-ui
[required]="true"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
size
The size input configures the minimum width to fit the specified number of characters for the option list component.
<!-- Option list with custom size -->
<bb-option-list-ui
[size]="30"
[options]="[
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' }
]">
</bb-option-list-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emitted when the option list loses focus |
|
focus |
EventEmitter<FocusEvent \ void> |
Emitted when the option list 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 |
Identifies the currently active element when focus is on the option list, useful for composite widgets |
string |
|
ariaAutocomplete |
Indicates whether inputting text could trigger display of predictions or suggestions |
string |
|
ariaControls |
Identifies other elements that are controlled or affected by this option list |
string |
|
ariaDescribedby |
References elements that provide additional description or context for the option list |
string |
|
ariaExpanded |
Indicates whether a collapsible element controlled by this option list is expanded or collapsed |
string |
|
ariaInvalid |
Indicates that the current value is not in the expected format or is invalid |
string |
|
ariaLabel |
Provides an accessible name when no visible label text is available |
string |
|
ariaLabelledby |
References other elements that serve as labels for this option list |
string |
|
ariaOwns |
Identifies child elements when the DOM hierarchy doesn't represent the actual relationship |
string |
|
role |
Customizes the ARIA role for the component, improving accessibility for assistive technologies. Only valid ARIA widget roles are allowed |
string |
- The component uses a fieldset element with a legend for proper grouping and labeling
- Each option button includes screen reader text indicating its position in the group
- Keyboard navigation and focus management are supported for all option buttons
- The component properly manages `aria-pressed` states for selcted options