From 2032fd5216649d47c0dacd9b28e479b4d61573a9 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 30 Jan 2024 11:04:48 +0300
Subject: [PATCH] New components added to demos

---
 components/landing/ThemeSection.vue        |  8 ++-
 doc/autocomplete/FloatLabelDoc.vue         | 16 ++---
 doc/calendar/FloatLabelDoc.vue             | 16 ++---
 doc/cascadeselect/FloatLabelDoc.vue        | 16 ++---
 doc/chips/FloatLabelDoc.vue                | 16 ++---
 doc/datatable/StatefulDoc.vue              | 32 ++++++----
 doc/datatable/filter/AdvancedFilterDoc.vue | 32 ++++++----
 doc/datatable/filter/BasicFilterDoc.vue    | 32 ++++++----
 doc/datatable/samples/CustomersDoc.vue     | 32 ++++++----
 doc/datatable/samples/ProductsDoc.vue      | 32 ++++++----
 doc/dropdown/FloatLabelDoc.vue             | 16 ++---
 doc/dropdown/form/VeeValidateDoc.vue       | 16 ++---
 doc/focustrap/BasicDoc.vue                 | 64 +++++++++++--------
 doc/inputmask/FloatLabelDoc.vue            | 18 +++---
 doc/inputnumber/FloatLabelDoc.vue          | 16 ++---
 doc/inputtext/FloatLabelDoc.vue            | 16 ++---
 doc/inputtext/IconsDoc.vue                 | 71 ++++++++++++++--------
 doc/inputtext/form/VeeValidateDoc.vue      | 16 ++---
 doc/multiselect/FloatLabelDoc.vue          | 16 ++---
 doc/password/FloatLabelDoc.vue             | 26 ++++----
 doc/textarea/FloatLabelDoc.vue             | 26 ++++----
 doc/textarea/form/VeeValidateDoc.vue       | 16 ++---
 doc/toolbar/BasicDoc.vue                   | 32 ++++++----
 doc/treeselect/FloatLabelDoc.vue           | 16 ++---
 doc/treetable/FilterDoc.vue                | 32 ++++++----
 pages/inputmask/index.vue                  |  2 +-
 pages/inputtext/index.vue                  | 12 +++-
 pages/password/index.vue                   |  2 +-
 28 files changed, 373 insertions(+), 272 deletions(-)

diff --git a/components/landing/ThemeSection.vue b/components/landing/ThemeSection.vue
index 1170a5278..69c2d014a 100644
--- a/components/landing/ThemeSection.vue
+++ b/components/landing/ThemeSection.vue
@@ -26,10 +26,12 @@
                     <template #header>
                         <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
                             <h5 class="m-0">Customers</h5>
-                            <span class="p-input-icon-left mt-3 sm:mt-0 w-full sm:w-auto">
-                                <i class="pi pi-search" />
+                            <IconField iconPosition="left" class="mt-3 sm:mt-0 w-full sm:w-auto">
+                                <InputIcon>
+                                    <i class="pi pi-search" />
+                                </InputIcon>
                                 <InputText v-model="filters['global'].value" placeholder="Search" class="w-full" />
-                            </span>
+                            </IconField>
                         </div>
                     </template>
                     <template #empty> No customers found. </template>
