diff --git a/apps/showcase/doc/autocomplete/TemplateDoc.vue b/apps/showcase/doc/autocomplete/TemplateDoc.vue
index 37017e554..d8dd18698 100644
--- a/apps/showcase/doc/autocomplete/TemplateDoc.vue
+++ b/apps/showcase/doc/autocomplete/TemplateDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
-            <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
-        </p>
+        <p>AutoComplete offers multiple slots for customization through templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
@@ -13,6 +10,14 @@
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Items</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-2">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </AutoComplete>
     </div>
     <DocSectionCode :code="code" :service="['CountryService']" />
@@ -35,6 +40,14 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Items</div>
+    </template>
+    <template #footer>
+        <div class="px-3 py-3">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
 </AutoComplete>
 `,
                 options: `
@@ -47,6 +60,14 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Items</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </AutoComplete>
     </div>
 </template>
@@ -91,6 +112,14 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Items</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </AutoComplete>
     </div>
 </template>
diff --git a/apps/showcase/doc/cascadeselect/TemplateDoc.vue b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
index 83f3173d3..4e90b8077 100644
--- a/apps/showcase/doc/cascadeselect/TemplateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>dropdownicon</i>,
-            <i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
-        </p>
+        <p>CascadeSelect offers multiple slots for customization through templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
@@ -16,7 +13,15 @@
                 </div>
             </template>
             <template #dropdownicon>
-                <i class="pi pi-map-marker"></i>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
             </template>
         </CascadeSelect>
     </div>
@@ -115,7 +120,15 @@ export default {
         </div>
     </template>
     <template #dropdownicon>
-        <i class="pi pi-map-marker"></i>
+        <i class="pi pi-map" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="px-3 py-1">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
     </template>
 </CascadeSelect>
 `,
@@ -133,7 +146,15 @@ export default {
                 </div>
             </template>
             <template #dropdownicon>
-                <i class="pi pi-map-marker"></i>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
             </template>
         </CascadeSelect>
     </div>
@@ -237,7 +258,15 @@ export default {
                 </div>
             </template>
             <template #dropdownicon>
-                <i class="pi pi-map-marker"></i>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="px-3 py-1">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
             </template>
         </CascadeSelect>
     </div>
diff --git a/apps/showcase/doc/multiselect/TemplateDoc.vue b/apps/showcase/doc/multiselect/TemplateDoc.vue
index 908e67214..1665410e5 100644
--- a/apps/showcase/doc/multiselect/TemplateDoc.vue
+++ b/apps/showcase/doc/multiselect/TemplateDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>,
-            <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
-        </p>
+        <p>MultiSelect offers multiple slots for customization through templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
@@ -13,9 +10,19 @@
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
             <template #footer>
-                <div class="py-2 px-4">
-                    <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
                 </div>
             </template>
         </MultiSelect>
@@ -49,9 +56,19 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
+    <template #dropdownicon>
+        <i class="pi pi-map" />
+    </template>
+    <template #filtericon>
+        <i class="pi pi-map-marker" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Countries</div>
+    </template>
     <template #footer>
-        <div class="py-2 px-4">
-            <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
+        <div class="p-3 flex justify-between">
+            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
         </div>
     </template>
 </MultiSelect>
@@ -66,9 +83,19 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
             <template #footer>
-                <div class="py-2 px-4">
-                    <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
                 </div>
             </template>
         </MultiSelect>
@@ -107,9 +134,19 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #filtericon>
+                <i class="pi pi-map-marker" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Countries</div>
+            </template>
             <template #footer>
-                <div class="py-2 px-4">
-                    <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
+                <div class="p-3 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
                 </div>
             </template>
         </MultiSelect>
diff --git a/apps/showcase/doc/select/TemplateDoc.vue b/apps/showcase/doc/select/TemplateDoc.vue
index 2c05429ae..c58fc6d9f 100644
--- a/apps/showcase/doc/select/TemplateDoc.vue
+++ b/apps/showcase/doc/select/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Options and the selected option display support templating with <i>option</i> and <i>value</i> respectively.</p>
+        <p>Select offers multiple slots for customization through templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
@@ -19,6 +19,17 @@
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </Select>
     </div>
     <DocSectionCode :code="code" />
@@ -59,6 +70,17 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
+    <template #dropdownicon>
+        <i class="pi pi-map" />
+    </template>
+    <template #header>
+        <div class="font-medium p-3">Available Countries</div>
+    </template>
+    <template #footer>
+        <div class="p-3">
+            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
 </Select>
 `,
                 options: `
@@ -80,6 +102,17 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </Select>
     </div>
 </template>
@@ -125,6 +158,17 @@ export default {
                     <div>{{ slotProps.option.name }}</div>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map" />
+            </template>
+            <template #header>
+                <div class="font-medium p-3">Available Countries</div>
+            </template>
+            <template #footer>
+                <div class="p-3">
+                    <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
         </Select>
     </div>
 </template>
diff --git a/apps/showcase/doc/treeselect/TemplateDoc.vue b/apps/showcase/doc/treeselect/TemplateDoc.vue
new file mode 100644
index 000000000..786851b70
--- /dev/null
+++ b/apps/showcase/doc/treeselect/TemplateDoc.vue
@@ -0,0 +1,151 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeSelect offers multiple slots for customization through templating.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+    <template #dropdownicon>
+        <i class="pi pi-search" />
+    </template>
+    <template #header>
+        <div class="font-medium px-3 py-2">Available Files</div>
+    </template>
+    <template #footer>
+        <div class="px-3 pt-1 pb-2 flex justify-between">
+            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+        </div>
+    </template>
+</TreeSelect>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
+            <template #dropdownicon>
+                <i class="pi pi-search" />
+            </template>
+            <template #header>
+                <div class="font-medium px-3 py-2">Available Files</div>
+            </template>
+            <template #footer>
+                <div class="px-3 pt-1 pb-2 flex justify-between">
+                    <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
+                    <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
+                </div>
+            </template>
+        </TreeSelect>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/showcase/pages/treeselect/index.vue b/apps/showcase/pages/treeselect/index.vue
index bde6487ab..82c0e1102 100644
--- a/apps/showcase/pages/treeselect/index.vue
+++ b/apps/showcase/pages/treeselect/index.vue
@@ -14,16 +14,17 @@
 import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
 import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
-import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
 import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
 import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
+import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
 import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
-import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
 import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
+import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
 import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
 import PTComponent from '@/doc/treeselect/pt/index.vue';
+import TemplateDoc from '@/doc/treeselect/TemplateDoc.vue';
 import ThemingDoc from '@/doc/treeselect/theming/index.vue';
 
 export default {
@@ -60,6 +61,11 @@ export default {
                     label: 'Filter',
                     component: FilterDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',