UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

41 lines (40 loc) 1.89 kB
'use client'; import '@ui5/webcomponents/dist/Select.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; /** * The `Select` component is used to create a drop-down list. * * ### Usage * * There are two main usages of the `ui5-select>`. * * 1. With Option (`Option`) web component: * * 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`. * * 2. With OptionCustom (`OptionCustom`) 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. * * ### Keyboard Handling * The `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. * - [Home] - Navigates to first option * - [End] - Navigates to the last option * * * * `import "@ui5/webcomponents/dist/Option";` * `import "@ui5/webcomponents/dist/OptionCustom";` * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ const Select = withWebComponent('ui5-select', ['accessibleName', 'accessibleNameRef', 'name', 'value', 'valueState'], ['disabled', 'readonly', 'required'], ['label', 'valueStateMessage'], ['change', 'close', 'live-change', 'open']); Select.displayName = 'Select'; export { Select };