Select Button

CSelectButton is used to choose single or multiple items from a list using buttons.

Basic Usage

CSelectButton is used with the v-model property for two-way value binding along with the options collection. Label and value of an option are defined with the option-label and optionValue properties respectively.

TIP

Note that, when options are simple primitive values such as a string array, no option-label and optionValue would be necessary.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('One-Way');
const options = ref(['One-Way', 'Return']);
</script>

Multiple Selection

CSelectButton 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.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
      option-label="name" 
      multiple
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref([]);
const options = ref([
    { name: 'Option 1', value: 1 },
    { name: 'Option 2', value: 2 },
    { name: 'Option 3', value: 3 }
]);
</script>

Option 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.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
      option-label="value" 
      option-value="value" 
  >
    <template #option="slotProps">
      <i :class="slotProps.option.icon"></i>
    </template>
  </CSelectButton>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PrimeIcons } from '@primevue/core/api';

const value = ref(null);
const options = ref([
    { icon: PrimeIcons.ALIGN_LEFT, value: 'Left' },
    { icon: PrimeIcons.ALIGN_RIGHT, value: 'Right' },
    { icon: PrimeIcons.ALIGN_CENTER, value: 'Center' },
    { icon: PrimeIcons.ALIGN_JUSTIFY, value: 'Justify' }
]);
</script>

Sizes

CSelectButton provides small and large sizes as alternatives to the base.

<template>
    <div class="card flex flex-col items-center gap-4">
        <CSelectButton v-model="value1" :options="options" size="small" />
        <CSelectButton v-model="value2" :options="options" />
        <CSelectButton v-model="value3" :options="options" size="large" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref('Beginner');
const value3 = ref('Expert');
const options = ref(['Beginner', 'Expert']);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
      allowEmpty 
      :invalid="value === null" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
const options = ref(['One-Way', 'Return']);
</script>

Disabled

When disabled is present, the element cannot be edited and focused entirely.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
      disabled 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
const options = ref(['Off', 'On']);
</script>

Disabled Option

Certain options can also be disabled using the optionDisabled property.

<template>
  <CSelectButton 
      v-model="value" 
      :options="options" 
      options-disabled="constant" 
      option-label="name"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
const options = ref([
    { name: 'Option 1', value: 1, constant: false },
    { name: 'Option 2', value: 2, constant: true }
]);
</script>