diff --git a/apps/showcase/doc/inputnumber/FloatLabelDoc.vue b/apps/showcase/doc/inputnumber/FloatLabelDoc.vue
index b5ae62adf..b0d5f866c 100644
--- a/apps/showcase/doc/inputnumber/FloatLabelDoc.vue
+++ b/apps/showcase/doc/inputnumber/FloatLabelDoc.vue
@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -36,7 +36,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel variant="in">
-    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" />
+    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -54,7 +54,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -86,7 +86,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
diff --git a/apps/showcase/doc/inputnumber/IftaLabelDoc.vue b/apps/showcase/doc/inputnumber/IftaLabelDoc.vue
index 74c1871d4..5951c3653 100644
--- a/apps/showcase/doc/inputnumber/IftaLabelDoc.vue
+++ b/apps/showcase/doc/inputnumber/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="price_input">Price</label>
         </IftaLabel>
     </div>
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" />
+    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
     <label for="price_input">Price</label>
 </IftaLabel>
 `,
@@ -27,7 +27,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="price_input">Price</label>
         </IftaLabel>
     </div>
@@ -47,7 +47,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" />
+            <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
             <label for="price_input">Price</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/inputnumber/InvalidDoc.vue b/apps/showcase/doc/inputnumber/InvalidDoc.vue
index e367e27b8..f71395327 100644
--- a/apps/showcase/doc/inputnumber/InvalidDoc.vue
+++ b/apps/showcase/doc/inputnumber/InvalidDoc.vue
@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,18 @@
 export default {
     data() {
         return {
-            value: null,
+            value1: null,
+            value2: null,
             code: {
                 basic: `
-<InputNumber v-model="value" :invalid="value === null"  mode="decimal" :minFractionDigits="2" />
+<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" :invalid="value === null"  mode="decimal" :minFractionDigits="2" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
     </div>
 </template>
 
@@ -28,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            value: null
+            value1: null,
+            value2: null
         }
     }
 }
@@ -36,15 +41,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" :invalid="value === null"  mode="decimal" :minFractionDigits="2" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value = ref();
+const value1 = ref(null);
+const value2 = ref(null);
 <\/script>
 `
             }
diff --git a/apps/showcase/pages/inputnumber/index.vue b/apps/showcase/pages/inputnumber/index.vue
index 9bd40a26b..1790b22f6 100755
--- a/apps/showcase/pages/inputnumber/index.vue
+++ b/apps/showcase/pages/inputnumber/index.vue
@@ -66,6 +66,11 @@ export default {
                     label: 'Vertical',
                     component: VerticalDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -76,11 +81,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',