UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

21 lines (20 loc) 1.45 kB
'use client'; import '@ui5/webcomponents/dist/MultiInput.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; /** * A `MultiInput` field allows the user to enter multiple values, which are displayed as `Token`. * * User can choose interaction for creating tokens. * Fiori Guidelines say that user should create tokens when: * * - Type a value in the input and press enter or focus out the input field (`change` event is fired) * - Move between suggestion items (`selection-change` event is fired) * - Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired ) * * * * __Note:__ This is a UI5 Web Component! [MultiInput UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/MultiInput) | [Repository](https://github.com/UI5/webcomponents) */ const MultiInput = withWebComponent('ui5-multi-input', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'filter', 'maxlength', 'name', 'placeholder', 'type', 'value', 'valueState'], ['disabled', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon', 'showSuggestions', 'showValueHelpIcon'], ['icon', 'tokens', 'valueStateMessage'], ['change', 'close', 'input', 'open', 'select', 'selection-change', 'token-delete', 'value-help-trigger']); MultiInput.displayName = 'MultiInput'; export { MultiInput };