The available options of the Select are defined by using the Option component.
The Option comes with predefined design and layout, including icon, text and additional-text.
With OptionCustom (ui5-option-custom) web component.
Options with custom content are defined by using the OptionCustom component.
The OptionCustom component comes with no predefined layout and it expects consumers to define it.
The options can be selected via user interaction (click or with the use of the Space and Enter keys)
and programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:
The "value" property of the Select component
The "selected" property on individual options
Note: If the "value" property is set but does not match any option,
no option will be selected and the Select component will be displayed as empty.
Note: when both "value" and "selected" are both used (although discouraged),
the "value" property will take precedence.
The ui5-select provides advanced keyboard handling.
[F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.
[Up] or [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.
[Escape] - Closes the drop-down without changing the selection.
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Defines the value of the component: - when get - returns the value of the component or the value/text content of the selected option. - when set - selects the option with matching value property or text content. Note: Use either the Select's value or the Options' selected property. Mixed usage could result in unexpected behavior. Note: If the given value does not match any existing option, no option will be selected and the Select component will be displayed as empty.
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.
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, Critical or Negative 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.
Defines the HTML element that will be displayed in the component input part, representing the selected option. Note: If not specified and ui5-option-custom is used, either the option's display-text or its textContent will be displayed. Note: If not specified and ui5-option is used, the option's textContent will be displayed.