import SelectButton from 'primevue/selectbutton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"></script>
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="selectedCity" :options="cities" optionLabel="name" />
export default {
data() {
return {
selectedCity: null,
cities: [
{name: 'London', code: 'LND'},
{name: 'Paris', code: 'PRS'},
{name: 'Rome', code: 'RM'}
]
}
}
}
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="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
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="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps">
<div class="car-option">
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| options | array | null | An array of selectitems to display as the available options. |
| optionLabel | string | function | null | Property name or getter function to use as the label of an option. |
| optionValue | string | function | null | Property name or getter function to use as the value of an option, defaults to the option itself when not defined. |
| optionDisabled | string | function | null | Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. |
| multiple | boolean | false | When specified, allows selecting multiple values. |
| unselectable | boolean | true | Whether selection can be cleared. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| dataKey | string | null | A property to uniquely identify an option. |
| Name | Parameters | Description |
|---|---|---|
| change |
event.originalEvent: browser event event.value: Single value or an array of values that are selected. |
Callback to invoke on value change. |
| focus | event: Browser event | Callback to invoke on focus. |
| blur | event: Browser event | Callback to invoke on blur. |
| Name | Parameters |
|---|---|
| option |
option: Option instance index: Index of the option |
SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via aria-labelledby property.
Keyboard interaction is derived from the native browser handling of checkboxs in a group.
| Key | Function |
|---|---|
| tab | Moves focus to the first selected option, if there is none then first option receives the focus. |
| right arrow up arrow | Moves focus to the previous option. |
| left arrow down arrow | Moves focus to the next option. |
| space | Toggles the checked state of a button. |
None.