From 25f716a5f4e10934cf5c5ec2c43315d1cefcff52 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 25 Oct 2024 23:13:22 +0300
Subject: [PATCH] Initiated #6651

---
 apps/showcase/doc/autocomplete/SizesDoc.vue   |  91 ++++++
 apps/showcase/doc/button/SizesDoc.vue         |   2 +-
 apps/showcase/doc/cascadeselect/SizesDoc.vue  | 299 ++++++++++++++++++
 apps/showcase/doc/checkbox/GroupDoc.vue       |   2 +-
 apps/showcase/doc/checkbox/SizesDoc.vue       | 100 ++++++
 apps/showcase/doc/datepicker/SizesDoc.vue     |  68 ++++
 apps/showcase/doc/iconfield/SizesDoc.vue      | 113 +++++++
 apps/showcase/doc/inputmask/SizesDoc.vue      |  68 ++++
 apps/showcase/doc/inputnumber/SizesDoc.vue    |  68 ++++
 apps/showcase/doc/inputotp/SizesDoc.vue       |  68 ++++
 apps/showcase/doc/inputtext/SizesDoc.vue      |   2 +-
 apps/showcase/doc/multiselect/SizesDoc.vue    |  89 ++++++
 apps/showcase/doc/password/SizesDoc.vue       |  70 ++++
 apps/showcase/doc/radiobutton/SizesDoc.vue    | 106 +++++++
 apps/showcase/doc/select/SizesDoc.vue         |  89 ++++++
 apps/showcase/doc/textarea/SizesDoc.vue       |  68 ++++
 apps/showcase/doc/treeselect/SizesDoc.vue     | 113 +++++++
 apps/showcase/pages/autocomplete/index.vue    |   6 +
 apps/showcase/pages/cascadeselect/index.vue   |   6 +
 apps/showcase/pages/checkbox/index.vue        |   6 +
 apps/showcase/pages/datepicker/index.vue      |   6 +
 apps/showcase/pages/iconfield/index.vue       |   6 +
 apps/showcase/pages/inputmask/index.vue       |   6 +
 apps/showcase/pages/inputnumber/index.vue     |   6 +
 apps/showcase/pages/inputotp/index.vue        |   6 +
 apps/showcase/pages/multiselect/index.vue     |   6 +
 apps/showcase/pages/password/index.vue        |   6 +
 apps/showcase/pages/radiobutton/index.vue     |   6 +
 apps/showcase/pages/select/index.vue          |   6 +
 apps/showcase/pages/textarea/index.vue        |  17 +-
 apps/showcase/pages/treeselect/index.vue      |   6 +
 .../src/autocomplete/AutoComplete.d.ts        |   4 +
 .../src/autocomplete/AutoComplete.vue         |   1 +
 .../src/cascadeselect/CascadeSelect.d.ts      |   4 +
 .../cascadeselect/style/CascadeSelectStyle.js |  28 +-
 packages/primevue/src/checkbox/Checkbox.d.ts  |   4 +
 .../src/checkbox/style/CheckboxStyle.js       |  28 +-
 .../primevue/src/datepicker/DatePicker.d.ts   |   4 +
 .../primevue/src/datepicker/DatePicker.vue    |   1 +
 .../src/iconfield/style/IconFieldStyle.js     |  14 +
 .../primevue/src/inputmask/InputMask.d.ts     |   4 +
 packages/primevue/src/inputmask/InputMask.vue |   1 +
 .../primevue/src/inputnumber/InputNumber.d.ts |   4 +
 .../primevue/src/inputnumber/InputNumber.vue  |   1 +
 packages/primevue/src/inputotp/InputOtp.d.ts  |   4 +
 packages/primevue/src/inputotp/InputOtp.vue   |   1 +
 .../src/inputotp/style/InputOtpStyle.js       |  10 +
 .../src/inputtext/style/InputTextStyle.js     |   4 +-
 .../primevue/src/multiselect/MultiSelect.d.ts |   4 +
 .../src/multiselect/style/MultiSelectStyle.js |  28 +-
 packages/primevue/src/password/Password.d.ts  |   4 +
 packages/primevue/src/password/Password.vue   |   1 +
 .../primevue/src/radiobutton/RadioButton.d.ts |   4 +
 .../src/radiobutton/style/RadioButtonStyle.js |  28 +-
 packages/primevue/src/select/Select.d.ts      |   4 +
 .../primevue/src/select/style/SelectStyle.js  |  28 +-
 packages/primevue/src/textarea/Textarea.d.ts  |   4 +
 .../src/textarea/style/TextareaStyle.js       |  14 +
 .../primevue/src/treeselect/TreeSelect.d.ts   |   4 +
 .../src/treeselect/style/TreeSelectStyle.js   |  28 +-
 .../themes/src/presets/aura/base/index.js     |  10 +
 .../themes/src/presets/aura/button/index.js   |  12 +-
 .../src/presets/aura/cascadeselect/index.js   |  12 +-
 .../themes/src/presets/aura/checkbox/index.js |  18 +-
 .../src/presets/aura/inputtext/index.js       |  12 +-
 .../src/presets/aura/multiselect/index.js     |  12 +-
 .../src/presets/aura/radiobutton/index.js     |  18 +-
 .../themes/src/presets/aura/select/index.js   |  12 +-
 .../themes/src/presets/aura/textarea/index.js |  12 +-
 .../src/presets/aura/treeselect/index.js      |  12 +-
 .../themes/src/presets/lara/base/index.js     |  10 +
 .../themes/src/presets/lara/button/index.js   |  12 +-
 .../src/presets/lara/cascadeselect/index.js   |  12 +-
 .../themes/src/presets/lara/checkbox/index.js |  18 +-
 .../src/presets/lara/inputtext/index.js       |  12 +-
 .../src/presets/lara/multiselect/index.js     |  12 +-
 .../src/presets/lara/radiobutton/index.js     |  18 +-
 .../themes/src/presets/lara/select/index.js   |  12 +-
 .../themes/src/presets/lara/textarea/index.js |  12 +-
 .../src/presets/lara/treeselect/index.js      |  12 +-
 .../themes/src/presets/material/base/index.js |  10 +
 .../src/presets/material/button/index.js      |  12 +-
 .../presets/material/cascadeselect/index.js   |  12 +-
 .../src/presets/material/checkbox/index.js    |  46 ++-
 .../src/presets/material/inputtext/index.js   |  12 +-
 .../src/presets/material/multiselect/index.js |  12 +-
 .../src/presets/material/radiobutton/index.js |  18 +-
 .../src/presets/material/select/index.js      |  12 +-
 .../src/presets/material/textarea/index.js    |  12 +-
 .../src/presets/material/treeselect/index.js  |  12 +-
 .../themes/src/presets/nora/base/index.js     |  10 +
 .../themes/src/presets/nora/button/index.js   |  12 +-
 .../src/presets/nora/cascadeselect/index.js   |  12 +-
 .../themes/src/presets/nora/checkbox/index.js |  18 +-
 .../src/presets/nora/inputtext/index.js       |  12 +-
 .../src/presets/nora/multiselect/index.js     |  12 +-
 .../src/presets/nora/radiobutton/index.js     |  18 +-
 .../themes/src/presets/nora/select/index.js   |  12 +-
 .../themes/src/presets/nora/textarea/index.js |  12 +-
 .../src/presets/nora/treeselect/index.js      |  12 +-
 100 files changed, 2224 insertions(+), 103 deletions(-)
 create mode 100644 apps/showcase/doc/autocomplete/SizesDoc.vue
 create mode 100644 apps/showcase/doc/cascadeselect/SizesDoc.vue
 create mode 100644 apps/showcase/doc/checkbox/SizesDoc.vue
 create mode 100644 apps/showcase/doc/datepicker/SizesDoc.vue
 create mode 100644 apps/showcase/doc/iconfield/SizesDoc.vue
 create mode 100644 apps/showcase/doc/inputmask/SizesDoc.vue
 create mode 100644 apps/showcase/doc/inputnumber/SizesDoc.vue
 create mode 100644 apps/showcase/doc/inputotp/SizesDoc.vue
 create mode 100644 apps/showcase/doc/multiselect/SizesDoc.vue
 create mode 100644 apps/showcase/doc/password/SizesDoc.vue
 create mode 100644 apps/showcase/doc/radiobutton/SizesDoc.vue
 create mode 100644 apps/showcase/doc/select/SizesDoc.vue
 create mode 100644 apps/showcase/doc/textarea/SizesDoc.vue
 create mode 100644 apps/showcase/doc/treeselect/SizesDoc.vue

