diff --git a/packages/docs/components/Input.md b/packages/docs/components/Input.md
index 8a0241314..759f7712d 100644
--- a/packages/docs/components/Input.md
+++ b/packages/docs/components/Input.md
@@ -37,36 +37,36 @@ title: Input
 
 ### Props
 
-| Prop name          | Description                                                      | Type             | Values                                                                          | Default                                                                                                                                                   |
-| ------------------ | ---------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| autocomplete       | Native options to use in HTML5 validation                        | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
-| autosize           | Automatically adjust height in textarea                          | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| clearIcon          | Icon name to be added on the clear button                        | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearIcon: "close-circle"<br>}</code> |
-| clearable          | Add a button/icon to clear the inputed text                      | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearable: false<br>}</code>          |
-| counter            | Show character counter when maxlength prop is passed             | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;counter: false<br>}</code>            |
-| debounce           | Number of milliseconds to delay before to emit input event       | number           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;debounce: 400<br>}</code>      |
-| disabled           | Same as native disabled                                          | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| expanded           | Makes input full width when inside a grouped or addon field      | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| icon               | Icon to be shown                                                 | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>           |
-| iconClickable      | Makes the icon clickable                                         | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| iconPack           | Icon pack to use                                                 | string           | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>       |
-| iconRight          | Icon to be added on the right side                               | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>      |
-| iconRightClickable | Make the icon right clickable                                    | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| iconRightVariant   | Variant of right icon                                            | string           | -                                                                               |                                                                                                                                                           |
-| id                 | Same as native id. Also set the `for` label for o-field wrapper. | string           | -                                                                               | Default function (see source code)                                                                                                                        |
-| maxlength          | Same as native maxlength, plus character counter                 | string \| number | -                                                                               |                                                                                                                                                           |
-| v-model            | The input value state                                            | string \| number | -                                                                               |                                                                                                                                                           |
-| number             |                                                                  | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| override           | Override existing theme classes completely                       | boolean          | -                                                                               |                                                                                                                                                           |
-| passwordReveal     | Adds the reveal password functionality                           | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| placeholder        | Input placeholder                                                | string           | -                                                                               |                                                                                                                                                           |
-| rounded            | Makes the element rounded                                        | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
-| size               | Size of the control                                              | string           | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
-| statusIcon         | Show status icon using field and variant prop                    | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                 |
-| type               | Input type, like native                                          | string           | `Any native input type`, `and textarea`                                         | <code style='white-space: nowrap; padding: 0;'>"text"</code>                                                                                              |
-| useHtml5Validation | Enable html 5 native validation                                  | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>         |
-| validationMessage  | The message which is shown when a validation error occurs        | string           | -                                                                               |                                                                                                                                                           |
-| variant            | Color of the control                                             | string           | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
+| Prop name          | Description                                                    | Type             | Values                                                                          | Default                                                                                                                                                   |
+| ------------------ | -------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autocomplete       | Native options to use in HTML5 validation                      | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code>       |
+| autosize           | Automatically adjust height in textarea                        | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| clearIcon          | Icon name to be added on the clear button                      | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearIcon: "close-circle"<br>}</code> |
+| clearable          | Add a button/icon to clear the inputed text                    | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;clearable: false<br>}</code>          |
+| counter            | Show character counter when maxlength prop is passed           | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;counter: false<br>}</code>            |
+| debounce           | Number of milliseconds to delay before to emit input event     | number           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>autocomplete: {<br>&nbsp;&nbsp;debounce: 400<br>}</code>      |
+| disabled           | Same as native disabled                                        | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| expanded           | Makes input full width when inside a grouped or addon field    | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| icon               | Icon to be shown                                               | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;icon: undefined<br>}</code>           |
+| iconClickable      | Makes the icon clickable                                       | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| iconPack           | Icon pack to use                                               | string           | `mdi`, `fa`, `fas and any other custom icon pack`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>       |
+| iconRight          | Icon to be added on the right side                             | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code>      |
+| iconRightClickable | Make the icon right clickable                                  | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| iconRightVariant   | Variant of right icon                                          | string           | -                                                                               |                                                                                                                                                           |
+| id                 | Same as native id. Also set the for label for o-field wrapper. | string           | -                                                                               | <code style='white-space: nowrap; padding: 0;'>uuid()</code>                                                                                              |
+| maxlength          | Same as native maxlength, plus character counter               | string \| number | -                                                                               |                                                                                                                                                           |
+| v-model            | The input value state                                          | string \| number | -                                                                               |                                                                                                                                                           |
+| number             | Convert the ´modelValue`into type`number`                      | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                    |
+| override           | Override existing theme classes completely                     | boolean          | -                                                                               |                                                                                                                                                           |
+| passwordReveal     | Adds the reveal password functionality                         | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| placeholder        | Input placeholder                                              | string           | -                                                                               |                                                                                                                                                           |
+| rounded            | Makes the element rounded                                      | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                               |
+| size               | Size of the control                                            | string           | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;size: undefined<br>}</code>           |
+| statusIcon         | Show status icon using field and variant prop                  | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>                 |
+| type               | Input type, like native                                        | string           | `Any native input type`, `and textarea`                                         | <code style='white-space: nowrap; padding: 0;'>"text"</code>                                                                                              |
+| useHtml5Validation | Enable html 5 native validation                                | boolean          | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>         |
+| validationMessage  | The message which is shown when a validation error occurs      | string           | -                                                                               |                                                                                                                                                           |
+| variant            | Color of the control                                           | string           | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>        |
 
 ### Events
 
diff --git a/packages/oruga/src/components/autocomplete/Autocomplete.vue b/packages/oruga/src/components/autocomplete/Autocomplete.vue
index 9691b7429..5edf28796 100644
--- a/packages/oruga/src/components/autocomplete/Autocomplete.vue
+++ b/packages/oruga/src/components/autocomplete/Autocomplete.vue
@@ -691,7 +691,7 @@ function handleBlur(event: Event): void {
 }
 
 /** emit input change event */
-function onInput(value: string | number): void {
+function onInput(value: string): void {
     if (props.keepFirst && !selectedOption.value) hoverFirstOption();
     emits("input", String(value));
     checkHtml5Validity();
diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue
index 0644665da..9ade84ccc 100644
--- a/packages/oruga/src/components/input/Input.vue
+++ b/packages/oruga/src/components/input/Input.vue
@@ -1,10 +1,4 @@
-<script
-    setup
-    lang="ts"
-    generic="
-        IsNumber extends boolean,
-        T extends IsNumber extends true ? number : string
-    ">
+<script setup lang="ts" generic="IsNumber extends boolean = false">
 import {
     ref,
     computed,
@@ -12,7 +6,6 @@ import {
     watch,
     onMounted,
     type StyleValue,
-    type PropType,
 } from "vue";
 
 import OIcon from "../icon/Icon.vue";
@@ -28,7 +21,7 @@ import {
 
 import { injectField } from "../field/fieldInjection";
 
-import type { ComponentClass } from "@/types";
+import type { InputProps } from "./props";
 
 /**
  * Get user Input. Use with Field to access all functionalities
@@ -42,202 +35,51 @@ defineOptions({
     inheritAttrs: false,
 });
 
-const props = defineProps({
-    /**
-     * The input value state
-     * @type string | number
-     */
-    modelValue: {
-        type: [Number, String] as unknown as PropType<T>,
-        default: undefined,
-    },
-    /** @type boolean */
-    number: { type: Boolean as PropType<IsNumber>, default: false },
-    /** Override existing theme classes completely */
-    override: { type: Boolean, default: undefined },
-    /**
-     * Input type, like native
-     * @values Any native input type, and textarea
-     */
-    type: { type: String, default: "text" },
-    /**
-     * Size of the control
-     * @values small, medium, large
-     */
-    size: {
-        type: String,
-        default: () => getOption("input.size"),
-    },
-    /**
-     * Color of the control
-     * @values primary, info, success, warning, danger, and any other custom color
-     */
-    variant: {
-        type: String,
-        default: () => getOption("input.variant"),
-    },
-    /** Input placeholder */
-    placeholder: { type: String, default: undefined },
-    /** Makes input full width when inside a grouped or addon field */
-    expanded: { type: Boolean, default: false },
-    /** Makes the element rounded */
-    rounded: { type: Boolean, default: false },
-    /** Same as native disabled */
-    disabled: { type: Boolean, default: false },
-    /** Adds the reveal password functionality */
-    passwordReveal: { type: Boolean, default: false },
-    /** Same as native maxlength, plus character counter */
-    maxlength: { type: [Number, String], default: undefined },
-    /** Show character counter when maxlength prop is passed */
-    counter: {
-        type: Boolean,
-        default: () => getOption("input.counter", false),
-    },
-    /** Automatically adjust height in textarea */
-    autosize: { type: Boolean, default: false },
-    /**
-     * Icon pack to use
-     * @values mdi, fa, fas and any other custom icon pack
-     */
-    iconPack: {
-        type: String,
-        default: () => getOption("input.iconPack", undefined),
-    },
-    /** Icon to be shown */
-    icon: {
-        type: String,
-        default: () => getOption("input.icon", undefined),
-    },
-    /** Makes the icon clickable */
-    iconClickable: { type: Boolean, default: false },
-    /** Icon to be added on the right side */
-    iconRight: {
-        type: String,
-        default: () => getOption("input.iconRight", undefined),
-    },
-    /** Make the icon right clickable */
-    iconRightClickable: { type: Boolean, default: false },
-    /** Variant of right icon */
-    iconRightVariant: { type: String, default: undefined },
-    /** Add a button/icon to clear the inputed text */
-    clearable: {
-        type: Boolean,
-        default: () => getOption("input.clearable", false),
-    },
-    /** Icon name to be added on the clear button */
-    clearIcon: {
-        type: String,
-        default: () => getOption("input.clearIcon", "close-circle"),
-    },
-    /** Show status icon using field and variant prop */
-    statusIcon: {
-        type: Boolean,
-        default: () => getOption("statusIcon", true),
-    },
-    /** Number of milliseconds to delay before to emit input event */
-    debounce: {
-        type: Number,
-        default: () => getOption("autocomplete.debounce", 400),
-    },
-    /** Native options to use in HTML5 validation */
-    autocomplete: {
-        type: String,
-        default: () => getOption("input.autocomplete", "off"),
-    },
-    /** Same as native id. Also set the `for` label for o-field wrapper. */
-    id: { type: String, default: () => uuid() },
-    /** Enable html 5 native validation */
-    useHtml5Validation: {
-        type: Boolean,
-        default: () => getOption("useHtml5Validation", true),
-    },
-    /** The message which is shown when a validation error occurs */
-    validationMessage: { type: String, default: undefined },
-    // class props (will not be displayed in the docs)
-    /** Class of the root element */
-    rootClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of input when expanded */
-    expandedClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of input when type textarea */
-    textareaClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the left icon space inside the input */
-    iconLeftSpaceClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the right icon space inside the input */
-    iconRightSpaceClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the native input element */
-    inputClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of input when rounded */
-    roundedClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of input when disabled */
-    disabledClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the left icon */
-    iconLeftClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the right icon */
-    iconRightClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class to display when a right icon is used */
-    hasIconRightClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the counter element */
-    counterClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the input size */
-    sizeClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the input variant */
-    variantClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
+const props = withDefaults(defineProps<InputProps<IsNumber>>(), {
+    modelValue: undefined,
+    // number: false,
+    override: undefined,
+    type: "text",
+    size: getOption("input.size"),
+    variant: getOption("input.variant"),
+    placeholder: undefined,
+    expanded: false,
+    rounded: false,
+    disabled: false,
+    passwordReveal: false,
+    maxlength: undefined,
+    counter: getOption("input.counter", false),
+    autosize: false,
+    iconPack: getOption("input.iconPack", undefined),
+    icon: getOption("input.icon", undefined),
+    iconClickable: false,
+    iconRight: getOption("input.iconRight", undefined),
+    iconRightClickable: false,
+    iconRightVariant: undefined,
+    clearable: getOption("input.clearable", false),
+    clearIcon: getOption("input.clearIcon", "close-circle"),
+    statusIcon: getOption("statusIcon", true),
+    debounce: getOption("autocomplete.debounce", 400),
+    autocomplete: getOption("input.autocomplete", "off"),
+    id: uuid(),
+    useHtml5Validation: getOption("useHtml5Validation", true),
+    validationMessage: undefined,
 });
 
+type ModelValue = typeof props.modelValue;
+
 const emits = defineEmits<{
     /**
      * modelValue prop two-way binding
      * @param value {string | number} updated modelValue prop
      */
-    (e: "update:modelValue", value: T): void;
+    (e: "update:modelValue", value: ModelValue): void;
     /**
      * on input change event
      * @param value {string | number} input value
      * @param event {Event} native event
      */
-    (e: "input", value: T, event: Event): void;
+    (e: "input", value: ModelValue, event: Event): void;
     /**
      * on input focus event
      * @param event {Event} native event
@@ -288,19 +130,17 @@ const {
 // inject parent field component if used inside one
 const { parentField, statusVariant, statusVariantIcon } = injectField();
 
-// const vmodel = defineModel<T>({ default: undefined });
-const vmodel = useVModel<T>();
+// const vmodel = defineModel<ModelValue>({ default: undefined });
+const vmodel = useVModel<ModelValue>();
 
 // if id is given set as `for` property on o-field wrapper
 if (props.id) parentField?.value?.setInputId(props.id);
 
 /** Get value length */
 const valueLength = computed(() =>
-    typeof vmodel.value === "string"
-        ? vmodel.value.length
-        : typeof vmodel.value === "number"
-          ? String(vmodel.value).length
-          : 0,
+    typeof vmodel.value === "string" || typeof vmodel.value === "number"
+        ? String(vmodel.value).length
+        : 0,
 );
 
 onMounted(() => {
@@ -356,7 +196,7 @@ watch(
 
 function onInput(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
-    const input = (props.number ? Number(value) : String(value)) as T;
+    const input = (props.number ? Number(value) : String(value)) as ModelValue;
     emits("input", input, event);
 }
 
@@ -392,7 +232,8 @@ function iconClick(event: Event): void {
 
 function rightIconClick(event: Event): void {
     if (props.passwordReveal) togglePasswordVisibility();
-    else if (props.clearable) vmodel.value = (props.number ? 0 : "") as T;
+    else if (props.clearable)
+        vmodel.value = (props.number ? 0 : "") as ModelValue;
     if (props.iconRightClickable) {
         emits("icon-right-click", event);
         nextTick(() => setFocus());
diff --git a/packages/oruga/src/components/input/examples/base.vue b/packages/oruga/src/components/input/examples/base.vue
index d759232f3..2bda9b1b4 100644
--- a/packages/oruga/src/components/input/examples/base.vue
+++ b/packages/oruga/src/components/input/examples/base.vue
@@ -30,7 +30,7 @@ const name = ref("John Silver");
         </o-field>
 
         <o-field>
-            <o-input placeholder="No label" />
+            <o-input model-value="" placeholder="No label" />
         </o-field>
 
         <o-field label="Number">
diff --git a/packages/oruga/src/components/input/props.ts b/packages/oruga/src/components/input/props.ts
new file mode 100644
index 000000000..276ca24ad
--- /dev/null
+++ b/packages/oruga/src/components/input/props.ts
@@ -0,0 +1,110 @@
+import type { ComponentClass } from "@/types";
+
+export type InputProps<IsNumber extends boolean> = {
+    /** Override existing theme classes completely */
+    override?: boolean;
+    /**
+     * The input value state
+     * @type string | number
+     */
+    modelValue?: IsNumber extends true ? number : string;
+    /**
+     * Convert the ´modelValue` into type `number`
+     * @type boolean
+     */
+    number?: IsNumber;
+    /**
+     * Input type, like native
+     * @values Any native input type, and textarea
+     */
+    type?: string;
+    /**
+     * Size of the control
+     * @values small, medium, large
+     */
+    size?: string;
+    /**
+     * Color of the control
+     * @values primary, info, success, warning, danger, and any other custom color
+     */
+    variant?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** Makes input full width when inside a grouped or addon field */
+    expanded?: boolean;
+    /** Makes the element rounded */
+    rounded?: boolean;
+    /** Same as native disabled */
+    disabled?: boolean;
+    /** Adds the reveal password functionality */
+    passwordReveal?: boolean;
+    /** Same as native maxlength, plus character counter */
+    maxlength?: number | string;
+    /** Show character counter when maxlength prop is passed */
+    counter?: boolean;
+    /** Automatically adjust height in textarea */
+    autosize?: boolean;
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack?: string;
+    /** Icon to be shown */
+    icon?: string;
+    /** Makes the icon clickable */
+    iconClickable?: boolean;
+    /** Icon to be added on the right side */
+    iconRight?: string;
+    /** Make the icon right clickable */
+    iconRightClickable?: boolean;
+    /** Variant of right icon */
+    iconRightVariant?: string;
+    /** Add a button/icon to clear the inputed text */
+    clearable?: boolean;
+    /** Icon name to be added on the clear button */
+    clearIcon?: string;
+    /** Show status icon using field and variant prop */
+    statusIcon?: boolean;
+    /** Number of milliseconds to delay before to emit input event */
+    debounce?: number;
+    /** Native options to use in HTML5 validation */
+    autocomplete?: string;
+    /** Same as native id. Also set the for label for o-field wrapper. */
+    id?: string;
+    /** Enable html 5 native validation */
+    useHtml5Validation?: boolean;
+    /** The message which is shown when a validation error occurs */
+    validationMessage?: string;
+} & InputClasses;
+
+// class props (will not be displayed in the docs)
+type InputClasses = Partial<{
+    /** Class of the root element */
+    rootClass: ComponentClass;
+    /** Class of input when expanded */
+    expandedClass: ComponentClass;
+    /** Class of input when type textarea */
+    textareaClass: ComponentClass;
+    /** Class of the left icon space inside the input */
+    iconLeftSpaceClass: ComponentClass;
+    /** Class of the right icon space inside the input */
+    iconRightSpaceClass: ComponentClass;
+    /** Class of the native input element */
+    inputClass: ComponentClass;
+    /** Class of input when rounded */
+    roundedClass: ComponentClass;
+    /** Class of input when disabled */
+    disabledClass: ComponentClass;
+    /** Class of the left icon */
+    iconLeftClass: ComponentClass;
+    /** Class of the right icon */
+    iconRightClass: ComponentClass;
+    /** Class to display when a right icon is used */
+    hasIconRightClass: ComponentClass;
+    /** Class of the counter element */
+    counterClass: ComponentClass;
+    /** Class of the input size */
+    sizeClass: ComponentClass;
+    /** Class of the input variant */
+    variantClass: ComponentClass;
+}>;
diff --git a/packages/oruga/src/components/input/tests/input.test.ts b/packages/oruga/src/components/input/tests/input.test.ts
index 98f0d9814..7c6b494ec 100644
--- a/packages/oruga/src/components/input/tests/input.test.ts
+++ b/packages/oruga/src/components/input/tests/input.test.ts
@@ -177,7 +177,13 @@ describe("OInput", () => {
 
     test("check type number ", async () => {
         const wrapper = shallowMount(OInput, {
-            props: { type: "number", min: 0, max: 1000, modelValue: 10 },
+            props: {
+                type: "number",
+                min: 0,
+                max: 1000,
+                modelValue: 10,
+                number: true,
+            },
         });
 
         const input = wrapper.find("input");