DEV Community

loading...
Cover image for Vue3 SelectButton

Vue3 SelectButton

primetek profile image PrimeTek ・2 min read

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

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" />
Enter fullscreen mode Exit fullscreen mode
export default {
    data() {
        return {
            value: null,
            paymentOptions: [
                {name: 'Option 1', value: 1},
                {name: 'Option 2', value: 2},
                {name: 'Option 3', value: 3}
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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.

Discussion (1)

pic
Editor guide
Collapse
michaelcurrin profile image
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).