Initiated #6651

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>

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" />

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>

apps/showcase/doc/checkbox/GroupDoc.vue

@@ -76,7 +76,7 @@ export default {
     data() {
         return {
             pizza: null
-        };
+        }
     }
 };
 <\/script>

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>

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>

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>

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>

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>

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>

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" />

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>

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>

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>

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>

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>

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>

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',

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',

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',

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',

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',

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',

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',

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',

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',

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',

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',

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',

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',
+                    id: 'iftalabel',
-                    label: 'Filled',
+                    label: 'Ifta Label',
-                    component: FilledDoc
+                    component: IftaLabelDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
                 },
                 {
                     id: 'invalid',

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',

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

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"

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

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 }) => [

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

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',

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

packages/primevue/src/datepicker/DatePicker.vue

@@ -10,6 +10,7 @@
             :value="inputFieldValue"
             :placeholder="placeholder"
             :name="name"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             :fluid="fluid"

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 = {

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

packages/primevue/src/inputmask/InputMask.vue

@@ -6,6 +6,7 @@
         :readonly="readonly"
         :disabled="disabled"
         :invalid="invalid"
+        :size="size"
         :name="name"
         :variant="variant"
         :placeholder="placeholder"

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

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"

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

packages/primevue/src/inputotp/InputOtp.vue

@@ -11,6 +11,7 @@
                     :variant="variant"
                     :readonly="readonly"
                     :disabled="disabled"
+                    :size="size"
                     :invalid="invalid"
                     :tabindex="tabindex"
                     :unstyled="unstyled"

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 = {

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-sm p-inputfield-sm': props.size === 'small',
-            'p-inputtext-lg': props.size === 'large',
+            'p-inputtext-lg p-inputfield-lg': props.size === 'large',
             'p-invalid': instance.$invalid,
             'p-variant-filled': instance.$variant === 'filled',
             'p-inputtext-fluid': instance.$fluid

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

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',

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

packages/primevue/src/password/Password.vue

@@ -19,6 +19,7 @@
             :disabled="disabled"
             :variant="variant"
             :invalid="invalid"
+            :size="size"
             :autofocus="autofocus"
             @input="onInput"
             @focus="onFocus"

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

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',

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

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 }) => [

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

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

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

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',

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',

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',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.375rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.625rem'
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '500'

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',

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'
+        }
     }
 };

packages/themes/src/presets/aura/inputtext/index.js

@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.375rem'
+            paddingY: '{form.field.sm.padding.y}',
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.625rem'
+            paddingY: '{form.field.lg.padding.y}',
         }
     }
 };

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',

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'
+        }
     }
 };

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',

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}'
+        }
     }
 };

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',

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}',

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',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.5rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.75rem'
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '600'

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',

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'
+        }
     }
 };

packages/themes/src/presets/lara/inputtext/index.js

@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.5rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.75rem'
+            paddingY: '{form.field.lg.padding.y}'
         }
     }
 };

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',

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'
+        }
     }
 };

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',

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}'
+        }
     }
 };

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',

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',

packages/themes/src/presets/material/button/index.js

@@ -7,14 +7,14 @@ export default {
         paddingY: '0.625rem',
         iconOnlyWidth: '3rem',
         sm: {
-            fontSize: '0.875rem',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.5rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '1.125rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.75rem'
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '500'

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',

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;
+      width: var(--p-md-check-icon-w);
-      height: 10px;
+      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);
     }
 }
 `

packages/themes/src/presets/material/inputtext/index.js

@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.625rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '1rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '1rem'
+            paddingY: '{form.field.lg.padding.y}'
         }
     },
     css: ({ dt }) => `

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',

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 {

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',

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}'
+        }
     }
 };

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',

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',

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',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.375rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.625rem'
+            paddingY: '{form.field.lg.padding.y}'
         },
         label: {
             fontWeight: '700'

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',

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'
+        }
     }
 };

packages/themes/src/presets/nora/inputtext/index.js

@@ -25,14 +25,14 @@ export default {
         },
         transitionDuration: '{form.field.transition.duration}',
         sm: {
-            fontSize: '0.875rem',
+            fontSize: '{form.field.sm.font.size}',
-            paddingX: '0.625rem',
+            paddingX: '{form.field.sm.padding.x}',
-            paddingY: '0.375rem'
+            paddingY: '{form.field.sm.padding.y}'
         },
         lg: {
-            fontSize: '1.125rem',
+            fontSize: '{form.field.lg.font.size}',
-            paddingX: '0.875rem',
+            paddingX: '{form.field.lg.padding.x}',
-            paddingY: '0.625rem'
+            paddingY: '{form.field.lg.padding.y}'
         }
     }
 };

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',

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'
+        }
     }
 };

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',

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}'
+        }
     }
 };

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',