diff --git a/doc/autocomplete/FloatLabelDoc.vue b/doc/autocomplete/FloatLabelDoc.vue
index 3143eb06f..e6a76b89b 100644
--- a/doc/autocomplete/FloatLabelDoc.vue
+++ b/doc/autocomplete/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,18 +19,18 @@ export default {
             items: [],
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
     <label for="ac">Float Label</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -53,10 +53,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
             <label for="ac">Float Label</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/calendar/FloatLabelDoc.vue b/doc/calendar/FloatLabelDoc.vue
index 339f43c44..7040d6265 100644
--- a/doc/calendar/FloatLabelDoc.vue
+++ b/doc/calendar/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Calendar v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +18,18 @@ export default {
             date: null,
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <Calendar v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Calendar v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -46,10 +46,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Calendar v-model="date" inputId="birth_date" />
             <label for="birth_date">Birth Date</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/cascadeselect/FloatLabelDoc.vue b/doc/cascadeselect/FloatLabelDoc.vue
index 694d3fb47..cbd4427fb 100644
--- a/doc/cascadeselect/FloatLabelDoc.vue
+++ b/doc/cascadeselect/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
             <label for="cs-city">City</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -92,20 +92,20 @@ export default {
             ],
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     <label for="cs-city">City</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
                 :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
             <label for="cs-city">City</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -196,11 +196,11 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
                 :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
             <label for="cs-city">City</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/chips/FloatLabelDoc.vue b/doc/chips/FloatLabelDoc.vue
index 54fbdef77..65c1a8dab 100644
--- a/doc/chips/FloatLabelDoc.vue
+++ b/doc/chips/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <span class="p-float-label">
+        <FloatLabel>
             <Chips id="chips" v-model="value" />
             <label for="chips">Chips</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +18,18 @@ export default {
             value: null,
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <Chips id="chips" v-model="value" />
     <label for="chips">Chips</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <span class="p-float-label">
+        <FloatLabel>
             <Chips id="chips" v-model="value" />
             <label for="chips">Chips</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -46,10 +46,10 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <span class="p-float-label">
+        <FloatLabel>
             <Chips id="chips" v-model="value" />
             <label for="chips">Chips</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index eca2c339a..ea96fb344 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -23,10 +23,12 @@
                 tableStyle="min-width: 50rem"
             >
                 <template #header>
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Global Search" />
-                    </span>
+                    </IconField>
                 </template>
                 <Column field="name" header="Name" sortable style="width: 25%">
                     <template #filter="{ filterModel }">
@@ -110,10 +112,12 @@ export default {
     stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
     selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
     <template #header>
-        <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+        <IconField iconPosition="left">
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
             <InputText v-model="filters['global'].value" placeholder="Global Search" />
-        </span>
+        </IconField>
     </template>
     <Column field="name" header="Name" sortable style="width: 25%">
         <template #filter="{ filterModel }">
@@ -171,10 +175,12 @@ export default {
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
                 selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
             <template #header>
-                <span class="p-input-icon-left">
-                    <i class="pi pi-search" />
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
                     <InputText v-model="filters['global'].value" placeholder="Global Search" />
-                </span>
+                </IconField>
             </template>
             <Column field="name" header="Name" sortable style="width: 25%">
                 <template #filter="{ filterModel }">
@@ -297,10 +303,12 @@ export default {
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
                 selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
             <template #header>
-                <span class="p-input-icon-left">
+                <IconField iconPosition="left">
+                <InputIcon>
                     <i class="pi pi-search" />
-                    <InputText v-model="filters['global'].value" placeholder="Global Search" />
-                </span>
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Global Search" />
+            </IconField>
             </template>
             <Column field="name" header="Name" sortable style="width: 25%">
                 <template #filter="{ filterModel }">
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index 99e11393f..06b892db5 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -8,10 +8,12 @@
                 <template #header>
                     <div class="flex justify-content-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+                        <IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </span>
+                        </IconField>
                     </div>
                 </template>
                 <template #empty> No customers found. </template>
@@ -147,10 +149,12 @@ export default {
     <template #header>
         <div class="flex justify-content-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <span class="p-input-icon-left">
-                <i class="pi pi-search" />
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </span>
+            </IconField>
         </div>
     </template>
     <template #empty> No customers found. </template>
@@ -260,10 +264,12 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
@@ -465,10 +471,12 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index 11669fd62..d06ed9328 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -11,10 +11,12 @@
             <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
                 <template #header>
                     <div class="flex justify-content-end">
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+                        <IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </span>
+                        </IconField>
                     </div>
                 </template>
                 <template #empty> No customers found. </template>
@@ -118,10 +120,12 @@ export default {
         :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
     <template #header>
         <div class="flex justify-content-end">
-            <span class="p-input-icon-left">
-                <i class="pi pi-search" />
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </span>
+            </IconField>
         </div>
     </template>
     <template #empty> No customers found. </template>
@@ -192,10 +196,12 @@ export default {
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
                 <div class="flex justify-content-end">
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
@@ -346,10 +352,12 @@ export default {
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
                 <div class="flex justify-content-end">
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 1c8befc05..196f97b1e 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -17,10 +17,12 @@
                 <template #header>
                     <div class="flex justify-content-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+                        <IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                        </span>
+                        </IconField>
                     </div>
                 </template>
                 <template #empty> No customers found. </template>
@@ -143,10 +145,12 @@ export default {
     <template #header>
         <div class="flex justify-content-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <span class="p-input-icon-left">
-                <i class="pi pi-search" />
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-            </span>
+            </IconField>
         </div>
     </template>
     <template #empty> No customers found. </template>
@@ -243,10 +247,12 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
@@ -434,10 +440,12 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
+                    </IconField>
                 </div>
             </template>
             <template #empty> No customers found. </template>
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index bd4b44cf8..731a7a8da 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -31,10 +31,12 @@
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+                        <IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </span>
+                        </IconField>
                     </div>
                 </template>
 
@@ -206,10 +208,12 @@ export default {
     <template #header>
         <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
             <h4 class="m-0">Manage Products</h4>
-            <span class="p-input-icon-left">
-                <i class="pi pi-search" />
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
                 <InputText v-model="filters['global'].value" placeholder="Search..." />
-            </span>
+            </IconField>
         </div>
     </template>
     <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
@@ -267,10 +271,12 @@ export default {
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-						<span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+						<IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </span>
+                        </IconField>
 					</div>
                 </template>
 
@@ -556,10 +562,12 @@ export default {
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-						<span class="p-input-icon-left">
-                            <i class="pi pi-search" />
+						<IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
                             <InputText v-model="filters['global'].value" placeholder="Search..." />
-                        </span>
+                        </IconField>
 					</div>
                 </template>
 
diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index 0f96551d6..8b1ba53a1 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <div class="p-float-label w-full md:w-14rem">
+        <FloatLabel class="w-full md:w-14rem">
             <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
-        </div>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,18 +25,18 @@ export default {
             ],
             code: {
                 basic: `
-<div class="p-float-label w-full md:w-14rem">
+<FloatLabel class="w-full md:w-14rem">
     <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
     <label for="dd-city">Select a City</label>
-</div>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label w-full md:w-14rem">
+        <FloatLabel class="w-full md:w-14rem">
             <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
-        </div>
+        </FloatLabel>
     </div>
 </template>
 
@@ -60,10 +60,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <div class="p-float-label w-full md:w-14rem">
+        <FloatLabel class="w-full md:w-14rem">
             <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">Select a City</label>
-        </div>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/dropdown/form/VeeValidateDoc.vue b/doc/dropdown/form/VeeValidateDoc.vue
index 5cf66eecf..26321dd82 100644
--- a/doc/dropdown/form/VeeValidateDoc.vue
+++ b/doc/dropdown/form/VeeValidateDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name" :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
-            </span>
+            </FloatLabel>
             <small id="dd-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -56,11 +56,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -72,11 +72,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -129,11 +129,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Dropdown id="dd" v-model="value" :options="cities" optionLabel="name"
                     :class="['w-full md:w-14rem', { 'p-invalid': errorMessage }]" aria-describedby="dd-error" />
                 <label for="dd">Select a City</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="dd-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index 887699df2..06afc5683 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -5,16 +5,20 @@
     <div class="card flex justify-content-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-user" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-user" />
+                    </InputIcon>
                     <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </div>
+                </IconField>
             </div>
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-envelope" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-envelope" />
+                    </InputIcon>
                     <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </div>
+                </IconField>
             </div>
             <div class="field-checkbox">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@@ -37,16 +41,20 @@ export default {
                 basic: `
 <div v-focustrap class="w-full" style="max-width: 20rem">
     <div class="field">
-        <div class="p-input-icon-right">
-            <i class="pi pi-user" />
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-user" />
+            </InputIcon>
             <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-        </div>
+        </IconField>
     </div>
     <div class="field">
-        <div class="p-input-icon-right">
-            <i class="pi pi-envelope" />
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-envelope" />
+            </InputIcon>
             <InputText id="email" v-model="email" type="email" placeholder="Email" />
-        </div>
+        </IconField>
     </div>
     <div class="field-checkbox">
         <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@@ -60,16 +68,20 @@ export default {
     <div class="card flex justify-content-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-user" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-user" />
+                    </InputIcon>
                     <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </div>
+                </IconField>
             </div>
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-envelope" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-envelope" />
+                    </InputIcon>
                     <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </div>
+                </IconField>
             </div>
             <div class="field-checkbox">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
@@ -97,16 +109,20 @@ export default {
     <div class="card flex justify-content-center p-fluid">
         <div v-focustrap class="w-full" style="max-width: 20rem">
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-user" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-user" />
+                    </InputIcon>
                     <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
-                </div>
+                </IconField>
             </div>
             <div class="field">
-                <div class="p-input-icon-right">
-                    <i class="pi pi-envelope" />
+                <IconField>
+                    <InputIcon>
+                        <i class="pi pi-envelope" />
+                    </InputIcon>
                     <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </div>
+                </IconField>
             </div>
             <div class="field-checkbox">
                 <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index 588649835..0c6902d58 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +18,18 @@ export default {
             value: '',
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
     <label for="ssn">SSN</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -42,15 +42,15 @@ export default {
     }
 }
 <\/script>
-        
+
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
             <label for="ssn">SSN</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/inputnumber/FloatLabelDoc.vue b/doc/inputnumber/FloatLabelDoc.vue
index 4fcbee4da..311d903d9 100644
--- a/doc/inputnumber/FloatLabelDoc.vue
+++ b/doc/inputnumber/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +18,18 @@ export default {
             value: null,
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <InputNumber id="number-input" v-model="value" />
     <label for="number-input">Number</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -46,10 +46,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputNumber id="number-input" v-model="value" />
             <label for="number-input">Number</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/inputtext/FloatLabelDoc.vue b/doc/inputtext/FloatLabelDoc.vue
index ff76a3c4b..4f02d615e 100644
--- a/doc/inputtext/FloatLabelDoc.vue
+++ b/doc/inputtext/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,18 +18,18 @@ export default {
             value: null,
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <InputText id="username" v-model="value" />
     <label for="username">Username</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -47,10 +47,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <InputText id="username" v-model="value" />
             <label for="username">Username</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/inputtext/IconsDoc.vue b/doc/inputtext/IconsDoc.vue
index 58c0256e2..95b6cb181 100644
--- a/doc/inputtext/IconsDoc.vue
+++ b/doc/inputtext/IconsDoc.vue
@@ -1,17 +1,24 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either <i>.p-input-icon-left</i> or <i>.p-input-icon-right</i> class.</p>
+        <p>
+            A group is created by wrapping the input and icon with the <i>IconField</i> component. Each icon is defined as a child of <i>InputIcon</i> component. In addition, position of the icon can be changed using <i>iconPosition</i> property that
+            the default value is <i>right</i> and also <i>left</i> option is available.
+        </p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-3">
-        <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+        <IconField iconPosition="left">
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
             <InputText v-model="value1" placeholder="Search" />
-        </span>
+        </IconField>
 
-        <span class="p-input-icon-right">
-            <i class="pi pi-spin pi-spinner" />
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-spin pi-spinner" />
+            </InputIcon>
             <InputText v-model="value2" />
-        </span>
+        </IconField>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -24,28 +31,36 @@ export default {
             value2: null,
             code: {
                 basic: `
-<span class="p-input-icon-left">
-    <i class="pi pi-search" />
+<IconField iconPosition="left">
+    <InputIcon>
+        <i class="pi pi-search" />
+    </InputIcon>
     <InputText v-model="value1" placeholder="Search" />
-</span>
+</IconField>
 
-<span class="p-input-icon-right">
-    <i class="pi pi-spin pi-spinner" />
+<IconField>
+    <InputIcon>
+        <i class="pi pi-spin pi-spinner" />
+    </InputIcon>
     <InputText v-model="value2" />
-</span>
+</IconField>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
-        <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+        <IconField iconPosition="left">
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
             <InputText v-model="value1" placeholder="Search" />
-        </span>
-            
-        <span class="p-input-icon-right">
-            <i class="pi pi-spin pi-spinner" />
+        </IconField>
+
+        <IconField>
+            <InputIcon>
+                <i class="pi pi-spin pi-spinner" />
+            </InputIcon>
             <InputText v-model="value2" />
-        </span>
+        </IconField>
     </div>
 </template>
 
@@ -63,15 +78,19 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
-        <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+        <IconField iconPosition="left">
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
             <InputText v-model="value1" placeholder="Search" />
-            </span>
-            
-            <span class="p-input-icon-right">
+        </IconField>
+
+        <IconField>
+            <InputIcon>
                 <i class="pi pi-spin pi-spinner" />
+            </InputIcon>
             <InputText v-model="value2" />
-        </span>
+        </IconField>
     </div>
 </template>
 
diff --git a/doc/inputtext/form/VeeValidateDoc.vue b/doc/inputtext/form/VeeValidateDoc.vue
index dda7f2c18..00331092f 100644
--- a/doc/inputtext/form/VeeValidateDoc.vue
+++ b/doc/inputtext/form/VeeValidateDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
-            </span>
+            </FloatLabel>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -49,10 +49,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -64,10 +64,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -109,10 +109,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
                 <label for="value">Name - Surname</label>
-            </span>
+            </FloatLabel>
             <small class="p-error" id="text-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 4a181ce18..04d8d9c73 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,18 +25,18 @@ export default {
             ],
             code: {
                 basic: `
-<span class="p-float-label w-full md:w-20rem">
+<FloatLabel class="w-full md:w-20rem">
     <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
     <label for="ms-cities">MultiSelect</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -60,10 +60,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
             <label for="ms-cities">MultiSelect</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/password/FloatLabelDoc.vue b/doc/password/FloatLabelDoc.vue
index 4540904b3..a26cc4081 100644
--- a/doc/password/FloatLabelDoc.vue
+++ b/doc/password/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,38 +18,38 @@ export default {
             value: null,
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <Password v-model="value" inputId="password" />
     <label for="password">Password</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
 <script>
 export default {
-  data() {
-      return {
-          value: null
-      }
-  }
+    data() {
+        return {
+            value: null
+        }
+    }
 };
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Password v-model="value" inputId="password" />
             <label for="password">Password</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index 8bf7e5502..f585eb6c5 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
             <label>Username</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,38 +18,38 @@ export default {
             value: '',
             code: {
                 basic: `
-<span class="p-float-label">
+<FloatLabel>
     <Textarea v-model="value" rows="5" cols="30" />
     <label>Username</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" />
             <label>Username</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
 <script>
 export default {
-  data() {
-      return {
-          value: ''
-      }
-  }
+    data() {
+        return {
+            value: ''
+        }
+    }
 };
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label">
+        <FloatLabel>
             <Textarea v-model="value" rows="5" cols="30" />
             <label>Username</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
index aaee090d6..512f71697 100644
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
                 <label for="value">Description</label>
-            </span>
+            </FloatLabel>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -47,10 +47,10 @@ export default {
                 basic: `
 <div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
-        <span class="p-float-label">
+        <FloatLabel>
             <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
             <label for="value">Description</label>
-        </span>
+        </FloatLabel>
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
@@ -61,10 +61,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
                 <label for="value">Description</label>
-            </span>
+            </FloatLabel>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
@@ -105,10 +105,10 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
-            <span class="p-float-label">
+            <FloatLabel>
                 <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
                 <label for="value">Description</label>
-            </span>
+            </FloatLabel>
             <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
             <Button type="submit" label="Submit" />
         </form>
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 5c48c8020..e700777a1 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -11,10 +11,12 @@
             </template>
 
             <template #center>
-                <span class="p-input-icon-left">
-                    <i class="pi pi-search" />
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
                     <InputText placeholder="Search" />
-                </span>
+                </IconField>
             </template>
 
             <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@@ -47,10 +49,12 @@ export default {
     </template>
 
     <template #center>
-        <span class="p-input-icon-left">
-            <i class="pi pi-search" />
+        <IconField iconPosition="left">
+            <InputIcon>
+                <i class="pi pi-search" />
+            </InputIcon>
             <InputText placeholder="Search" />
-        </span>
+        </IconField>
     </template>
 
     <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@@ -67,10 +71,12 @@ export default {
             </template>
 
             <template #center>
-                <span class="p-input-icon-left">
-                    <i class="pi pi-search" />
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
                     <InputText placeholder="Search" />
-                </span>
+                </IconField>
             </template>
 
             <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
@@ -108,10 +114,12 @@ export default {
             </template>
 
             <template #center>
-                <span class="p-input-icon-left">
-                    <i class="pi pi-search" />
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <i class="pi pi-search" />
+                    </InputIcon>
                     <InputText placeholder="Search" />
-                </span>
+                </IconField>
             </template>
 
             <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index dbd1c72fa..0c0ef65ae 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -3,10 +3,10 @@
         <p>A floating label appears on top of the input field when focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
-        </span>
+        </FloatLabel>
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -21,18 +21,18 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<span class="p-float-label w-full md:w-20rem">
+<FloatLabel class="w-full md:w-20rem">
     <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
     <label>Tree Select</label>
-</span>
+</FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
@@ -55,10 +55,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <span class="p-float-label w-full md:w-20rem">
+        <FloatLabel class="w-full md:w-20rem">
             <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
             <label>Tree Select</label>
-        </span>
+        </FloatLabel>
     </div>
 </template>
 
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index 7ed963dfa..b459a75ec 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -13,10 +13,12 @@
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
                 <div class="text-right">
-                    <div class="p-input-icon-left">
-                        <i class="pi pi-search"></i>
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </div>
+                    </IconField>
                 </div>
             </template>
             <Column field="name" header="Name" expander>
@@ -58,10 +60,12 @@ export default {
 <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
     <template #header>
         <div class="text-right">
-            <div class="p-input-icon-left">
-                <i class="pi pi-search"></i>
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <i class="pi pi-search" />
+                </InputIcon>
                 <InputText v-model="filters['global']" placeholder="Global Search" />
-            </div>
+            </IconField>
         </div>
     </template>
     <Column field="name" header="Name" expander>
@@ -90,10 +94,12 @@ export default {
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
                 <div class="text-right">
-                    <div class="p-input-icon-left">
-                        <i class="pi pi-search"></i>
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </div>
+                    </IconField>
                 </div>
             </template>
             <Column field="name" header="Name" expander>
@@ -145,10 +151,12 @@ export default {
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
                 <div class="text-right">
-                    <div class="p-input-icon-left">
-                        <i class="pi pi-search"></i>
+                    <IconField iconPosition="left">
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
                         <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </div>
+                    </IconField>
                 </div>
             </template>
             <Column field="name" header="Name" expander>
diff --git a/pages/inputmask/index.vue b/pages/inputmask/index.vue
index d864d0a56..b6e1dbe3c 100755
--- a/pages/inputmask/index.vue
+++ b/pages/inputmask/index.vue
@@ -54,7 +54,7 @@ export default {
                 },
                 {
                     id: 'floatlabel',
-                    label: 'FloatLabel',
+                    label: 'Float Label',
                     component: FloatLabelDoc
                 },
                 {
diff --git a/pages/inputtext/index.vue b/pages/inputtext/index.vue
index 7c803d380..b4a205afa 100755
--- a/pages/inputtext/index.vue
+++ b/pages/inputtext/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent
+        title="Vue Input Component"
+        header="InputText"
+        description="InputText is an extension to standard input element with theming."
+        :componentDocs="docs"
+        :apiDocs="['InputText', 'FloatLabel', 'InputIcon', 'IconField']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -46,7 +54,7 @@ export default {
                 },
                 {
                     id: 'floatlabel',
-                    label: 'FloatLabel',
+                    label: 'Float Label',
                     component: FloatLabelDoc
                 },
                 {
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 40e6aea94..6403502f9 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -52,7 +52,7 @@ export default {
                 },
                 {
                     id: 'floatlabel',
-                    label: 'FloatLabel',
+                    label: 'Float Label',
                     component: FloatLabelDoc
                 },
                 {