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.