# 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'];
```