diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index 8b5089c83..a3c4f8690 100755
--- a/src/components/inputnumber/InputNumber.vue
+++ b/src/components/inputnumber/InputNumber.vue
@@ -1,13 +1,13 @@
 <template>
-    <span :class="containerClass" :style="style">
-        <INInputText ref="input" :class="['p-inputnumber-input', inputClass]" :style="inputStyle" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max" :readonly="readonly"
-            @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
+    <span :class="containerClass">
+        <INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly"
+            @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
         <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
-            <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
-            <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
+            <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" v-bind="incrementButtonProps" />
+            <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" v-bind="decrementButtonProps" />
         </span>
-        <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
-        <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
+        <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" v-bind="incrementButtonProps" />
+        <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" v-bind="decrementButtonProps" />
     </span>
 </template>
 
@@ -17,7 +17,6 @@ import Button from 'primevue/button';
 
 export default {
     name: 'InputNumber',
-    inheritAttrs: false,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -112,10 +111,14 @@ export default {
             type: Boolean,
             default: false
         },
-        style: null,
-        class: null,
-        inputStyle: null,
-        inputClass: null
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: null,
+        inputProps: null,
+        incrementButtonProps: null,
+        decrementButtonProps: null
     },
     numberFormat: null,
     _numeral: null,
@@ -327,24 +330,24 @@ export default {
             }
         },
         onUpButtonMouseDown(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$refs.input.$el.focus();
                 this.repeat(event, null, 1);
                 event.preventDefault();
             }
         },
         onUpButtonMouseUp() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
         onUpButtonMouseLeave() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
         onUpButtonKeyUp() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
@@ -354,24 +357,24 @@ export default {
             }
         },
         onDownButtonMouseDown(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$refs.input.$el.focus();
                 this.repeat(event, null, -1);
                 event.preventDefault();
             }
         },
         onDownButtonMouseUp() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
         onDownButtonMouseLeave() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
         onDownButtonKeyUp() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.clearTimer();
             }
         },
@@ -536,6 +539,22 @@ export default {
                     }
                 break;
 
+                //home
+                case 36:
+                    if (this.min) {
+                        this.updateModel(event, this.min);
+                        event.preventDefault();
+                    }
+                break;
+
+                //end
+                case 35:
+                    if (this.max) {
+                        this.updateModel(event, this.max);
+                        event.preventDefault();
+                    }
+                break;
+
                 default:
                 break;
             }