diff --git a/apps/showcase/doc/autocomplete/SizesDoc.vue b/apps/showcase/doc/autocomplete/SizesDoc.vue
new file mode 100644
index 000000000..725c74bda
--- /dev/null
+++ b/apps/showcase/doc/autocomplete/SizesDoc.vue
@@ -0,0 +1,91 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
+        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            items1: [],
+            items2: [],
+            items3: [],
+            code: {
+                basic: `
+<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
+<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
+        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            items1: [],
+            items2: [],
+            items3: [],
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
+        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
+        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref("");
+const value2 = ref("");
+const value3 = ref("");
+const items1 = ref([]);
+const items2 = ref([]);
+const items3 = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/button/SizesDoc.vue b/apps/showcase/doc/button/SizesDoc.vue
index 310768126..4e6ce2a1b 100644
--- a/apps/showcase/doc/button/SizesDoc.vue
+++ b/apps/showcase/doc/button/SizesDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
+        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-wrap items-center justify-center gap-4">
         <Button label="Small" icon="pi pi-check" size="small" />
diff --git a/apps/showcase/doc/cascadeselect/SizesDoc.vue b/apps/showcase/doc/cascadeselect/SizesDoc.vue
new file mode 100644
index 000000000..d641a5d74
--- /dev/null
+++ b/apps/showcase/doc/cascadeselect/SizesDoc.vue
@@ -0,0 +1,299 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CascadeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" size="small" placeholder="Small" />
+<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" placeholder="Normal" />
+<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+    class="w-56" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="small" placeholder="Small" />
+        <CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" placeholder="Normal" />
+        <CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
+            class="w-56" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/checkbox/GroupDoc.vue b/apps/showcase/doc/checkbox/GroupDoc.vue
index d2defdca8..aa12eca93 100644
--- a/apps/showcase/doc/checkbox/GroupDoc.vue
+++ b/apps/showcase/doc/checkbox/GroupDoc.vue
@@ -76,7 +76,7 @@ export default {
     data() {
         return {
             pizza: null
-        };
+        }
     }
 };
 <\/script>
diff --git a/apps/showcase/doc/checkbox/SizesDoc.vue b/apps/showcase/doc/checkbox/SizesDoc.vue
new file mode 100644
index 000000000..044dc69d3
--- /dev/null
+++ b/apps/showcase/doc/checkbox/SizesDoc.vue
@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkbox provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null,
+            code: {
+                basic: `
+<div class="card flex flex-wrap justify-center gap-4">
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+        <label for="size_small" class="text-sm">Small</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+        <label for="size_normal">Normal</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+        <label for="size_large" class="text-lg">Large</label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+            <label for="size_small" class="text-sm">Small</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
+            <label for="size_normal">Normal</label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+            <label for="size_large" class="text-lg">Large</label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const size = ref();
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/datepicker/SizesDoc.vue b/apps/showcase/doc/datepicker/SizesDoc.vue
new file mode 100644
index 000000000..19fddd313
--- /dev/null
+++ b/apps/showcase/doc/datepicker/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" />
+        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<DatePicker v-model="value1" size="small" placeholder="Small" />
+<DatePicker v-model="value2" placeholder="Normal" />
+<DatePicker v-model="value3" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" />
+        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <DatePicker v-model="value1" size="small" placeholder="Small" />
+        <DatePicker v-model="value2" placeholder="Normal" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/iconfield/SizesDoc.vue b/apps/showcase/doc/iconfield/SizesDoc.vue
new file mode 100644
index 000000000..9fe9f69c7
--- /dev/null
+++ b/apps/showcase/doc/iconfield/SizesDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IconField is compatible with the size setting of the input field.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" placeholder="Normal" />
+            <InputIcon class="pi pi-user" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-lock" />
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<IconField>
+    <InputIcon class="pi pi-search" />
+    <InputText v-model="value1" placeholder="Small" size="small" />
+</IconField>
+
+<IconField>
+    <InputIcon class="pi pi-search" />
+    <InputText v-model="value2" placeholder="Normal" />
+</IconField>
+
+<IconField>
+    <InputText v-model="value3" placeholder="Large" size="large" />
+    <InputIcon class="pi pi-spin pi-spinner" />
+</IconField>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value2" placeholder="Normal" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value2" placeholder="Normal" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon class="pi pi-spin pi-spinner" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputmask/SizesDoc.vue b/apps/showcase/doc/inputmask/SizesDoc.vue
new file mode 100644
index 000000000..bb94c9649
--- /dev/null
+++ b/apps/showcase/doc/inputmask/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputnumber/SizesDoc.vue b/apps/showcase/doc/inputnumber/SizesDoc.vue
new file mode 100644
index 000000000..f215787a7
--- /dev/null
+++ b/apps/showcase/doc/inputnumber/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
+        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputotp/SizesDoc.vue b/apps/showcase/doc/inputotp/SizesDoc.vue
new file mode 100644
index 000000000..1ff38ad04
--- /dev/null
+++ b/apps/showcase/doc/inputotp/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputOtp provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<InputOtp v-model="value1" size="small" />
+<InputOtp v-model="value2" />
+<InputOtp v-model="value3" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputOtp v-model="value1" size="small" />
+        <InputOtp v-model="value2" />
+        <InputOtp v-model="value3" size="large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputtext/SizesDoc.vue b/apps/showcase/doc/inputtext/SizesDoc.vue
index 39dbcf826..b76917666 100644
--- a/apps/showcase/doc/inputtext/SizesDoc.vue
+++ b/apps/showcase/doc/inputtext/SizesDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
+        <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
diff --git a/apps/showcase/doc/multiselect/SizesDoc.vue b/apps/showcase/doc/multiselect/SizesDoc.vue
new file mode 100644
index 000000000..1e8f07828
--- /dev/null
+++ b/apps/showcase/doc/multiselect/SizesDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>MultiSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
+        <MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
+        <MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const countries = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/password/SizesDoc.vue b/apps/showcase/doc/password/SizesDoc.vue
new file mode 100644
index 000000000..08ac4e418
--- /dev/null
+++ b/apps/showcase/doc/password/SizesDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Password provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<div class="card flex flex-col items-center gap-4">
+    <Password v-model="value1" type="text" size="small" placeholder="Small" />
+    <Password v-model="value2" type="text" placeholder="Normal" />
+    <Password v-model="value3" type="text" size="large" placeholder="Large" />
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Password v-model="value1" type="text" size="small" placeholder="Small" />
+        <Password v-model="value2" type="text" placeholder="Normal" />
+        <Password v-model="value3" type="text" size="large" placeholder="Large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/radiobutton/SizesDoc.vue b/apps/showcase/doc/radiobutton/SizesDoc.vue
new file mode 100644
index 000000000..1f3794489
--- /dev/null
+++ b/apps/showcase/doc/radiobutton/SizesDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>RadioButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null,
+            code: {
+                basic: `
+<div class="flex flex-wrap gap-4">
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+        <label for="size_small" class="text-sm">Small</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+        <label for="size_normal">Normal</label>
+    </div>
+    <div class="flex items-center gap-2">
+        <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+        <label for="size_large" class="text-lg">Large</label>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            size: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
+                <label for="size_small" class="text-sm">Small</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
+                <label for="size_normal">Normal</label>
+            </div>
+            <div class="flex items-center gap-2">
+                <RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
+                <label for="size_large" class="text-lg">Large</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const size = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/select/SizesDoc.vue b/apps/showcase/doc/select/SizesDoc.vue
new file mode 100644
index 000000000..2cbe09ac8
--- /dev/null
+++ b/apps/showcase/doc/select/SizesDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Select provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
+        <Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
+        <Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/textarea/SizesDoc.vue b/apps/showcase/doc/textarea/SizesDoc.vue
new file mode 100644
index 000000000..12a2a820d
--- /dev/null
+++ b/apps/showcase/doc/textarea/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Textarea provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            code: {
+                basic: `
+<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+<Textarea v-model="value2" placeholder="Normal" rows="3" />
+<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/treeselect/SizesDoc.vue b/apps/showcase/doc/treeselect/SizesDoc.vue
new file mode 100644
index 000000000..7c6981700
--- /dev/null
+++ b/apps/showcase/doc/treeselect/SizesDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>TreeSelect provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            nodes: null,
+            code: {
+                basic: `
+<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            nodes: null
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
+        <TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
+        <TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const nodes = 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/autocomplete/index.vue b/apps/showcase/pages/autocomplete/index.vue
index f613987ed..3d8dba94a 100755
--- a/apps/showcase/pages/autocomplete/index.vue
+++ b/apps/showcase/pages/autocomplete/index.vue
@@ -21,6 +21,7 @@ import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
 import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
 import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
 import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
 import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
 import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
 import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
@@ -94,6 +95,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'multiple',
                     label: 'Multiple',
diff --git a/apps/showcase/pages/cascadeselect/index.vue b/apps/showcase/pages/cascadeselect/index.vue
index 314cb5fd4..b30a79b99 100644
--- a/apps/showcase/pages/cascadeselect/index.vue
+++ b/apps/showcase/pages/cascadeselect/index.vue
@@ -18,6 +18,7 @@ import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/cascadeselect/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/cascadeselect/SizesDoc.vue';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
@@ -69,6 +70,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/checkbox/index.vue b/apps/showcase/pages/checkbox/index.vue
index 5eb9aeec6..68615ec91 100755
--- a/apps/showcase/pages/checkbox/index.vue
+++ b/apps/showcase/pages/checkbox/index.vue
@@ -20,6 +20,7 @@ import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
 import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
 import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
 import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
+import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
 import PTComponent from '@/doc/checkbox/pt/index.vue';
 import ThemingDoc from '@/doc/checkbox/theming/index.vue';
@@ -63,6 +64,11 @@ export default {
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/datepicker/index.vue b/apps/showcase/pages/datepicker/index.vue
index 6fbbcbebd..e131f3d53 100755
--- a/apps/showcase/pages/datepicker/index.vue
+++ b/apps/showcase/pages/datepicker/index.vue
@@ -14,6 +14,7 @@ import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
 import FormsDoc from '@/doc/datepicker/FormsDoc.vue';
 import IconDoc from '@/doc/datepicker/IconDoc.vue';
 import IftaLabelDoc from '@/doc/datepicker/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/datepicker/SizesDoc.vue';
 import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
 import InlineDoc from '@/doc/datepicker/InlineDoc.vue';
 import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue';
@@ -127,6 +128,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizez',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/iconfield/index.vue b/apps/showcase/pages/iconfield/index.vue
index 83b58ea55..317ab92ef 100644
--- a/apps/showcase/pages/iconfield/index.vue
+++ b/apps/showcase/pages/iconfield/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
 import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue';
 import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/iconfield/SizesDoc.vue';
 import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
 import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
 import PTComponent from '@/doc/iconfield/pt/index.vue';
@@ -41,6 +42,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/apps/showcase/pages/inputmask/index.vue b/apps/showcase/pages/inputmask/index.vue
index b22db0008..a81c4f96c 100755
--- a/apps/showcase/pages/inputmask/index.vue
+++ b/apps/showcase/pages/inputmask/index.vue
@@ -18,6 +18,7 @@ import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/inputmask/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/inputmask/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
 import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
 import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
@@ -75,6 +76,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/inputnumber/index.vue b/apps/showcase/pages/inputnumber/index.vue
index 0b162a2cd..753e01df4 100755
--- a/apps/showcase/pages/inputnumber/index.vue
+++ b/apps/showcase/pages/inputnumber/index.vue
@@ -19,6 +19,7 @@ import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/inputnumber/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/inputnumber/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
 import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
 import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
@@ -87,6 +88,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/inputotp/index.vue b/apps/showcase/pages/inputotp/index.vue
index 365fb2f36..a66b26705 100644
--- a/apps/showcase/pages/inputotp/index.vue
+++ b/apps/showcase/pages/inputotp/index.vue
@@ -6,6 +6,7 @@
 import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
 import FilledDoc from '@/doc/inputotp/FilledDoc.vue';
+import SizesDoc from '@/doc/inputotp/SizesDoc.vue';
 import FormsDoc from '@/doc/inputotp/FormsDoc.vue';
 import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
 import IntegerOnlyDoc from '@/doc/inputotp/IntegerOnlyDoc.vue';
@@ -49,6 +50,11 @@ export default {
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'template',
                     label: 'Template',
diff --git a/apps/showcase/pages/multiselect/index.vue b/apps/showcase/pages/multiselect/index.vue
index b6332e305..beef9aa88 100755
--- a/apps/showcase/pages/multiselect/index.vue
+++ b/apps/showcase/pages/multiselect/index.vue
@@ -21,6 +21,7 @@ import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/multiselect/FormsDoc.vue';
 import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
 import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/multiselect/SizesDoc.vue';
 import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
 import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
@@ -93,6 +94,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/password/index.vue b/apps/showcase/pages/password/index.vue
index c6427005d..1f899d23c 100755
--- a/apps/showcase/pages/password/index.vue
+++ b/apps/showcase/pages/password/index.vue
@@ -14,6 +14,7 @@ import ImportDoc from '@/doc/password/ImportDoc.vue';
 import InvalidDoc from '@/doc/password/InvalidDoc.vue';
 import LocaleDoc from '@/doc/password/LocaleDoc.vue';
 import MeterDoc from '@/doc/password/MeterDoc.vue';
+import SizesDoc from '@/doc/password/SizesDoc.vue';
 import TemplateDoc from '@/doc/password/TemplateDoc.vue';
 import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
 import PTComponent from '@/doc/password/pt/index.vue';
@@ -73,6 +74,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/radiobutton/index.vue b/apps/showcase/pages/radiobutton/index.vue
index d4b51c2a4..645e39724 100755
--- a/apps/showcase/pages/radiobutton/index.vue
+++ b/apps/showcase/pages/radiobutton/index.vue
@@ -18,6 +18,7 @@ import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
 import FormsDoc from '@/doc/radiobutton/FormsDoc.vue';
 import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
+import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
 import PTComponent from '@/doc/radiobutton/pt/index.vue';
 import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
@@ -51,6 +52,11 @@ export default {
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/select/index.vue b/apps/showcase/pages/select/index.vue
index 07ff9b896..899b09fa5 100755
--- a/apps/showcase/pages/select/index.vue
+++ b/apps/showcase/pages/select/index.vue
@@ -15,6 +15,7 @@ import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/select/FormsDoc.vue';
 import GroupDoc from '@/doc/select/GroupDoc.vue';
 import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/select/SizesDoc.vue';
 import ImportDoc from '@/doc/select/ImportDoc.vue';
 import InvalidDoc from '@/doc/select/InvalidDoc.vue';
 import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
@@ -103,6 +104,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/apps/showcase/pages/textarea/index.vue b/apps/showcase/pages/textarea/index.vue
index e491421b8..c54e3de65 100755
--- a/apps/showcase/pages/textarea/index.vue
+++ b/apps/showcase/pages/textarea/index.vue
@@ -20,6 +20,7 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/textarea/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
 import ThemingDoc from '@/doc/textarea/theming/index.vue';
@@ -48,6 +49,11 @@ export default {
                     label: 'Auto Resize',
                     component: AutoResizeDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -59,9 +65,14 @@ export default {
                     component: IftaLabelDoc
                 },
                 {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
                 },
                 {
                     id: 'invalid',
diff --git a/apps/showcase/pages/treeselect/index.vue b/apps/showcase/pages/treeselect/index.vue
index 4a59381fd..8d9f576ff 100644
--- a/apps/showcase/pages/treeselect/index.vue
+++ b/apps/showcase/pages/treeselect/index.vue
@@ -20,6 +20,7 @@ import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
 import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/treeselect/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
+import SizesDoc from '@/doc/treeselect/SizesDoc.vue';
 import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
 import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
@@ -87,6 +88,11 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts
index 69f41a576..7f3e97bdf 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.d.ts
+++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts
@@ -367,6 +367,10 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     loading?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/autocomplete/AutoComplete.vue b/packages/primevue/src/autocomplete/AutoComplete.vue
index 687981c7f..b366bf208 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.vue
+++ b/packages/primevue/src/autocomplete/AutoComplete.vue
@@ -13,6 +13,7 @@
             :tabindex="!disabled ? tabindex : -1"
             :fluid="$fluid"
             :disabled="disabled"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             autocomplete="off"
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
index 9ead6ddcb..a93d66ed7 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
@@ -304,6 +304,10 @@ export interface CascadeSelectProps {
      * @defaultValue 960px
      */
     breakpoint?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index e527d6fb9..0337b74c2 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -208,6 +208,30 @@ const theme = ({ dt }) => `
 .p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
     transform: rotate(-90deg);
 }
+
+.p-cascadeselect-sm .p-cascadeselect-label {
+    font-size: ${dt('cascadeselect.sm.font.size')};
+    padding-block: ${dt('cascadeselect.sm.padding.y')};
+    padding-inline: ${dt('cascadeselect.sm.padding.x')};
+}
+
+.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
+    font-size: ${dt('cascadeselect.sm.font.size')};
+    width: ${dt('cascadeselect.sm.font.size')};
+    height: ${dt('cascadeselect.sm.font.size')};
+}
+
+.p-cascadeselect-lg .p-cascadeselect-label {
+    font-size: ${dt('cascadeselect.lg.font.size')};
+    padding-block: ${dt('cascadeselect.lg.padding.y')};
+    padding-inline: ${dt('cascadeselect.lg.padding.x')};
+}
+
+.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
+    font-size: ${dt('cascadeselect.lg.font.size')};
+    width: ${dt('cascadeselect.lg.font.size')};
+    height: ${dt('cascadeselect.lg.font.size')};
+}
 `;
 
 const inlineStyles = {
@@ -226,7 +250,9 @@ const classes = {
             'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-cascadeselect-open': instance.overlayVisible,
-            'p-cascadeselect-fluid': instance.$fluid
+            'p-cascadeselect-fluid': instance.$fluid,
+            'p-cascadeselect-sm p-inputfield-sm': props.size === 'small',
+            'p-cascadeselect-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     label: ({ instance, props }) => [
diff --git a/packages/primevue/src/checkbox/Checkbox.d.ts b/packages/primevue/src/checkbox/Checkbox.d.ts
index 598624eb4..430a71db3 100755
--- a/packages/primevue/src/checkbox/Checkbox.d.ts
+++ b/packages/primevue/src/checkbox/Checkbox.d.ts
@@ -120,6 +120,10 @@ export interface CheckboxProps {
      * @default false
      */
     indeterminate?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js
index 46a739a70..cf9459a01 100644
--- a/packages/primevue/src/checkbox/style/CheckboxStyle.js
+++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js
@@ -112,6 +112,30 @@ const theme = ({ dt }) => `
 .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
     color: ${dt('checkbox.icon.disabled.color')};
 }
