Select

v0.8.0
@ui5/webcomponents
<ui5-select>

Basic Select

Phone Tablet Desktop Phone Tablet Desktop
<ui5-select class="select">
	<ui5-option icon="iphone">Phone</ui5-option>
	<ui5-option icon="ipad">Tablet</ui5-option>
	<ui5-option icon="laptop" selected>Desktop</ui5-option>
</ui5-select>
<ui5-select disabled class="select">
	<ui5-option icon="iphone" selected>Phone</ui5-option>
	<ui5-option icon="ipad">Tablet</ui5-option>
	<ui5-option icon="laptop">Desktop</ui5-option>
</ui5-select>
	

Select with Value State and Value State Message

Apple Avocado Mango Orange Pumpkin Carrot
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Information message 2. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Strawberry Tomato Red Chili Pepper
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Information message 2. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Blueberry Grape Plum
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
Information message 2. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
<ui5-select value-state="Success" class="select">
	<ui5-option icon="meal" selected>Apple</ui5-option>
	<ui5-option icon="meal">Avocado</ui5-option>
	<ui5-option icon="meal">Mango</ui5-option>
</ui5-select>
<ui5-select value-state="Warning" class="select">
	<ui5-option icon="meal">Orange</ui5-option>
	<ui5-option icon="meal" selected>Pumpkin</ui5-option>
	<ui5-option icon="meal">Carrot</ui5-option>
	<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
	<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
</ui5-select>
<ui5-select value-state="Error" class="select">
	<ui5-option icon="meal">Strawberry</ui5-option>
	<ui5-option icon="meal">Tomato</ui5-option>
	<ui5-option icon="meal" selected>Red Chili Pepper</ui5-option>
	<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
	<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
</ui5-select>
<ui5-select value-state="Information" class="select">
	<ui5-option icon="meal">Blueberry</ui5-option>
	<ui5-option icon="meal">Grape</ui5-option>
	<ui5-option icon="meal" selected>Plum</ui5-option>
	<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
</ui5-select>
	

Overview

The ui5-select component is used to create a drop-down list. The items inside the ui5-select define the available options by using the ui5-option component.

Keyboard Handling

The ui5-select provides advanced keyboard handling.
  • [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.
  • [UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.
  • [SPACE, ENTER] - If the drop-down is opened - selects the focused option.
  • [ESC] - Closes the drop-down without changing the selection.
  • [HOME] - Navigates to first option
  • [END] - Navigates to the last option

ES6 Module Import

import "@ui5/webcomponents/dist/Select";
import "@ui5/webcomponents/dist/Option";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
String
Sets the accessible aria name of the component.
since v1.0.0-rc.15
accessibleNameRef
accessible-name-ref
String
""
Receives id(or many ids) of the elements that label the select.
since v1.0.0-rc.15
disabled
boolean
false
Defines whether the component is in disabled state.

Note: A disabled component is noninteractive.
name
string
""
Determines the name with which the component will be submitted in an HTML form. The value of the component will be the value of the currently selected ui5-option.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the ui5-select so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
required
boolean
false
Defines whether the component is required.
since v1.0.0-rc.9
selectedOption (readonly)
selected-option
sap.ui.webcomponents.main.ISelectOption
Currently selected option.
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
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-option component to define the desired options.
valueStateMessage
HTMLElement [0..n]
Defines the value state message that will be displayed as pop up under the component.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the component is in Information, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the selected option changes.
selectedOption
type: HTMLElement
description: the selected option.

Option

Overview

The ui5-option component defines the content of an option in the ui5-select.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Defines whether the component is in disabled state.

Note: A disabled component is noninteractive.
since v1.0.0-rc.12
icon
string
Defines the icon source URI.

Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer.
selected
boolean
false
Defines the selected state of the component.
value
string
Defines the value of the ui5-select inside an HTML Form element when this component is selected. For more information on HTML Form support, see the name property of ui5-select.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the component.

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel