Skip to main content

ToolbarSelect

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​

width​

DescriptionDefines the width of the select.
Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
Typestring | undefined
Defaultundefined

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"

disabled​

DescriptionDefines whether the component is in disabled state.
Note: A disabled component is noninteractive.
Typeboolean
Defaultfalse

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the select.
Typestring
Default""

overflowPriority​

DescriptionProperty 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"Default" | "NeverOverflow" | "AlwaysOverflow"
Default"Default"

preventOverflowClosing​

DescriptionDefines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines 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.
TypeArray<ToolbarSelectOption>

Events​

change​

DescriptionFired when the selected option changes.
TypeCustomEvent<ToolbarSelectChangeEventDetail>
ParametersselectedOption: HTMLElement
the selected option.

open​

DescriptionFired after the component's dropdown menu opens.
TypeCustomEvent

close​

DescriptionFired after the component's dropdown menu closes.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.