Vue3 Listbox

Vue Listbox is used to select one or more values from a list of items. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Listbox from 'primevue/listbox';

Getting Started

Listbox requires a value to bind and a collection of arbitrary objects along with the optionLabel property to specify the label property of the option.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />

data() {
    return {
        selectedCity: null,
        cities: [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ]
    }
}

Selection

Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>

Custom Content

Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter.

<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
    <template #option="slotProps">
        <div class="country-item">
            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
            <div>{{slotProps.option.name}}</div>
        </div>
    </template>
</Listbox>

Filter

Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>

Theming

Listbox supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Listbox showcase for demos and documentation.