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 SelectMenu (ui5-select-menu) and SelectMenuOption (ui5-select-menu-option) web components:
The SelectMenu can be used as alternative to define the Select's dropdown
and can be used via the menu property of the Select to reference SelectMenu by its ID.
The component gives the possibility to customize the Select's dropdown
by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles.
Note: SelectMenu is a popover and placing it top-level in the HTML page is recommended,
because some page styles (for example transitions) can misplace the SelectMenu.
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.
Defines a reference (ID or DOM element) of component's menu of options as alternative to define the select's dropdown. Note: Usage of ui5-select-menu is recommended.
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.
Defines the value of the component: - when get - returns the value of the component, e.g. the value property of the selected option or its text content. - when set - selects the option with matching value property or text content. Note: If the given value does not match any existing option, the first option will get selected.
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, 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.
Defines the HTML element that will be displayed in the component input part, representing the selected option. Note: If not specified and ui5-select-menu-option 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.
You can define completely custom options via the ui5-select-menu (defining external dropdown)
and ui5-select-menu-option (providing custom content) components.