Version:

Install ​

npm i @vaadin/mutli-select-combo-box

Import ​

javascript
import '@vaadin/mutli-select-combo-box';

Variants ​

Default ​

html
<vaadin-mutli-select-combo-box label="Kategorien" helper-text="Mehrere Optionen wählbar" ></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];

Required ​

html
<vaadin-mutli-select-combo-box label="Pflichtfeld" required></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];

Disabled ​

html
<vaadin-mutli-select-combo-box label="Inaktiv" disabled></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];

Read Only ​

html
<vaadin-mutli-select-combo-box label="Nur lesen" readonly></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];

Invalid ​

html
<vaadin-mutli-select-combo-box label="Ungültig" invalid></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];
document.querySelector('vaadin-mutli-select-combo-box').errorMessage = 'Bitte mindestens eine Option auswählen.';

Auto Expand Vertically ​

html
<vaadin-mutli-select-combo-box label="Auto-expand" auto-expand-vertically></vaadin-mutli-select-combo-box>
javascript
document.querySelector('vaadin-mutli-select-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-mutli-select-combo-box').selectedItems = ['Item 1', 'Item 2'];