+
+.p-checkbox-sm,
+.p-checkbox-sm .p-checkbox-box {
+    width: ${dt('checkbox.sm.width')};
+    height: ${dt('checkbox.sm.height')};
+}
+
+.p-checkbox-sm .p-checkbox-icon {
+    font-size: ${dt('checkbox.icon.sm.size')};
+    width: ${dt('checkbox.icon.sm.size')};
+    height: ${dt('checkbox.icon.sm.size')};
+}
+
+.p-checkbox-lg,
+.p-checkbox-lg .p-checkbox-box {
+    width: ${dt('checkbox.lg.width')};
+    height: ${dt('checkbox.lg.height')};
+}
+
+.p-checkbox-lg .p-checkbox-icon {
+    font-size: ${dt('checkbox.icon.lg.size')};
+    width: ${dt('checkbox.icon.lg.size')};
+    height: ${dt('checkbox.icon.lg.size')};
+}
 `;
 
 const classes = {
@@ -121,7 +145,9 @@ const classes = {
             'p-checkbox-checked': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': instance.$pcCheckboxGroup ? instance.$pcCheckboxGroup.$invalid : instance.$invalid,
-            'p-variant-filled': instance.$variant === 'filled'
+            'p-variant-filled': instance.$variant === 'filled',
+            'p-checkbox-sm p-inputfield-sm': props.size === 'small',
+            'p-checkbox-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     box: 'p-checkbox-box',
diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts
index 2bee6a578..1ee7bf118 100755
--- a/packages/primevue/src/datepicker/DatePicker.d.ts
+++ b/packages/primevue/src/datepicker/DatePicker.d.ts
@@ -703,6 +703,10 @@ export interface DatePickerProps {
      * @defaultValue true
      */
     manualInput?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index 5fdaa3c26..e0adcb0cd 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -10,6 +10,7 @@
             :value="inputFieldValue"
             :placeholder="placeholder"
             :name="name"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             :fluid="fluid"
diff --git a/packages/primevue/src/iconfield/style/IconFieldStyle.js b/packages/primevue/src/iconfield/style/IconFieldStyle.js
index 6b72d214d..4ecc4ebdf 100644
--- a/packages/primevue/src/iconfield/style/IconFieldStyle.js
+++ b/packages/primevue/src/iconfield/style/IconFieldStyle.js
@@ -28,6 +28,20 @@ const theme = ({ dt }) => `
 .p-iconfield .p-inputtext:not(:last-child) {
     padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
+
+.p-iconfield:has(.p-inputfield-sm) .p-inputicon {
+    font-size: ${dt('form.field.sm.font.size')};
+    width: ${dt('form.field.sm.font.size')};
+    height: ${dt('form.field.sm.font.size')};
+    margin-top: calc(-1 * (${dt('form.field.sm.font.size')} / 2));
+}
+
+.p-iconfield:has(.p-inputfield-lg) .p-inputicon {
+    font-size: ${dt('form.field.lg.font.size')};
+    width: ${dt('form.field.lg.font.size')};
+    height: ${dt('form.field.lg.font.size')};
+    margin-top: calc(-1 * (${dt('form.field.lg.font.size')} / 2));
+}
 `;
 
 const classes = {
diff --git a/packages/primevue/src/inputmask/InputMask.d.ts b/packages/primevue/src/inputmask/InputMask.d.ts
index 06b769de3..2aa5fec3e 100755
--- a/packages/primevue/src/inputmask/InputMask.d.ts
+++ b/packages/primevue/src/inputmask/InputMask.d.ts
@@ -156,6 +156,10 @@ export interface InputMaskProps {
      * Name of the input element.
      */
     name?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * Specifies the input variant of the component.
      * @defaultValue outlined
diff --git a/packages/primevue/src/inputmask/InputMask.vue b/packages/primevue/src/inputmask/InputMask.vue
index 549feed3f..cbec1a1ee 100755
--- a/packages/primevue/src/inputmask/InputMask.vue
+++ b/packages/primevue/src/inputmask/InputMask.vue
@@ -6,6 +6,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :invalid="invalid"
+        :size="size"
         :name="name"
         :variant="variant"
         :placeholder="placeholder"
diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts
index 2a095a6c7..8a8173c8a 100755
--- a/packages/primevue/src/inputnumber/InputNumber.d.ts
+++ b/packages/primevue/src/inputnumber/InputNumber.d.ts
@@ -323,6 +323,10 @@ export interface InputNumberProps {
      * @defaultValue false
      */
     highlightOnFocus?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/inputnumber/InputNumber.vue b/packages/primevue/src/inputnumber/InputNumber.vue
index 76090a00e..9c76a08b6 100755
--- a/packages/primevue/src/inputnumber/InputNumber.vue
+++ b/packages/primevue/src/inputnumber/InputNumber.vue
@@ -16,6 +16,7 @@
             :placeholder="placeholder"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             @input="onUserInput"
diff --git a/packages/primevue/src/inputotp/InputOtp.d.ts b/packages/primevue/src/inputotp/InputOtp.d.ts
index 0fdd53d0c..b660f7718 100755
--- a/packages/primevue/src/inputotp/InputOtp.d.ts
+++ b/packages/primevue/src/inputotp/InputOtp.d.ts
@@ -151,6 +151,10 @@ export interface InputOtpProps {
      * The name attribute for the element, typically used in form submissions.
      */
     name?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/inputotp/InputOtp.vue b/packages/primevue/src/inputotp/InputOtp.vue
index fb90682e6..c3da0cec7 100755
--- a/packages/primevue/src/inputotp/InputOtp.vue
+++ b/packages/primevue/src/inputotp/InputOtp.vue
@@ -11,6 +11,7 @@
                     :variant="variant"
                     :readonly="readonly"
                     :disabled="disabled"
+                    :size="size"
                     :invalid="invalid"
                     :tabindex="tabindex"
                     :unstyled="unstyled"
diff --git a/packages/primevue/src/inputotp/style/InputOtpStyle.js b/packages/primevue/src/inputotp/style/InputOtpStyle.js
index a56881e91..120cf11bc 100644
--- a/packages/primevue/src/inputotp/style/InputOtpStyle.js
+++ b/packages/primevue/src/inputotp/style/InputOtpStyle.js
@@ -11,6 +11,16 @@ const theme = ({ dt }) => `
     text-align: center;
     width: 2.5rem;
 }
