Vue3 SelectButton

Vue SelectButton is a form component to choose a value from a list of options using button elements.
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 SelectButton from 'primevue/selectbutton';

Getting Started

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

<SelectButton v-model="value" :options="paymentOptions" optionLabel="name" />

export default {
    data() {
        return {
            value: null,
            paymentOptions: [
                {name: 'Option 1', value: 1},
                {name: 'Option 2', value: 2},
                {name: 'Option 3', value: 3}
            ]
        }
    }
}

Multiple

SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.

<SelectButton v-model="value" :options="paymentOptions" optionLabel="name" :multiple="true" />

Templating

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.

<SelectButton v-model="value2" :options="justifyOptions" dataKey="value">
    <template #option="slotProps">
        <i :class="slotProps.option.icon"></i>
    </template>
</SelectButton>

export default {
    data() {
        return {
            value2: null,
            justifyOptions: [
                {icon: 'pi pi-align-left', value: 'left'},
                {icon: 'pi pi-align-right', value: 'Right'},
                {icon: 'pi pi-align-center', value: 'Center'},
                {icon: 'pi pi-align-justify', value: 'Justify'}]
            ]
        }
    }
}

Theming

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

Resources

Visit the PrimeVue SelectButton showcase for demos and documentation.

Comments

[Michael]

Thanks. I haven't heard of PrimeVue before. The intro video on their site is nice but kind of long.

It would have been nice to mention at the start of the post that it is a theme agnostic component library - and why to use it saves you writing components yourself and integrates well with Bootstrap etc.

It would have been nice to see screenshots in each section of your post instead of one big one at the top (which I forgot about while reading the post).