Version:

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);