+
+.p-inputotp-input.p-inputtext-sm {
+    text-align: center;
+    width: 2rem;
+}
+
+.p-inputotp-input.p-inputtext-lg {
+    text-align: center;
+    width: 3rem;
+}
 `;
 
 const classes = {
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index 997fabf4d..824c3028f 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -78,8 +78,8 @@ const classes = {
         'p-inputtext p-component',
         {
             'p-filled': instance.$filled,
-            'p-inputtext-sm': props.size === 'small',
-            'p-inputtext-lg': props.size === 'large',
+            'p-inputtext-sm p-inputfield-sm': props.size === 'small',
+            'p-inputtext-lg p-inputfield-lg': props.size === 'large',
             'p-invalid': instance.$invalid,
             'p-variant-filled': instance.$variant === 'filled',
             'p-inputtext-fluid': instance.$fluid
diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts
index 1169dc737..450a01c37 100755
--- a/packages/primevue/src/multiselect/MultiSelect.d.ts
+++ b/packages/primevue/src/multiselect/MultiSelect.d.ts
@@ -357,6 +357,10 @@ export interface MultiSelectProps {
      * Label to display when there are no selections.
      */
     placeholder?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index 60cd05532..fc720f7b2 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -198,6 +198,30 @@ const theme = ({ dt }) => `
 .p-multiselect-fluid {
     display: flex;
 }