@@ -947,7 +966,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-inputnumber p-component p-inputwrapper', this.class, {
+            return ['p-inputnumber p-component p-inputwrapper', {
                 'p-inputwrapper-filled': this.filled,
                 'p-inputwrapper-focus': this.focused,
                 'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
@@ -957,7 +976,7 @@ export default {
         },
         
         upButtonClass() {
-            return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass, {
+            return ['p-inputnumber-button p-inputnumber-button-up', {
                 'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
             }];
         },
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
index 44466fe51..59e22c1a6 100755
--- a/src/views/inputnumber/InputNumberDemo.vue
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -15,36 +15,36 @@
                 <div class="p-fluid grid formgrid">
                     <div class="field col-12 md:col-3">
                         <label for="integeronly">Integer Only</label>
-                        <InputNumber id="integeronly" v-model="value1" />
+                        <InputNumber inputId="integeronly" v-model="value1" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="withoutgrouping">Without Grouping</label>
-                        <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
+                        <InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmaxfraction">Min-Max Fraction Digits</label>
-                        <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                        <InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmax">Min-Max Boundaries</label>
-                        <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
+                        <InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
                     </div>
 
                     <div class="field col-12 md:col-3">
                         <label for="locale-user">User Locale</label>
-                        <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
+                        <InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-us">United States Locale</label>
-                        <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                        <InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-german">German Locale</label>
-                        <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                        <InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-indian">Indian Locale</label>
-                        <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                        <InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
                     </div>
                 </div>
 
@@ -52,19 +52,19 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="currency-us">United States</label>
-                        <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                        <InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-germany">Germany</label>
-                        <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                        <InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-india">India</label>
-                        <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                        <InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-japan">Japan</label>
-                        <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                        <InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
                     </div>
                 </div>
 
@@ -72,19 +72,19 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="mile">Mile</label>
-                        <InputNumber id="mile" v-model="value13" suffix=" mi" />
+                        <InputNumber inputId="mile" v-model="value13" suffix=" mi" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="percent">Percent</label>
-                        <InputNumber id="percent" v-model="value14" prefix="%" />
+                        <InputNumber inputId="percent" v-model="value14" prefix="%" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="expiry">Expiry</label>
-                        <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
+                        <InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="temperature">Temperature</label>
-                        <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
+                        <InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
                     </div>
                 </div>
 
@@ -92,22 +92,22 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="stacked">Stacked</label>
-                        <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
+                        <InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="horizontal">Horizontal with Step</label>
-                        <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
+                        <InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                             decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmax-buttons">Min-Max Boundaries</label>
-                        <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                        <InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
                     </div>
                 </div>
 
                 <div class="field col-12 md:col-3">
                     <label for="vertical" style="display: block">Vertical</label>
-                    <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
+                    <InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                         decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
                 </div>
             </div>
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 2c71eda05..0bfdee4cd 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -411,6 +411,58 @@ Vertical
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+            The input element uses <i>spinbutton</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.</p>
+
+<pre v-code><code>
+&lt;label for="price"&gt;Price&lt;/label&gt;
+&lt;InputNumber inputId="price" /&gt;
+
+&lt;span id="label_number"&gt;Number&lt;/span&gt;
+&lt;InputNumber aria-labelledby="label_number" /&gt;
+
+&lt;InputNumber aria-label="Number" /&gt;
+
+</code></pre>
+
+            <h6>Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>tab</i></td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                        <tr>
+                            <td><i>up arrow</i></td>
+                            <td>Increments the value.</td>
+                        </tr>
+                        <tr>
+                            <td><i>down arrow</i></td>
+                            <td>Decrements the value.</td>
+                        </tr>
+                        <tr>
+                            <td><i>home</i></td>
+                            <td>Set the minimum value if provided.</td>
+                        </tr>
+                        <tr>
+                            <td><i>end</i></td>
+                            <td>Set the maximum value if provided.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>
@@ -430,36 +482,36 @@ export default {
         <div class="p-fluid grid formgrid">
             <div class="field col-12 md:col-3">
                 <label for="integeronly">Integer Only</label>
-                <InputNumber id="integeronly" v-model="value1" />
+                <InputNumber inputId="integeronly" v-model="value1" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="withoutgrouping">Without Grouping</label>
-                <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
+                <InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmaxfraction">Min-Max Fraction Digits</label>
-                <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                <InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmax">Min-Max Boundaries</label>
-                <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
+                <InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
             </div>
 
             <div class="field col-12 md:col-3">
                 <label for="locale-user">User Locale</label>
-                <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
+                <InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-us">United States Locale</label>
-                <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                <InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-german">German Locale</label>
-                <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                <InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-indian">Indian Locale</label>
-                <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                <InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
             </div>
         </div>
 
@@ -467,19 +519,19 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="currency-us">United States</label>
-                <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                <InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-germany">Germany</label>
-                <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                <InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-india">India</label>
-                <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                <InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-japan">Japan</label>
-                <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                <InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
             </div>
         </div>
 
@@ -487,19 +539,19 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="mile">Mile</label>
-                <InputNumber id="mile" v-model="value13" suffix=" mi" />
+                <InputNumber inputId="mile" v-model="value13" suffix=" mi" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="percent">Percent</label>
-                <InputNumber id="percent" v-model="value14" prefix="%" />
+                <InputNumber inputId="percent" v-model="value14" prefix="%" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="expiry">Expiry</label>
-                <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
+                <InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="temperature">Temperature</label>
-                <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
+                <InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
             </div>
         </div>
 
@@ -507,22 +559,22 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="stacked">Stacked</label>
-                <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
+                <InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="horizontal">Horizontal with Step</label>
-                <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
+                <InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmax-buttons">Min-Max Boundaries</label>
-                <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                <InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
             </div>
         </div>
 
         <div class="field col-12 md:col-3">
             <label for="vertical" style="display: block">Vertical</label>
-            <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
+            <InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                 decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
         </div>
     </div>
@@ -567,36 +619,36 @@ export default {
         <div class="p-fluid grid formgrid">
             <div class="field col-12 md:col-3">
                 <label for="integeronly">Integer Only</label>
-                <InputNumber id="integeronly" v-model="value1" />
+                <InputNumber inputId="integeronly" v-model="value1" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="withoutgrouping">Without Grouping</label>
-                <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
+                <InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmaxfraction">Min-Max Fraction Digits</label>
-                <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                <InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmax">Min-Max Boundaries</label>
-                <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
+                <InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
             </div>
 
             <div class="field col-12 md:col-3">
                 <label for="locale-user">User Locale</label>
-                <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
+                <InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-us">United States Locale</label>
-                <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                <InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-german">German Locale</label>
-                <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                <InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
             </div>
             <div class="field col-12 md:col-3">
                 <label for="locale-indian">Indian Locale</label>
-                <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                <InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
             </div>
         </div>
 
@@ -604,19 +656,19 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="currency-us">United States</label>
-                <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                <InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-germany">Germany</label>
-                <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                <InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-india">India</label>
-                <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                <InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="currency-japan">Japan</label>
-                <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                <InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
             </div>
         </div>
 
@@ -624,19 +676,19 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="mile">Mile</label>
-                <InputNumber id="mile" v-model="value13" suffix=" mi" />
+                <InputNumber inputId="mile" v-model="value13" suffix=" mi" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="percent">Percent</label>
-                <InputNumber id="percent" v-model="value14" prefix="%" />
+                <InputNumber inputId="percent" v-model="value14" prefix="%" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="expiry">Expiry</label>
-                <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
+                <InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="temperature">Temperature</label>
-                <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
+                <InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
             </div>
         </div>
 
@@ -644,22 +696,22 @@ export default {
         <div class="grid p-fluid">
             <div class="field col-12 md:col-3">
                 <label for="stacked">Stacked</label>
-                <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
+                <InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="horizontal">Horizontal with Step</label>
-                <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
+                <InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
             </div>
             <div class="field col-12 md:col-3">
                 <label for="minmax-buttons">Min-Max Boundaries</label>
-                <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                <InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
             </div>
         </div>
 
         <div class="field col-12 md:col-3">
             <label for="vertical" style="display: block">Vertical</label>
-            <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
+            <InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                 decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
         </div>
     </div>
@@ -705,36 +757,36 @@ export default {
             <div class="p-fluid grid formgrid">
                 <div class="field col-12 md:col-3">
                     <label for="integeronly">Integer Only</label>
-                    <p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
+                    <p-inputnumber input-id="integeronly" v-model="value1"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="withoutgrouping">Without Grouping</label>
-                    <p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
+                    <p-inputnumber input-id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="minmaxfraction">Min-Max Fraction Digits</label>
-                    <p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
+                    <p-inputnumber input-id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="minmax">Min-Max Boundaries</label>
-                    <p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
+                    <p-inputnumber input-id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
                 </div>
 
                 <div class="field col-12 md:col-3">
                     <label for="locale-user">User Locale</label>
-                    <p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
+                    <p-inputnumber input-id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="locale-us">United States Locale</label>
-                    <p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
+                    <p-inputnumber input-id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="locale-german">German Locale</label>
-                    <p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
+                    <p-inputnumber input-id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="locale-indian">Indian Locale</label>
-                    <p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
+                    <p-inputnumber input-id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
                 </div>
             </div>
 
@@ -742,19 +794,19 @@ export default {
             <div class="grid p-fluid">
                 <div class="field col-12 md:col-3">
                     <label for="currency-us">United States</label>
-                    <p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
+                    <p-inputnumber input-id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="currency-germany">Germany</label>
-                    <p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
+                    <p-inputnumber input-id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="currency-india">India</label>
-                    <p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
+                    <p-inputnumber input-id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="currency-japan">Japan</label>
-                    <p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
+                    <p-inputnumber input-id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
                 </div>
             </div>
 
@@ -762,19 +814,19 @@ export default {
             <div class="grid p-fluid">
                 <div class="field col-12 md:col-3">
                     <label for="mile">Mile</label>
-                    <p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
+                    <p-inputnumber input-id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="percent">Percent</label>
-                    <p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
+                    <p-inputnumber input-id="percent" v-model="value14" prefix="%"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="expiry">Expiry</label>
-                    <p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
+                    <p-inputnumber input-id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="temperature">Temperature</label>
-                    <p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
+                    <p-inputnumber input-id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
                 </div>
             </div>
 
@@ -782,22 +834,22 @@ export default {
             <div class="grid p-fluid">
                 <div class="field col-12 md:col-3">
                     <label for="stacked">Stacked</label>
-                    <p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
+                    <p-inputnumber input-id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="horizontal">Horizontal with Step</label>
-                    <p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
+                    <p-inputnumber input-id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
                         decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
                 </div>
                 <div class="field col-12 md:col-3">
                     <label for="minmax-buttons">Min-Max Boundaries</label>
-                    <p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
+                    <p-inputnumber input-id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
                 </div>
             </div>
 
             <div class="field col-12 md:col-3">
                 <label for="vertical" style="display: block">Vertical</label>
-                <p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
+                <p-inputnumber input-id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
                     decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
             </div>
         </div>