DEV Community

loading...
Cover image for Vue3 Listbox

Vue3 Listbox

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode
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'}
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
ayoazeez26 profile image
Ayoazeez26

Thank you for this, I'll follow this step by step procedures once I have the time to

Forem Open with the Forem app