+
+.p-multiselect-sm .p-multiselect-label {
+    font-size: ${dt('multiselect.sm.font.size')};
+    padding-block: ${dt('multiselect.sm.padding.y')};
+    padding-inline: ${dt('multiselect.sm.padding.x')};
+}
+
+.p-multiselect-sm .p-multiselect-dropdown .p-icon {
+    font-size: ${dt('multiselect.sm.font.size')};
+    width: ${dt('multiselect.sm.font.size')};
+    height: ${dt('multiselect.sm.font.size')};
+}
+
+.p-multiselect-lg .p-multiselect-label {
+    font-size: ${dt('multiselect.lg.font.size')};
+    padding-block: ${dt('multiselect.lg.padding.y')};
+    padding-inline: ${dt('multiselect.lg.padding.x')};
+}
+
+.p-multiselect-lg .p-multiselect-dropdown .p-icon {
+    font-size: ${dt('multiselect.lg.font.size')};
+    width: ${dt('multiselect.lg.font.size')};
+    height: ${dt('multiselect.lg.font.size')};
+}
 `;
 
 const inlineStyles = {
@@ -216,7 +240,9 @@ const classes = {
             'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-multiselect-open': instance.overlayVisible,
-            'p-multiselect-fluid': instance.$fluid
+            'p-multiselect-fluid': instance.$fluid,
+            'p-multiselect-sm p-inputfield-sm': props.size === 'small',
+            'p-multiselect-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     labelContainer: 'p-multiselect-label-container',
diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts
index c093a2c97..fa6345a5f 100755
--- a/packages/primevue/src/password/Password.d.ts
+++ b/packages/primevue/src/password/Password.d.ts
@@ -231,6 +231,10 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Icon to show displaying the password as plain text.
      */
     unmaskIcon?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/password/Password.vue b/packages/primevue/src/password/Password.vue
index 7a95d3023..d773cf72f 100755
--- a/packages/primevue/src/password/Password.vue
+++ b/packages/primevue/src/password/Password.vue
@@ -19,6 +19,7 @@
             :disabled="disabled"
             :variant="variant"
             :invalid="invalid"
+            :size="size"
             :autofocus="autofocus"
             @input="onInput"
             @focus="onFocus"
diff --git a/packages/primevue/src/radiobutton/RadioButton.d.ts b/packages/primevue/src/radiobutton/RadioButton.d.ts
index d32768931..818fc90be 100755
--- a/packages/primevue/src/radiobutton/RadioButton.d.ts
+++ b/packages/primevue/src/radiobutton/RadioButton.d.ts
@@ -114,6 +114,10 @@ export interface RadioButtonProps {
      * @default false
      */
     binary?: boolean;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
index 6148790d3..d073f8f14 100644
--- a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
+++ b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
@@ -117,6 +117,30 @@ const theme = ({ dt }) => `
 .p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
     background: ${dt('radiobutton.icon.disabled.color')};
 }
