# Install

```shell
npm i @vaadin/combo-box
```

# Import

```javascript
import '@vaadin/combo-box';
```

# Variants

## Default

```html
<vaadin-combo-box label="Label" helper-text="Helper text"></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
```

## Required

```html
<vaadin-combo-box label="Required" required></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
```

## Disabled

```html
<vaadin-combo-box label="Disabled" disabled></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
```

## Read Only

```html
<vaadin-combo-box label="Read only" readonly v-model:value="selected"></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-combo-box').value = 'Item 1';
```

## Invalid

```html
<vaadin-combo-box label="Invalid" invalid ></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').errorMessage = 'Error message';
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
```

## Custom Value

```html
<vaadin-combo-box label="Browser" helperText="Select or type a browser"></vaadin-combo-box>
```

```javascript
document.querySelector('vaadin-combo-box').items = [ 'Item 1', 'Item 2', 'Item 3' ];
document.querySelector('vaadin-combo-box').setAllowCustomValue(true);
```