SelectButton

Slider is a component to provide input with a drag handle.

Import #


import SelectButton from 'primevue/selectbutton';

Basic #

SelectButton is used as a controlled component with modelValue property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Default property name for the optionLabel is label and value for the optionValue. If optionValue is omitted and the object has no value property, the object itself becomes the value of an option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.

Off



<SelectButton v-model="value" :options="options" aria-labelledby="basic" />

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.

Option 1

Option 2

Option 3



<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />

Template #

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="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
    <template #option="slotProps">
        <i :class="slotProps.option.icon"></i>
    </template>
</SelectButton>

Invalid #

Invalid state style is added using the p-invalid class to indicate a failed validation.

Off



<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />

Disabled #

When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.

Off

Option 1

Option 2



<SelectButton v-model="value" :options="options" disabled />
<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />

Form #

Compatibility with popular Vue form libraries.

VeeValidate #

VeeValidate is a popular library for handling forms in Vue.



<div class="card flex justify-content-center">
    <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
        <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
        <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
        <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
        <Button type="submit" label="Submit" />
    </form>
    <Toast />
</div>

Accessibility #

Screen Reader

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 Support

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 arrowup arrow	Moves focus to the previous option.
left arrowdown arrow	Moves focus to the next option.
space	Toggles the checked state of a button.