+
+.p-radiobutton-sm,
+.p-radiobutton-sm .p-radiobutton-box {
+    width: ${dt('radiobutton.sm.width')};
+    height: ${dt('radiobutton.sm.height')};
+}
+
+.p-radiobutton-sm .p-radiobutton-icon {
+    font-size: ${dt('radiobutton.icon.sm.size')};
+    width: ${dt('radiobutton.icon.sm.size')};
+    height: ${dt('radiobutton.icon.sm.size')};
+}
+
+.p-radiobutton-lg,
+.p-radiobutton-lg .p-radiobutton-box {
+    width: ${dt('radiobutton.lg.width')};
+    height: ${dt('radiobutton.lg.height')};
+}
+
+.p-radiobutton-lg .p-radiobutton-icon {
+    font-size: ${dt('radiobutton.icon.lg.size')};
+    width: ${dt('radiobutton.icon.lg.size')};
+    height: ${dt('radiobutton.icon.lg.size')};
+}
 `;
 
 const classes = {
@@ -126,7 +150,9 @@ const classes = {
             'p-radiobutton-checked': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': instance.$pcRadioButtonGroup ? instance.$pcRadioButtonGroup.$invalid : instance.$invalid,
-            'p-variant-filled': instance.$variant === 'filled'
+            'p-variant-filled': instance.$variant === 'filled',
+            'p-radiobutton-sm p-inputfield-sm': props.size === 'small',
+            'p-radiobutton-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     box: 'p-radiobutton-box',
diff --git a/packages/primevue/src/select/Select.d.ts b/packages/primevue/src/select/Select.d.ts
index e935d6490..7d996ab91 100755
--- a/packages/primevue/src/select/Select.d.ts
+++ b/packages/primevue/src/select/Select.d.ts
@@ -359,6 +359,10 @@ export interface SelectProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index 3bd82ce06..b7f112ddd 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -195,6 +195,30 @@ input.p-select-label {
 .p-select-fluid {
     display: flex;
 }
+
+.p-select-sm .p-select-label {
+    font-size: ${dt('select.sm.font.size')};
+    padding-block: ${dt('select.sm.padding.y')};
+    padding-inline: ${dt('select.sm.padding.x')};
+}
+
+.p-select-sm .p-select-dropdown .p-icon {
+    font-size: ${dt('select.sm.font.size')};
+    width: ${dt('select.sm.font.size')};
+    height: ${dt('select.sm.font.size')};
+}
+
+.p-select-lg .p-select-label {
+    font-size: ${dt('select.lg.font.size')};
+    padding-block: ${dt('select.lg.padding.y')};
+    padding-inline: ${dt('select.lg.padding.x')};
+}
+
+.p-select-lg .p-select-dropdown .p-icon {
+    font-size: ${dt('select.lg.font.size')};
+    width: ${dt('select.lg.font.size')};
+    height: ${dt('select.lg.font.size')};
+}
 `;
 
 const classes = {
@@ -208,7 +232,9 @@ const classes = {
             'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
             'p-select-open': state.overlayVisible,
-            'p-select-fluid': instance.$fluid
+            'p-select-fluid': instance.$fluid,
+            'p-select-sm p-inputfield-sm': props.size === 'small',
+            'p-select-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     label: ({ instance, props }) => [
diff --git a/packages/primevue/src/textarea/Textarea.d.ts b/packages/primevue/src/textarea/Textarea.d.ts
index d58a4fd7e..7429ee76a 100755
--- a/packages/primevue/src/textarea/Textarea.d.ts
+++ b/packages/primevue/src/textarea/Textarea.d.ts
@@ -105,6 +105,10 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue false
      */
     autoResize?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js
index 8309fc1ae..acae17030 100644
--- a/packages/primevue/src/textarea/style/TextareaStyle.js
+++ b/packages/primevue/src/textarea/style/TextareaStyle.js
@@ -60,6 +60,18 @@ const theme = ({ dt }) => `
     overflow: hidden;
     resize: none;
 }
+
+.p-textarea-sm {
+    font-size: ${dt('textarea.sm.font.size')};
+    padding-block: ${dt('textarea.sm.padding.y')};
+    padding-inline: ${dt('textarea.sm.padding.x')};
+}
+
+.p-textarea-lg {
+    font-size: ${dt('textarea.lg.font.size')};
+    padding-block: ${dt('textarea.lg.padding.y')};
+    padding-inline: ${dt('textarea.lg.padding.x')};
+}
 `;
 
 const classes = {
@@ -68,6 +80,8 @@ const classes = {
         {
             'p-filled': instance.$filled,
             'p-textarea-resizable ': props.autoResize,
+            'p-textarea-sm p-inputfield-sm': props.size === 'small',
+            'p-textarea-lg p-inputfield-lg': props.size === 'large',
             'p-invalid': instance.$invalid,
             'p-variant-filled': instance.$variant === 'filled',
             'p-textarea-fluid': instance.$fluid
diff --git a/packages/primevue/src/treeselect/TreeSelect.d.ts b/packages/primevue/src/treeselect/TreeSelect.d.ts
index 021b9527f..6c3d6154c 100644
--- a/packages/primevue/src/treeselect/TreeSelect.d.ts
+++ b/packages/primevue/src/treeselect/TreeSelect.d.ts
@@ -198,6 +198,10 @@ export interface TreeSelectProps {
      * Label to display when there are no selections.
      */
     placeholder?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index a6a7db511..db0dcaa85 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -137,6 +137,30 @@ const theme = ({ dt }) => `
 .p-treeselect-label:has(.p-chip) {
     padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2);
 }
+
+.p-treeselect-sm .p-treeselect-label {
+    font-size: ${dt('treeselect.sm.font.size')};
+    padding-block: ${dt('treeselect.sm.padding.y')};
+    padding-inline: ${dt('treeselect.sm.padding.x')};
+}
+
+.p-treeselect-sm .p-treeselect-dropdown .p-icon {
+    font-size: ${dt('treeselect.sm.font.size')};
+    width: ${dt('treeselect.sm.font.size')};
+    height: ${dt('treeselect.sm.font.size')};
+}
+
+.p-treeselect-lg .p-treeselect-label {
+    font-size: ${dt('treeselect.lg.font.size')};
+    padding-block: ${dt('treeselect.lg.padding.y')};
+    padding-inline: ${dt('treeselect.lg.padding.x')};
+}
+
+.p-treeselect-lg .p-treeselect-dropdown .p-icon {
+    font-size: ${dt('treeselect.lg.font.size')};
+    width: ${dt('treeselect.lg.font.size')};
+    height: ${dt('treeselect.lg.font.size')};
+}
 `;
 
 const inlineStyles = {
@@ -155,7 +179,9 @@ const classes = {
             'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-treeselect-open': instance.overlayVisible,
-            'p-treeselect-fluid': instance.$fluid
+            'p-treeselect-fluid': instance.$fluid,
+            'p-treeselect-sm p-inputfield-sm': props.size === 'small',
+            'p-treeselect-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     labelContainer: 'p-treeselect-label-container',
diff --git a/packages/themes/src/presets/aura/base/index.js b/packages/themes/src/presets/aura/base/index.js
index 60cfa69be..6879c2d31 100644
--- a/packages/themes/src/presets/aura/base/index.js
+++ b/packages/themes/src/presets/aura/base/index.js
@@ -59,6 +59,16 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.5rem',
+            sm: {
+                fontSize: '0.875rem',
+                paddingX: '0.625rem',
+                paddingY: '0.375rem'
+            },
+            lg: {
+                fontSize: '1.125rem',
+                paddingX: '0.875rem',
+                paddingY: '0.625rem'
+            },
             borderRadius: '{border.radius.md}',
             focusRing: {
                 width: '0',
diff --git a/packages/themes/src/presets/aura/button/index.js b/packages/themes/src/presets/aura/button/index.js
index 794067aee..ba501593d 100644
--- a/packages/themes/src/presets/aura/button/index.js
+++ b/packages/themes/src/presets/aura/button/index.js
@@ -7,14 +7,14 @@ export default {
         paddingY: '{form.field.padding.y}',
         iconOnlyWidth: '2.5rem',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.375rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.625rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '500'
diff --git a/packages/themes/src/presets/aura/cascadeselect/index.js b/packages/themes/src/presets/aura/cascadeselect/index.js
index a96da0652..85af0e8b1 100644
--- a/packages/themes/src/presets/aura/cascadeselect/index.js
+++ b/packages/themes/src/presets/aura/cascadeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/aura/checkbox/index.js b/packages/themes/src/presets/aura/checkbox/index.js
index 92aafc31e..43abd5a36 100644
--- a/packages/themes/src/presets/aura/checkbox/index.js
+++ b/packages/themes/src/presets/aura/checkbox/index.js
@@ -24,13 +24,27 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1rem',
+            height: '1rem'
+        },
+        lg: {
+            width: '1.5rem',
+            height: '1.5rem'
+        }
     },
     icon: {
         size: '0.875rem',
         color: '{form.field.color}',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.75rem'
+        },
+        lg: {
+            size: '1rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/aura/inputtext/index.js b/packages/themes/src/presets/aura/inputtext/index.js
index 68dfd8e55..792d69cf3 100644
--- a/packages/themes/src/presets/aura/inputtext/index.js
+++ b/packages/themes/src/presets/aura/inputtext/index.js
@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.375rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}',
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.625rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}',
         }
     }
 };
diff --git a/packages/themes/src/presets/aura/multiselect/index.js b/packages/themes/src/presets/aura/multiselect/index.js
index ca89b93df..a14689c87 100644
--- a/packages/themes/src/presets/aura/multiselect/index.js
+++ b/packages/themes/src/presets/aura/multiselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/aura/radiobutton/index.js b/packages/themes/src/presets/aura/radiobutton/index.js
index b1b87c85f..6a9311dbe 100644
--- a/packages/themes/src/presets/aura/radiobutton/index.js
+++ b/packages/themes/src/presets/aura/radiobutton/index.js
@@ -23,12 +23,26 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1rem',
+            height: '1rem'
+        },
+        lg: {
+            width: '1.5rem',
+            height: '1.5rem'
+        }
     },
     icon: {
         size: '0.75rem',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.5rem'
+        },
+        lg: {
+            size: '1rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/aura/select/index.js b/packages/themes/src/presets/aura/select/index.js
index 75a3a9151..a09752089 100644
--- a/packages/themes/src/presets/aura/select/index.js
+++ b/packages/themes/src/presets/aura/select/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/aura/textarea/index.js b/packages/themes/src/presets/aura/textarea/index.js
index f22994ab1..f8504fdeb 100644
--- a/packages/themes/src/presets/aura/textarea/index.js
+++ b/packages/themes/src/presets/aura/textarea/index.js
@@ -22,6 +22,16 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     }
 };
diff --git a/packages/themes/src/presets/aura/treeselect/index.js b/packages/themes/src/presets/aura/treeselect/index.js
index 7da482905..6e0f5080b 100644
--- a/packages/themes/src/presets/aura/treeselect/index.js
+++ b/packages/themes/src/presets/aura/treeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/lara/base/index.js b/packages/themes/src/presets/lara/base/index.js
index 479a15cea..8c43861df 100644
--- a/packages/themes/src/presets/lara/base/index.js
+++ b/packages/themes/src/presets/lara/base/index.js
@@ -58,6 +58,16 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.625rem',
+            sm: {
+                fontSize: '0.875rem',
+                paddingX: '0.625rem',
+                paddingY: '0.5rem'
+            },
+            lg: {
+                fontSize: '1.125rem',
+                paddingX: '0.875rem',
+                paddingY: '0.75rem'
+            },
             borderRadius: '{border.radius.md}',
             focusRing: {
                 width: '{focus.ring.width}',
diff --git a/packages/themes/src/presets/lara/button/index.js b/packages/themes/src/presets/lara/button/index.js
index 54003e013..294a33ec8 100644
--- a/packages/themes/src/presets/lara/button/index.js
+++ b/packages/themes/src/presets/lara/button/index.js
@@ -7,14 +7,14 @@ export default {
         paddingY: '{form.field.padding.y}',
         iconOnlyWidth: '2.75rem',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.5rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.75rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '600'
diff --git a/packages/themes/src/presets/lara/cascadeselect/index.js b/packages/themes/src/presets/lara/cascadeselect/index.js
index 7d2a9d0ff..1f1c24d14 100644
--- a/packages/themes/src/presets/lara/cascadeselect/index.js
+++ b/packages/themes/src/presets/lara/cascadeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/lara/checkbox/index.js b/packages/themes/src/presets/lara/checkbox/index.js
index c0be95dca..5929cbc03 100644
--- a/packages/themes/src/presets/lara/checkbox/index.js
+++ b/packages/themes/src/presets/lara/checkbox/index.js
@@ -24,13 +24,27 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1.25rem',
+            height: '1.25rem'
+        },
+        lg: {
+            width: '1.75rem',
+            height: '1.75rem'
+        }
     },
     icon: {
         size: '1rem',
         color: '{form.field.color}',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.75rem'
+        },
+        lg: {
+            size: '1.25rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/inputtext/index.js b/packages/themes/src/presets/lara/inputtext/index.js
index 1773d7bfc..d079bcd27 100644
--- a/packages/themes/src/presets/lara/inputtext/index.js
+++ b/packages/themes/src/presets/lara/inputtext/index.js
@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.5rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.75rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         }
     }
 };
