diff --git a/packages/ui/src/Input/Input.vue b/packages/ui/src/Input/Input.vue
index 84d8536c90..ee6e32ab3c 100644
--- a/packages/ui/src/Input/Input.vue
+++ b/packages/ui/src/Input/Input.vue
@@ -47,8 +47,8 @@ const inputClasses = computed(() => {
         variants: {
             size: {
                 base: 'text-base rounded-lg px-3 py-2 h-10 leading-[1.375rem]',
-                sm: 'text-sm rounded-md px-2.5 py-1.5 h-8 leading-[1.125rem]',
-                xs: 'text-xs rounded-xs px-2 py-1.5 h-6 leading-[1.125rem]',
+                sm: 'text-sm rounded-lg px-2.5 py-1.5 h-8 leading-[1.125rem]',
+                xs: 'text-xs rounded-md px-2 py-1.5 h-6 leading-[1.125rem]',
             },
             variant: {
                 default: '',
diff --git a/packages/ui/src/Textarea.vue b/packages/ui/src/Textarea.vue
index 9dc5b7c43d..d011bc911c 100644
--- a/packages/ui/src/Textarea.vue
+++ b/packages/ui/src/Textarea.vue
@@ -14,18 +14,24 @@ const props = defineProps({
     required: { type: Boolean, default: false },
     resize: { type: String, default: 'vertical' },
     rows: { type: [Number, String], default: 4 },
+    size: { type: String, default: 'base' },
     modelValue: { type: String, default: null },
     limit: { type: Number, default: null },
 });
 
 const classes = cva({
     base: [
-        'w-full block bg-white dark:bg-gray-900 px-3 pt-2.5 pb-3 rounded-lg',
+        'w-full block bg-white dark:bg-gray-900',
         'border border-gray-300 with-contrast:border-gray-500 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
         'text-gray-900 dark:text-gray-300',
         'appearance-none antialiased shadow-ui-sm disabled:shadow-none read-only:border-dashed not-prose'
     ],
     variants: {
+        size: {
+            base: 'text-base rounded-lg px-3 pt-2.5 pb-3',
+            sm: 'text-sm rounded-lg px-2.5 pt-1.5 pb-2',
+            xs: 'text-xs rounded-md px-2 pt-1 pb-1.5',
+        },
         resize: {
             both: 'resize',
             horizontal: 'resize-x',
diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 36e8988764..aced5295ef 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -7,6 +7,7 @@
             :key="$index"
             :name="name"
             :read-only="isReadOnly"
+            :size="fieldsContext.size.value"
             :text="option.label || option.value"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
@@ -28,6 +29,10 @@ export default {
         ButtonGroup
     },
 
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
+
     data() {
         return {
             resizeObserver: null,
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 1c8ace9d27..63e3783a46 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -11,6 +11,7 @@
         :placeholder="__(config.placeholder)"
         :read-only="isReadOnly"
         :searchable="config.searchable || config.taggable"
+        :size="size"
         :taggable="config.taggable"
         :id="id"
         @update:modelValue="comboboxUpdated"
@@ -22,6 +23,9 @@ import Fieldtype from '@/components/fieldtypes/fieldtype.js';
 import HasInputOptions from './HasInputOptions.js';
 import { Combobox } from '@/components/ui';
 import { computed } from 'vue';
+import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
+
+const { size } = injectFieldsContext() || {};
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index de407d0987..60c8282509 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -12,6 +12,7 @@
         :append="__(config.append)"
         :limit="config.character_limit"
         :placeholder="__(config.placeholder)"
+        :size="size"
         :name="name"
         :id="id"
         :direction="config.direction"
@@ -25,6 +26,9 @@
 import Fieldtype from '@/components/fieldtypes/fieldtype.js';
 import { Input } from '@/components/ui';
 import { computed } from 'vue';
+import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
+
+const { size } = injectFieldsContext() || {};
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
diff --git a/resources/js/components/fieldtypes/TextareaFieldtype.vue b/resources/js/components/fieldtypes/TextareaFieldtype.vue
index 91442bfbff..12eb8cd7bc 100644
--- a/resources/js/components/fieldtypes/TextareaFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextareaFieldtype.vue
@@ -7,6 +7,7 @@
         :limit="config.character_limit || null"
         :placeholder="__(config.placeholder)"
         :model-value="value"
+        :size="fieldsContext.size.value"
         @blur="$emit('blur')"
         @focus="$emit('focus')"
         @update:model-value="updateDebounced"
@@ -20,5 +21,8 @@ import { Textarea } from '@/components/ui';
 export default {
     mixins: [Fieldtype],
     components: { Textarea },
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index a92bfa7bb8..7d93863339 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -7,6 +7,7 @@
                 :id="fieldId"
                 :model-value="value"
                 :read-only="isReadOnly"
+                :size="fieldsContext.size.value"
             />
             <Heading v-if="inlineLabel" v-html="$markdown(__(inlineLabel), { openLinksInNewTabs: true })" />
         </div>
@@ -26,6 +27,10 @@ export default {
         Heading,
     },
 
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
+
     computed: {
         inlineLabel() {
             return this.value
diff --git a/resources/js/components/ui/Publish/FieldsProvider.vue b/resources/js/components/ui/Publish/FieldsProvider.vue
index f342c91d47..2e56d00fa7 100644
--- a/resources/js/components/ui/Publish/FieldsProvider.vue
+++ b/resources/js/components/ui/Publish/FieldsProvider.vue
@@ -19,12 +19,16 @@ const props = defineProps({
         type: String,
         default: (props) => props.pathPrefix,
     },
+    size: {
+        type: String,
+    },
 });
 
 provideFieldsContext({
     fields: toRef(() => props.fields),
     fieldPathPrefix: toRef(() => props.fieldPathPrefix),
     metaPathPrefix: toRef(() => props.metaPathPrefix),
+    size: toRef(() => props.size),
 });
 </script>
 
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index e8862d2d16..fed0c41f1e 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -168,31 +168,24 @@
     </section>
 
     <section class="space-y-4">
-        <ui-heading size="lg">Input</ui-heading>
+        <ui-heading size="lg" id="input">Input</ui-heading>
         <div class="flex gap-2">
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                value="Edit me"
-            />
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                read-only
-                value="Read only. Tab, select, but not edit."
-            />
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                disabled
-                value="Disabled. Cant touch me."
-            />
+            <ui-button text="Default" />
+            <ui-input name="email" type="email" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" required label="Email" disabled value="Disabled. Cant touch me." />
+        </div>
+        <div class="flex gap-2">
+        <ui-button text="Small" size="sm" />
+            <ui-input name="email" type="email" size="sm" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" size="sm" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" size="sm" required label="Email" disabled value="Disabled. Cant touch me." />
+        </div>
+        <div class="flex gap-2">
+            <ui-button text="Extra Small" size="xs" />
+            <ui-input name="email" type="email" size="xs" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" size="xs" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" size="xs" required label="Email" disabled value="Disabled. Cant touch me." />
         </div>
     </section>