Set "Select All Items" - Text of PrimeVue Multiselect

PrimeVue lets you add an Header to the Multiselect. This is then displayed above the Checkbox to select all Items.

The CSS Solution for this would be something like this

div.customClassName .p-multiselect-header .p-checkbox::after {
  content: "Select all Items";
}

but this does this does not look nice enough.

Is there a way to display a nice Label for the "Select All" Checkbox?

May be a bit late but might help someone in future.

I was facing same issue and I came up with a nice workaround.

Primevue components support templating so you can add custom header

<MultiSelect 
    v-model="selectedItems" 
    :options="items" 
    optionLabel="name" 
    optionValue="id" 
    ref="selectAll"> // notice ref
    // add custom header with custom style and click event
        <template #header>
           <div class="absolute cursor-pointer top-3 left-10" @click="toggleSelectAll">Select All Items</div>
        </template>
</Multiselect> 


toggleSelectAll() {
  // check all selected then remove all selected items
  if (this.$refs.selectAll.allSelected) {
    this.selectedItems = [];
    return;
  }

  // else add all items
  this.selectedItems = [1,2];
}