diff --git a/packages/themes/src/presets/lara/multiselect/index.js b/packages/themes/src/presets/lara/multiselect/index.js
index 5fb2a4f15..31a7a39c8 100644
--- a/packages/themes/src/presets/lara/multiselect/index.js
+++ b/packages/themes/src/presets/lara/multiselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/lara/radiobutton/index.js b/packages/themes/src/presets/lara/radiobutton/index.js
index 5adb6d6f5..a19fa0484 100644
--- a/packages/themes/src/presets/lara/radiobutton/index.js
+++ b/packages/themes/src/presets/lara/radiobutton/index.js
@@ -23,12 +23,26 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1.25rem',
+            height: '1.25rem'
+        },
+        lg: {
+            width: '1.75rem',
+            height: '1.75rem'
+        }
     },
     icon: {
         size: '1rem',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.75rem'
+        },
+        lg: {
+            size: '1.25rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/select/index.js b/packages/themes/src/presets/lara/select/index.js
index d382db8ec..4d6b952fa 100644
--- a/packages/themes/src/presets/lara/select/index.js
+++ b/packages/themes/src/presets/lara/select/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/lara/textarea/index.js b/packages/themes/src/presets/lara/textarea/index.js
index f22994ab1..f8504fdeb 100644
--- a/packages/themes/src/presets/lara/textarea/index.js
+++ b/packages/themes/src/presets/lara/textarea/index.js
@@ -22,6 +22,16 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/treeselect/index.js b/packages/themes/src/presets/lara/treeselect/index.js
index 7da482905..6e0f5080b 100644
--- a/packages/themes/src/presets/lara/treeselect/index.js
+++ b/packages/themes/src/presets/lara/treeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 176fde138..4c0566e84 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -58,6 +58,16 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.75rem',
+            sm: {
+                fontSize: '0.875rem',
+                paddingX: '0.625rem',
+                paddingY: '0.625rem'
+            },
+            lg: {
+                fontSize: '1.125rem',
+                paddingX: '1rem',
+                paddingY: '1rem'
+            },
             borderRadius: '{border.radius.sm}',
             focusRing: {
                 width: '2px',
diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js
index eb043585f..448cba3a5 100644
--- a/packages/themes/src/presets/material/button/index.js
+++ b/packages/themes/src/presets/material/button/index.js
@@ -7,14 +7,14 @@ export default {
         paddingY: '0.625rem',
         iconOnlyWidth: '3rem',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.875rem',
-            paddingY: '0.5rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '1.125rem',
-            paddingY: '0.75rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '500'
diff --git a/packages/themes/src/presets/material/cascadeselect/index.js b/packages/themes/src/presets/material/cascadeselect/index.js
index 6b6fbcc09..79328a5e3 100644
--- a/packages/themes/src/presets/material/cascadeselect/index.js
+++ b/packages/themes/src/presets/material/cascadeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 0fa1afbae..ebb5ed1ac 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -24,14 +24,28 @@ export default {
             offset: '0',
             shadow: 'none'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '14px',
+            height: '14px'
+        },
+        lg: {
+            width: '22px',
+            height: '22px'
+        }
     },
     icon: {
         size: '0.875rem',
         color: '{form.field.color}',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.75rem'
+        },
+        lg: {
+            size: '1rem'
+        }
     },
     css: ({ dt }) => `
 .p-checkbox {
@@ -62,7 +76,7 @@ export default {
 .p-checkbox-checked .p-checkbox-box:before  {
     content: "";
     position: absolute;
-    top: 8px;
+    top: var(--p-md-check-icon-t);
     left: 2px;
     border-right: 2px solid transparent;
     border-bottom: 2px solid transparent;
@@ -75,6 +89,24 @@ export default {
     display: none;
 }
 
+.p-checkbox {
+    --p-md-check-icon-t: 8px;
+    --p-md-check-icon-w: 4px;
+    --p-md-check-icon-h: 10px;
+}
+
+.p-checkbox-sm {
+    --p-md-check-icon-t: 6px;
+    --p-md-check-icon-w: 2px;
+    --p-md-check-icon-h: 8px;
+}
+
+.p-checkbox-lg {
+    --p-md-check-icon-t: 10px;
+    --p-md-check-icon-w: 6px;
+    --p-md-check-icon-h: 14px;
+}
+
 @keyframes p-md-check {
     0%{
       width: 0;
@@ -83,15 +115,15 @@ export default {
       transform: translate3d(0,0,0) rotate(45deg);
     }
     33%{
-      width: 4px;
+      width: var(--p-md-check-icon-w);
       height: 0;
       transform: translate3d(0,0,0) rotate(45deg);
     }
     100%{
-      width: 4px;
-      height: 10px;
+      width: var(--p-md-check-icon-w);
+      height: var(--p-md-check-icon-h);
       border-color: ${dt('checkbox.icon.checked.color')};
-      transform: translate3d(0,-10px,0) rotate(45deg);
+      transform: translate3d(0,calc(-1 * var(--p-md-check-icon-h)),0) rotate(45deg);
     }
 }
 `
diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js
index 00b1ff0e1..b61e349f5 100644
--- a/packages/themes/src/presets/material/inputtext/index.js
+++ b/packages/themes/src/presets/material/inputtext/index.js
@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.625rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '1rem',
-            paddingY: '1rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         }
     },
     css: ({ dt }) => `
diff --git a/packages/themes/src/presets/material/multiselect/index.js b/packages/themes/src/presets/material/multiselect/index.js
index 992aee8ce..5d4b46766 100644
--- a/packages/themes/src/presets/material/multiselect/index.js
+++ b/packages/themes/src/presets/material/multiselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/material/radiobutton/index.js b/packages/themes/src/presets/material/radiobutton/index.js
index 985694105..28bcbcc80 100644
--- a/packages/themes/src/presets/material/radiobutton/index.js
+++ b/packages/themes/src/presets/material/radiobutton/index.js
@@ -23,13 +23,27 @@ export default {
             offset: '0',
             shadow: 'none'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '16px',
+            height: '16px'
+        },
+        lg: {
+            width: '24px',
+            height: '24px'
+        }
     },
     icon: {
         size: '10px',
         checkedColor: '{primary.color}',
         checkedHoverColor: '{primary.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '8px'
+        },
+        lg: {
+            size: '12px'
+        }
     },
     css: ({ dt }) => `
 .p-radiobutton {
diff --git a/packages/themes/src/presets/material/select/index.js b/packages/themes/src/presets/material/select/index.js
index 31d6dac38..fdc6c3105 100644
--- a/packages/themes/src/presets/material/select/index.js
+++ b/packages/themes/src/presets/material/select/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/material/textarea/index.js b/packages/themes/src/presets/material/textarea/index.js
index f22994ab1..f8504fdeb 100644
--- a/packages/themes/src/presets/material/textarea/index.js
+++ b/packages/themes/src/presets/material/textarea/index.js
@@ -22,6 +22,16 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     }
 };
