The ui5-toolbar-select component is used to create a toolbar drop-down list.
The items inside the ui5-toolbar-select define the available options by using the ui5-toolbar-select-option component.
ES6 Module Import
import "@ui5/webcomponents/dist/ToolbarSelect.js";
import "@ui5/webcomponents/dist/ToolbarSelectOption.js"; (comes with ui5-toolbar-select)
Properties
accessibleName
| Description | Defines the accessible ARIA name of the component. |
| Type | string | undefined |
| Default | undefined |
accessibleNameRef
| Description | Receives id(or many ids) of the elements that label the select. |
| Type | string | undefined |
| Default | undefined |
disabled
| Description | Defines whether the component is in disabled state.
Note: A disabled component is noninteractive. |
| Type | boolean |
| Default | false |
overflowGroup
| Description | Co-overflow tag. Items in the same ui5-toolbar whose overflowGroup is the same non-empty string overflow as one atomic unit: either all visible in the bar, or all in the overflow popover, never split. The empty string (the default) means "no group" — the item participates in overflow independently.
The tag is a free-form, case-sensitive string label (e.g. "filters", "search"). It is layout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a non-empty group must have overflowPriority = "Default"; AlwaysOverflow and NeverOverflow are forbidden inside a group — setting one of those on a grouped item emits a one-shot console.warn and the item's priority is treated as Default for the layout pass. Spacers (ui5-toolbar-spacer) do not participate in grouping; setting a non-empty overflowGroup on a spacer emits a one-shot console.warn and the spacer's existing overflow behavior is unchanged.
The visible bar always preserves slot order — ungrouped items between group members keep their slot positions and the toolbar never reorders DOM children. In the popover group members appear adjacent in slot order. |
| Type | string |
| Default | "" |
| Since | 2.27.0 |
overflowPriority
| Description | Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. |
| Type | "AlwaysOverflow" | "Default" | "NeverOverflow" (value descriptions in: ToolbarItemOverflowBehavior) |
| Default | "Default" |
preventOverflowClosing
| Description | Defines if the toolbar overflow popup should close upon interaction with the item. It will close by default. |
| Type | boolean |
| Default | false |
value
| Description | Defines the value of the component: |
| Type | string |
| Default | "" |
| Since | 2.15.0 |
valueState
| Description | Defines the value state of the component. |
| Type | "Critical" | "Information" | "Negative" | "None" | "Positive" |
| Default | "None" |
width
| Description | Defines the width of the select.
Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. |
| Type | string | undefined |
| Default | undefined |
Slots
default
| Description | Defines the component options.
Note: Only one selected option is allowed. If more than one option is defined as selected, the last one would be considered as the selected one.
Note: Use the ui5-toolbar-select-option component to define the desired options. |
| Type | Array<ToolbarSelectOption> |
label
| Description | Defines the HTML element that will be displayed in the component input part, representing the selected option. |
| Type | Array<HTMLElement> |
| Since | 2.15.0 |
Events
change
| Description | Fired when the selected option changes. |
| Type | CustomEvent<ToolbarSelectChangeEventDetail> |
| Parameters | selectedOption: HTMLElement
the selected option.
selectedToolbarOption: HTMLElement
the original toolbar select option. |
| Since | 2.25.0 |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
close
| Description | Fired after the component's dropdown menu closes. |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
open
| Description | Fired after the component's dropdown menu opens. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
For more information on how to use CSS custom states, see Usage of CSS Custom States.
| Name | Description |
|---|
| overflowed | When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0. |