diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md
index 94317ce6c7..210ca8de01 100644
--- a/docs/en-US/component/input-number.md
+++ b/docs/en-US/component/input-number.md
@@ -120,6 +120,7 @@ input-number/with-prefix-suffix
| validate-event | whether to trigger form validation | ^[boolean] | true |
| label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — |
| inputmode ^(2.10.3) | same as `inputmode` in native input | ^[string] | — |
+| align ^(2.10.5) | alignment for the inner input text | ^[enum]`'left' \| 'center' \| 'right'` | 'center' |
### Slots
diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx
index aaeb404312..917cb492d9 100755
--- a/packages/components/input-number/__tests__/input-number.test.tsx
+++ b/packages/components/input-number/__tests__/input-number.test.tsx
@@ -611,4 +611,25 @@ describe('InputNumber.vue', () => {
expect(wrapper.find('input').element.value).toBe(num.value.toString())
wrapper.unmount()
})
+
+ describe('align prop class mapping', () => {
+ it.each([
+ ['left', 'is-left'],
+ ['center', 'is-center'],
+ ['right', 'is-right'],
+ ] as Array<['left' | 'center' | 'right', string]>)(
+ 'align=%s should add class %s',
+ async (align, expectedClass) => {
+ const num = ref(0)
+ const wrapper = mount(() => (
+
+ ))
+
+ await nextTick()
+
+ const root = wrapper.find('.el-input-number')
+ expect(root.classes()).toContain(expectedClass)
+ }
+ )
+ })
})
diff --git a/packages/components/input-number/src/input-number.ts b/packages/components/input-number/src/input-number.ts
index a4f4af7ef1..d3f3777ea2 100644
--- a/packages/components/input-number/src/input-number.ts
+++ b/packages/components/input-number/src/input-number.ts
@@ -120,6 +120,13 @@ export const inputNumberProps = buildProps({
type: definePropType(String),
default: undefined,
},
+ /**
+ * @description alignment for the inner input text
+ */
+ align: {
+ type: definePropType<'left' | 'right' | 'center'>(String),
+ default: 'center',
+ },
} as const)
export type InputNumberProps = ExtractPropTypes
export type InputNumberPropsPublic = __ExtractPublicPropTypes<
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index 173509ff94..b9e0429280 100755
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -6,6 +6,7 @@
ns.is('disabled', inputNumberDisabled),
ns.is('without-controls', !controls),
ns.is('controls-right', controlsAtRight),
+ ns.is(align, !!align),
]"
@dragstart.prevent
>
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index e340989bed..2069d9f007 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -29,7 +29,13 @@
}
}
}
-
+ @each $align in (left, right, center) {
+ @include when($align) {
+ .#{$namespace}-input__inner {
+ text-align: $align;
+ }
+ }
+ }
@include e((increase, decrease)) {
display: flex;
justify-content: center;