diff --git a/packages/themes/src/presets/material/treeselect/index.js b/packages/themes/src/presets/material/treeselect/index.js
index 79b78a46f..169ac4a0e 100644
--- a/packages/themes/src/presets/material/treeselect/index.js
+++ b/packages/themes/src/presets/material/treeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/nora/base/index.js b/packages/themes/src/presets/nora/base/index.js
index d67ab7cf0..b4336da70 100644
--- a/packages/themes/src/presets/nora/base/index.js
+++ b/packages/themes/src/presets/nora/base/index.js
@@ -59,6 +59,16 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.5rem',
+            sm: {
+                fontSize: '0.875rem',
+                paddingX: '0.625rem',
+                paddingY: '0.375rem'
+            },
+            lg: {
+                fontSize: '1.125rem',
+                paddingX: '0.875rem',
+                paddingY: '0.625rem'
+            },
             borderRadius: '{border.radius.xs}',
             focusRing: {
                 width: '2px',
diff --git a/packages/themes/src/presets/nora/button/index.js b/packages/themes/src/presets/nora/button/index.js
index 62a35d105..5af916271 100644
--- a/packages/themes/src/presets/nora/button/index.js
+++ b/packages/themes/src/presets/nora/button/index.js
@@ -7,14 +7,14 @@ export default {
         paddingY: '{form.field.padding.y}',
         iconOnlyWidth: '2.5rem',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.375rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.625rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '700'
diff --git a/packages/themes/src/presets/nora/cascadeselect/index.js b/packages/themes/src/presets/nora/cascadeselect/index.js
index a96da0652..85af0e8b1 100644
--- a/packages/themes/src/presets/nora/cascadeselect/index.js
+++ b/packages/themes/src/presets/nora/cascadeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/nora/checkbox/index.js b/packages/themes/src/presets/nora/checkbox/index.js
index 1f931c42a..9fdbf787d 100644
--- a/packages/themes/src/presets/nora/checkbox/index.js
+++ b/packages/themes/src/presets/nora/checkbox/index.js
@@ -24,13 +24,27 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1rem',
+            height: '1rem'
+        },
+        lg: {
+            width: '1.5rem',
+            height: '1.5rem'
+        }
     },
     icon: {
         size: '0.875rem',
         color: '{form.field.color}',
         checkedColor: '{primary.contrast.color}',
         checkedHoverColor: '{primary.contrast.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.75rem'
+        },
+        lg: {
+            size: '1rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/inputtext/index.js b/packages/themes/src/presets/nora/inputtext/index.js
index 68dfd8e55..d079bcd27 100644
--- a/packages/themes/src/presets/nora/inputtext/index.js
+++ b/packages/themes/src/presets/nora/inputtext/index.js
@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
-            paddingX: '0.625rem',
-            paddingY: '0.375rem'
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.625rem'
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
         }
     }
 };
diff --git a/packages/themes/src/presets/nora/multiselect/index.js b/packages/themes/src/presets/nora/multiselect/index.js
index 003f797e4..750c61788 100644
--- a/packages/themes/src/presets/nora/multiselect/index.js
+++ b/packages/themes/src/presets/nora/multiselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/nora/radiobutton/index.js b/packages/themes/src/presets/nora/radiobutton/index.js
index c897d78db..50fc8b035 100644
--- a/packages/themes/src/presets/nora/radiobutton/index.js
+++ b/packages/themes/src/presets/nora/radiobutton/index.js
@@ -23,12 +23,26 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            width: '1rem',
+            height: '1rem'
+        },
+        lg: {
+            width: '1.5rem',
+            height: '1.5rem'
+        }
     },
     icon: {
         size: '0.75rem',
         checkedColor: '{primary.color}',
         checkedHoverColor: '{primary.color}',
-        disabledColor: '{form.field.disabled.color}'
+        disabledColor: '{form.field.disabled.color}',
+        sm: {
+            size: '0.5rem'
+        },
+        lg: {
+            size: '1rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/select/index.js b/packages/themes/src/presets/nora/select/index.js
index 75a3a9151..a09752089 100644
--- a/packages/themes/src/presets/nora/select/index.js
+++ b/packages/themes/src/presets/nora/select/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',
diff --git a/packages/themes/src/presets/nora/textarea/index.js b/packages/themes/src/presets/nora/textarea/index.js
index f22994ab1..f8504fdeb 100644
--- a/packages/themes/src/presets/nora/textarea/index.js
+++ b/packages/themes/src/presets/nora/textarea/index.js
@@ -22,6 +22,16 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/treeselect/index.js b/packages/themes/src/presets/nora/treeselect/index.js
index 1d1149e17..eed15366d 100644
--- a/packages/themes/src/presets/nora/treeselect/index.js
+++ b/packages/themes/src/presets/nora/treeselect/index.js
@@ -23,7 +23,17 @@ export default {
             offset: '{form.field.focus.ring.offset}',
             shadow: '{form.field.focus.ring.shadow}'
         },
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        sm: {
+            fontSize: '{form.field.sm.font.size}',
+            paddingX: '{form.field.sm.padding.x}',
+            paddingY: '{form.field.sm.padding.y}'
+        },
+        lg: {
+            fontSize: '{form.field.lg.font.size}',
+            paddingX: '{form.field.lg.padding.x}',
+            paddingY: '{form.field.lg.padding.y}'
+        }
     },
     dropdown: {
         width: '2.5rem',