feat(slots): improve placeholder slot

TotomInc · TotomInc · commit f602e90c9f34 · 2025-07-18T10:02:51.000+02:00
diff --git a/docs/slots.md b/docs/slots.md
@@ -138,6 +138,22 @@ Customize the rendered template for the clear icon. Please note that the slot is
 </template>
 ```
 
+## placeholder
+
+**Type**: `slotProps: { text: string }`
+
+Customize the rendered template for the placeholder.
+
+```vue
+<template>
+  <VueSelect v-model="option" :options="options">
+    <template #placeholder>
+      <span>Custom placeholder</span>
+    </template>
+  </VueSelect>
+</template>
+```
+
 ## loading
 
 **Type**: `slotProps: {}`
diff --git a/playground/demos/CustomPlaceholder.vue b/playground/demos/CustomPlaceholder.vue
@@ -4,6 +4,7 @@ import { ref } from "vue";
 import VueSelect from "../../src";
 
 const selected = ref<string | null>(null);
+
 const options: Option<string>[] = [
   { label: "Alice's Adventures in Wonderland", value: "alice" },
   { label: "A Wizard of Earthsea", value: "wizard" },
diff --git a/src/types/slots.ts b/src/types/slots.ts
@@ -11,6 +11,7 @@ export type Slots<GenericOption extends Option<OptionValue>, OptionValue> = {
   "clear"?: () => any;
   "dropdown"?: () => any;
   "loading"?: () => any;
+  "placeholder"?: () => any;
   "menu-header"?: () => any;
   "option"?: (props: { option: GenericOption; index: number; isFocused: boolean; isSelected: boolean; isDisabled: boolean }) => any;
   "no-options"?: () => any;
