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>

Select with Two-Column Layout Items

Austria

Belgium

Brazil

Bulgaria

Canada

<ui5-select class="select">
	<ui5-option additional-text="AT">Austria</ui5-option>
	<ui5-option additional-text="BE">Belgium</ui5-option>
	<ui5-option additional-text="BR">Brazil</ui5-option>
	<ui5-option additional-text="BG">Bulgaria</ui5-option>
	<ui5-option additional-text="CA">Canada</ui5-option>
</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"; (comes with 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

accessibleName
accessible-name

string

Defines 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

ISelectOption

Currently selected ui5-option element.

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.

Note: If the component has suggestionItems, the valueStateMessage would be displayed as part of the same popover, if used on desktop, or dialog - on phone.

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.

Fired after the component's dropdown menu closes.

open

Fired after the component's dropdown menu opens.

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

additionalText
additional-text

string

Defines the additional text displayed at the end of the option element.

since v1.3.0

disabled

boolean

false

Defines whether the component is in disabled state.

Note: A disabled component is hidden.

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

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:

Morning Horizon (Light)

Evening Horizon (Dark)

Horizon High Contrast Black

Horizon High Contrast White

Quartz Light

Quartz Dark

Quartz High Contrast Black

Quartz High Contrast White

Content Density:

Cozy

Compact

Text Direction:

LTR

RTL

Apply

Cancel