InputNumber - Semi Design Next

When to Use

When you need to get a standard value.

Demos

How to import

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

Basic Input Box

简单数字输入框

设置了步长 step=2

设置 shiftStep=100，按住 shift 同时点击按钮，可以一次增加/减少100

设置了上下界 min=1,max=10

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-basic-simple">简单数字输入框</span>
        <InputNumber aria-labelledby="inputnumber-basic-simple" />
        <br />
        <br />

        <span id="inputnumber-basic-step">设置了步长 step=2 </span>
        <InputNumber aria-labelledby="inputnumber-basic-step" :step="2" />
        <br />
        <br />

        <span id="inputnumber-basic-shift-step">设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </span>
        <InputNumber aria-labelledby="inputnumber-basic-shift-step" :shiftStep="100" />
        <br />
        <br />

        <span id="inputnumber-basic-range">设置了上下界 min=1,max=10</span>
        <InputNumber aria-labelledby="inputnumber-basic-range" :defaultValue="1" :max="10" :min="1" />
        <br />
        <br />
    </div>
</template>

设置了默认值 defaultValue=1

禁用 disabled=true

设置了小数位数 precision=2

设置了 innerButtons=true

小时

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-basic-more-default-value">设置了默认值 defaultValue=1 </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-default-value" :defaultValue="1" />
        <br />
        <br />

        <span id="inputnumber-basic-more-disabled">禁用 disabled=true</span>
        <InputNumber aria-labelledby="inputnumber-basic-more-disabled" :defaultValue="2" disabled />
        <br />
        <br />

        <span id="inputnumber-basic-more-precision">设置了小数位数 precision=2 </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-precision" :defaultValue="1.234" :precision="2" />
        <br />
        <br />

        <span id="inputnumber-basic-more-inner-buttons">设置了 innerButtons=true </span>
        <InputNumber aria-labelledby="inputnumber-basic-more-inner-buttons" :defaultValue="1" innerButtons style="width: 190px">
            <template #suffix>小时</template>
        </InputNumber>
        <br />
    </div>
</template>

Inner Buttons

With innerButtons, you can hide the buttons on the right into the interior, which will only be displayed when hover occurs

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <InputNumber aria-label="Number with inner buttons" innerButtons style="width: 190px" />
</template>

The innerButtons buttons temporarily replace the #suffix slot while hovered or focused, and the slot content comes back afterwards.

Set hideButtons to true to hide the buttons completely

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <InputNumber aria-label="Number without buttons" hideButtons style="width: 190px" />
</template>

Size

默认尺寸 size=default

大尺寸 size=large

小尺寸 size=small

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 180px">
        <span id="inputnumber-size-default">默认尺寸 size=default</span>
        <InputNumber aria-labelledby="inputnumber-size-default" />
        <br />
        <br />

        <span id="inputnumber-size-large">大尺寸 size=large</span>
        <InputNumber aria-labelledby="inputnumber-size-large" size="large" />
        <br />
        <br />

        <span id="inputnumber-size-small">小尺寸 size=small</span>
        <InputNumber aria-labelledby="inputnumber-size-small" size="small" />
        <br />
    </div>
</template>

Custom Display Format and Resolution

A pair of methods for formatter and parser, which generally need to be set at the same time, otherwise the value cannot be resolved correctly.

人民币

自定义串

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const log = (v: number | string) => {
        console.log(`Changed to: [${typeof v}] ${v}`);
    };

    const formatRmb = (value: number | string) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    const parseRmb = (value: string) => value.replace(/￥\s?|(,*)/g, '');
    const formatCustom = (value: number | string) => String(value).split('').join('-');
    const parseCustom = (value: string) => value.replace(/-/g, '');
</script>

<template>
    <div style="width: 180px">
        <span id="inputnumber-formatter-rmb">人民币</span>
        <InputNumber aria-labelledby="inputnumber-formatter-rmb" :defaultValue="1000" :formatter="formatRmb" :min="0" :parser="parseRmb" @change="log" />
        <br />
        <br />

        <span id="inputnumber-formatter-custom">自定义串</span>
        <InputNumber aria-labelledby="inputnumber-formatter-custom" :defaultValue="1111" :formatter="formatCustom" :parser="parseCustom" @change="log" />
        <br />
    </div>
</template>

Can Only Enter Numbers

With formatter and onNumberChange (the numberChange event in Vue), a pure digital input box can be implemented.

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const formatInteger = (value: number | string) => `${value}`.replace(/\D/g, '');
    const log = (number: number) => console.log(number);
</script>

<template>
    <InputNumber aria-label="Integer" :formatter="formatInteger" :max="Number.MAX_SAFE_INTEGER" :min="0" @numberChange="log" />
</template>

Currency Display

In internationalization mode, enable currency={true} (just currency in Vue) and the component will automatically display the corresponding currency type according to localeCode. (Note that the component key value needs to be updated after switching the language type)

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import ar from '@fibrous/semi-foundation/locale/source/ar';
    import de from '@fibrous/semi-foundation/locale/source/de';
    import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
    import en_US from '@fibrous/semi-foundation/locale/source/en_US';
    import es from '@fibrous/semi-foundation/locale/source/es';
    import fr from '@fibrous/semi-foundation/locale/source/fr';
    import id_ID from '@fibrous/semi-foundation/locale/source/id_ID';
    import it from '@fibrous/semi-foundation/locale/source/it';
    import ja_JP from '@fibrous/semi-foundation/locale/source/ja_JP';
    import ko_KR from '@fibrous/semi-foundation/locale/source/ko_KR';
    import ms_MY from '@fibrous/semi-foundation/locale/source/ms_MY';
    import nl_NL from '@fibrous/semi-foundation/locale/source/nl_NL';
    import pl_PL from '@fibrous/semi-foundation/locale/source/pl_PL';
    import pt_BR from '@fibrous/semi-foundation/locale/source/pt_BR';
    import ro from '@fibrous/semi-foundation/locale/source/ro';
    import ru_RU from '@fibrous/semi-foundation/locale/source/ru_RU';
    import sv_SE from '@fibrous/semi-foundation/locale/source/sv_SE';
    import th_TH from '@fibrous/semi-foundation/locale/source/th_TH';
    import tr_TR from '@fibrous/semi-foundation/locale/source/tr_TR';
    import vi_VN from '@fibrous/semi-foundation/locale/source/vi_VN';
    import zh_CN from '@fibrous/semi-foundation/locale/source/zh_CN';
    import zh_TW from '@fibrous/semi-foundation/locale/source/zh_TW';
    import { InputNumber, LocaleProvider, Select } from '@fibrous/semi-ui-vue';

    const languages = {
        zh_CN,
        en_GB,
        en_US,
        ko_KR,
        ja_JP,
        ar,
        vi_VN,
        ru_RU,
        id_ID,
        ms_MY,
        th_TH,
        tr_TR,
        pt_BR,
        zh_TW,
        es,
        sv_SE,
        pl_PL,
        nl_NL,
        de,
        it,
        fr,
        ro,
    };

    const locale = ref<(typeof languages)[keyof typeof languages]>(zh_CN);
    const localeCode = ref('zh_CN');

    const onLanguageChange = (code?: string | number) => {
        if (typeof code !== 'string') {
            return;
        }
        locale.value = languages[code as keyof typeof languages];
        localeCode.value = code;
    };
</script>

<template>
    <div style="padding-bottom: 20px">
        <Select aria-label="切换语言" defaultValue="zh_CN" style="width: 250px" @change="onLanguageChange">
            <template #insetLabel>切换语言</template>
            <Select.Option value="zh_CN">简体中文</Select.Option>
            <Select.Option value="en_US">英语（美）</Select.Option>
            <Select.Option value="en_GB">英语（英）</Select.Option>
            <Select.Option value="ja_JP">日语</Select.Option>
            <Select.Option value="ko_KR">韩语</Select.Option>
            <Select.Option value="ar">阿拉伯语</Select.Option>
            <Select.Option value="vi_VN">越南语</Select.Option>
            <Select.Option value="ru_RU">俄罗斯语</Select.Option>
            <Select.Option value="id_ID">印尼语</Select.Option>
            <Select.Option value="ms_MY">马来语</Select.Option>
            <Select.Option value="th_TH">泰语</Select.Option>
            <Select.Option value="tr_TR">土耳其语</Select.Option>
            <Select.Option value="pt_BR">葡萄牙语（巴西）</Select.Option>
            <Select.Option value="zh_TW">繁体中文</Select.Option>
            <Select.Option value="es">西班牙语</Select.Option>
            <Select.Option value="de">德语</Select.Option>
            <Select.Option value="it">意大利语</Select.Option>
            <Select.Option value="fr">法语</Select.Option>
            <Select.Option value="ro">罗马尼亚语</Select.Option>
            <Select.Option value="sv_SE">瑞典语</Select.Option>
            <Select.Option value="pl_PL">波兰语</Select.Option>
            <Select.Option value="nl_NL">荷兰语</Select.Option>
        </Select>
    </div>
    <LocaleProvider :locale="locale">
        <InputNumber :key="localeCode" aria-label="金额" currency :defaultValue="123456.78" />
    </LocaleProvider>
</template>

You can also specify the currency to be displayed by manually passing localeCode and currency.

🇨🇳 人民币

🇪🇺 欧元

🇯🇵 日元

🇻🇳 越南盾

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-locale-cny">🇨🇳 人民币</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-cny" currency="CNY" :defaultValue="defaultValue" localeCode="zh-CN" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-eur">🇪🇺 欧元</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-eur" currency="EUR" :defaultValue="defaultValue" localeCode="de-DE" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-jpy">🇯🇵 日元</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-jpy" currency="JPY" :defaultValue="defaultValue" localeCode="ja-JP" />
        <br />
        <br />
        <div id="inputnumber-currency-locale-vnd">🇻🇳 越南盾</div>
        <InputNumber aria-labelledby="inputnumber-currency-locale-vnd" currency="VND" :defaultValue="defaultValue" localeCode="vi-VN" />
        <br />
        <br />
    </div>
</template>

Supports three display modes: symbol, code, and name. It is controlled by the currencyDisplay property. The currency symbol is displayed by default. Set showCurrencySymbol to false to hide the display of currency symbol/code/name

🇨🇳 CNY ➕ code

🇨🇳 CNY ➕ symbol

🇨🇳 CNY ➕ name

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-display-code">🇨🇳 CNY ➕ code</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-code" currency="CNY" currencyDisplay="code" :defaultValue="defaultValue" />
        <br />
        <br />
        <div id="inputnumber-currency-display-symbol">🇨🇳 CNY ➕ symbol</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-symbol" currency="CNY" currencyDisplay="symbol" :defaultValue="defaultValue" />
        <br />
        <br />
        <div id="inputnumber-currency-display-name">🇨🇳 CNY ➕ name</div>
        <InputNumber aria-labelledby="inputnumber-currency-display-name" currency="CNY" currencyDisplay="name" :defaultValue="defaultValue" />
        <br />
        <br />
    </div>
</template>

Hide the display of currency symbols/codes/names, and display the currency symbol through the prefix/suffix

🇨🇳 CNY ➕ code

CNY

🇨🇳 CNY ➕ symbol

￥

🇨🇳 CNY ➕ name

人民币

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';

    const defaultValue = 123456.78;
</script>

<template>
    <div>
        <div id="inputnumber-currency-affix-code">🇨🇳 CNY ➕ code</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-code" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #prefix>CNY</template>
        </InputNumber>
        <br />
        <br />
        <div id="inputnumber-currency-affix-symbol">🇨🇳 CNY ➕ symbol</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-symbol" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #prefix>￥</template>
        </InputNumber>
        <br />
        <br />
        <div id="inputnumber-currency-affix-name">🇨🇳 CNY ➕ name</div>
        <InputNumber aria-labelledby="inputnumber-currency-affix-name" currency="CNY" :defaultValue="defaultValue" :showCurrencySymbol="false" style="width: 200px">
            <template #suffix>人民币</template>
        </InputNumber>
        <br />
        <br />
    </div>
</template>

Scientific Notation Display

When the number is long, you can enable scientific notation display via the scientificNotation property. It displays in scientific notation when out of focus, and displays the full number when in focus.

启用科学计数法（默认阈值 15 位）

自定义阈值（10 位）

超大数字

小数场景

Code

<script setup lang="ts">
    import { InputNumber } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 280px">
        <span id="inputnumber-scientific-default">启用科学计数法（默认阈值 15 位）</span>
        <InputNumber aria-labelledby="inputnumber-scientific-default" :defaultValue="123456789012345" scientificNotation />
        <br />
        <br />

        <span id="inputnumber-scientific-threshold">自定义阈值（10 位）</span>
        <InputNumber aria-labelledby="inputnumber-scientific-threshold" :defaultValue="1234567890" :scientificNotation="{ threshold: 10 }" />
        <br />
        <br />

        <span id="inputnumber-scientific-large">超大数字</span>
        <InputNumber aria-labelledby="inputnumber-scientific-large" :defaultValue="1e16" scientificNotation />
        <br />
        <br />

        <span id="inputnumber-scientific-decimal">小数场景</span>
        <InputNumber aria-labelledby="inputnumber-scientific-decimal" :defaultValue="0.000000123456789" :precision="10" scientificNotation />
        <br />
        <br />
    </div>
</template>

API Reference

Props

Property	Description	Type	Default
modelValue	Current value, for v-model. A partial or invalid text is a string and a cleared input is ''; an explicit undefined is treated as uncontrolled.	`string \| number`	`undefined`
defaultValue	Initial value when uncontrolled.	`string \| number`	`semiGlobalDefault("InputNumber", "defaultValue")`
currency	Currency, such as CNY, EUR or USD. When true, uses defaultCurrency, or the currency of the locale pack when that is not set; a bare currency attribute equals true.	`string \| boolean`	`semiGlobalDefault("InputNumber", "currency")`
currencyDisplay	How the currency is shown: symbol, code or name.	`"symbol" \| "name" \| "code"`	`semiGlobalDefault("InputNumber", "currencyDisplay")`
defaultCurrency	Currency used when currency is true. Priority: own prop, global default, locale pack.	`string`	`semiGlobalDefault("InputNumber", "defaultCurrency")`
localeCode	Locale code used for formatting in currency mode, such as zh-CN, en-US or de-DE. Priority: own prop, global default, locale pack of LocaleProvider or ConfigProvider.	`string`	`semiGlobalDefault("InputNumber", "localeCode")`
minimumFractionDigits	Minimum number of fraction digits shown, passed to Intl.NumberFormat.	`number`	`semiGlobalDefault("InputNumber", "minimumFractionDigits")`
maximumFractionDigits	Maximum number of fraction digits shown, passed to Intl.NumberFormat.	`number`	`semiGlobalDefault("InputNumber", "maximumFractionDigits")`
precision	Numerical precision, the number of fraction digits kept.	`number`	`semiGlobalDefault("InputNumber", "precision")`
scientificNotation	Shows scientific notation when blurred and the full number when focused. Pass `{ threshold }` to configure the threshold, 15 significant digits by default. Not supported in currency mode.	`boolean \| ScientificNotationConfig`	`semiGlobalDefault("InputNumber", "scientificNotation")`
showCurrencySymbol	Whether to show the currency symbol, code or name; only in currency mode.	`boolean`	`semiDefault("InputNumber", "showCurrencySymbol", true)`
formatter	Format of the displayed value, usually set together with parser. Priority: own prop, global default.	`Type`	`undefined`
parser	Converts the text from formatter back to a number string; used together with formatter. Priority: own prop, global default.	`Type`	`undefined`
min	Minimum value.	`number`	`semiDefault("InputNumber", "min", -Infinity)`
max	Maximum value.	`number`	`semiDefault("InputNumber", "max", Infinity)`
step	Step of each change; may be a decimal.	`number`	`semiDefault("InputNumber", "step", numbers.DEFAULT_STEP)`
shiftStep	Step of each change while Shift is held; may be a decimal.	`number`	`semiDefault("InputNumber", "shiftStep", numbers.DEFAULT_SHIFT_STEP)`
pressInterval	Interval in milliseconds between repeats while a step button is held.	`number`	`Type`
pressTimeout	Delay in milliseconds before repeating starts while a step button is held.	`number`	`Type`
keepFocus	Keeps the input focused when a step button is clicked.	`boolean`	`semiDefault("InputNumber", "keepFocus", false)`
innerButtons	Puts the step buttons inside the input, shown on hover or focus and temporarily replacing the suffix slot.	`boolean`	`semiDefault("InputNumber", "innerButtons", false)`
hideButtons	Hides the step buttons; with innerButtons also true, no built-in button is shown either.	`boolean`	`semiDefault("InputNumber", "hideButtons", false)`
size	Input size: default, small or large.	`Size`	`semiDefault("InputNumber", "size", "default")`
disabled	Whether disabled.	`boolean`	`semiGlobalDefault("InputNumber", "disabled")`
readonly	Whether read-only.	`boolean`	`semiGlobalDefault("InputNumber", "readonly")`
borderless	Borderless mode.	`boolean`	`semiGlobalDefault("InputNumber", "borderless")`
showClear	Whether to show the clear button.	`boolean`	`semiGlobalDefault("InputNumber", "showClear")`
hideSuffix	Hides the suffix while the clear button is shown; by default the two sit side by side.	`boolean`	`semiGlobalDefault("InputNumber", "hideSuffix")`
composition	Whether to enable composition mode. When enabled, change is not emitted during IME composition and is emitted once after it ends.	`boolean`	`semiGlobalDefault("InputNumber", "composition")`
preventScroll	Whether focusing stops the browser from scrolling the document to the input; applies to focus calls inside the component.	`boolean`	`semiGlobalDefault("InputNumber", "preventScroll")`
autofocus	Focuses the input after mount.	`boolean`	`semiGlobalDefault("InputNumber", "autofocus")`
maxlength	Maximum length of the input text.	`number`	`semiGlobalDefault("InputNumber", "maxlength")`
minlength	Minimum length of the input text.	`number`	`semiGlobalDefault("InputNumber", "minlength")`
placeholder	Placeholder text.	`string \| number`	`semiGlobalDefault("InputNumber", "placeholder")`
validateStatus	Validation status: default, error, warning or success.	`"default" \| "error" \| "warning" \| "success"`	`semiGlobalDefault("InputNumber", "validateStatus")`
inputStyle	Style of the native input.	`StyleValue`	`semiGlobalDefault("InputNumber", "inputStyle")`
insetLabelId	The id of the inset label.	`string`	`undefined`

Events

Event	Description	Callback parameters
update:modelValue	Emitted when the value changes, for v-model to write back; emitted together with change.	`[value: string \| number]`
change	Emitted when the value changes. The second argument is the event that caused it: typing, a step button pointerdown, an arrow or Home/End keydown, or blur. Mounting and modelValue changes do not emit it; an out-of-range value is shown as given and is corrected and reported only after a user action.	`[value: string \| number, event: InputNumberChangeEvent]`
numberChange	Emitted when the number changes; the event argument is as in change.	`[value: number, event: InputNumberChangeEvent]`
upClick	Emitted when pressing the increase button steps the value, once per step while it is held; the arguments are the stepped value and the pointerdown event.	`[value: string, event: PointerEvent]`
downClick	Emitted when pressing the decrease button steps the value, once per step while it is held; the arguments are the stepped value and the pointerdown event.	`[value: string, event: PointerEvent]`
focus	Emitted when focus enters the input; moving focus between the input and the clear button does not fire it. The event is the focusin of the Input wrapper.	`[event: FocusEvent]`
blur	Emitted when focus leaves the input and the clear button. The event is the focusout of the Input wrapper.	`[event: FocusEvent]`
keydown	Emitted when a key is pressed in the input.	`[event: KeyboardEvent]`

Slots

Slot	Description	Scope parameters
prefix	Prefix content.	`any`
suffix	Suffix content; replaced while the innerButtons buttons are shown.	`any`
insetLabel	Inset label.	`any`
clearIcon	Custom icon of the clear button; valid when showClear is true.	`any`
addonBefore	Leading addon.	`any`
addonAfter	Trailing addon.	`any`

Exposes

Name	Description	Type
focus	Focuses the input; preventScroll prop applies when options.preventScroll is not given.	`Type`
blur	Removes focus.	`Type`
select	Selects all the text in the input.	`Type`
setSelectionRange	Sets the selection, with the parameters of the native setSelectionRange.	`Type`
input	The native input element; null after unmount.	`HTMLInputElement \| null`
nativeElement	The root element of the component; null after unmount.	`HTMLElement \| null`

v-model binds modelValue (number | string); the .number and .trim modifiers are not supported. Use defaultValue for an uncontrolled initial value. change and update:modelValue are emitted together with the same payload. Callbacks are events of the same name: @change, @numberChange, @upClick, @downClick, @focus, @blur, @keydown. focus and blur come from the focusin and focusout of the Input wrapper; the step buttons are not focusable and emit neither event themselves.

prefix, suffix, insetLabel, clearIcon, addonBefore and addonAfter are slots of the same name; for example prefix="$" becomes <template #prefix>$</template>.

There are no prefixCls or className. class and style land on the outer .semi-input-number; the other attributes (id, name, tabindex, title, aria-*, data-*, role) land on the native input. Input events not declared in the table above (enterPress, clear, input, keyup, compositionstart and so on) are passed through attrs to the Input inside, so write @enterPress and the like directly.

Methods

The ref gives an InputNumberHandle; see Exposes in the API Reference above.

Accessibility

Guideline: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

ARIA

InputNumber has spinbutton role
spinbutton uses aria-valuenow for current value, aria-valuemax for acceptable maximum value, and aria-valuemin for acceptable minimum value
When InputNumber is used in Form, the value of the input box's aria-labelledby reference is Field label

Keyboard and Focus

InputNumber can get focus, keyboard users can use Tab and Shift + Tab to switch focus (Increase and decrease buttons are not focusable)
Keyboard users can press up key ⬆️ or down key ⬇️ and the input value will increase or decrease by step (default is 1)
Hold down Shift + Up ⬆️ or Down ⬇️ , the input value will increase or decrease by shiftStep (default is 10)
Home jumps to the value of min and End to max, when that bound is set; without it the key moves the caret as usual
When the value is already at a bound and a key leaves it unchanged, onChange is not called (the change event in Vue)

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$transition_duration-inputNumber-bg	var(--semi-transition_duration-none)	数字输入框-背景色-动画持续时间
$transition_function-inputNumber-bg	var(--semi-transition_function-easeIn)	数字输入框-背景色-过渡曲线
$transition_delay-inputNumber-bg	var(--semi-transition_delay-none)	数字输入框-背景色-延迟时间
$transition_duration-inputNumber-border	var(--semi-transition_duration-none)	数字输入框-边框-动画持续时间
$transition_function-inputNumber-border	var(--semi-transition_function-easeIn)	数字输入框-边框-过渡曲线
$transition_delay-inputNumber-border	var(--semi-transition_delay-none)	数字输入框-边框-延迟时间
$transform_scale-inputNumber	var(--semi-transform_scale-none)	数字输入框-变大
$height-inputNumber_button_default	$height-control-default	数字输入框高度 - 默认
$height-inputNumber_button_large	$height-control-large	数字输入框高度 - 大
$height-inputNumber_button_small	$height-control-small	数字输入框高度 - 小
$height-inputNumber_button_inner_default	$height-control-default - 2px	隐藏步进器的数字输入框高度 - 默认
$height-inputNumber_button_inner_large	$height-control-large - 2px	隐藏步进器的数字输入框高度 - 大
$height-inputNumber_button_inner_small	$height-control-small - 2px	隐藏步进器的数字输入框高度 - 小
$width-inputNumber_button	14px	步进器按钮宽度
$radius-inputNumber	var(--semi-border-radius-small)	步进器按钮圆角 - 外部
$radius-inputNumber_inner	var(--semi-border-radius-small)	步进器按钮圆角 - 内部
$spacing-inputNumber_button-marginLeft	4px	步进器按钮左侧外边距
$color-inputNumber_button-text-default	var(--semi-color-text-2)	步进器按钮图标颜色
$color-inputNumber_button-text-disabled	var(--semi-color-disabled-text)	步进器按钮图标颜色 - 禁用
$color-inputNumber_button-bg-default	var(--semi-color-bg-2)	步进器按钮背景颜色
$color-inputNumber_button-bg-disabled	var(--semi-color-disabled-fill)	步进器按钮背景颜色 - 禁用
$color-inputNumber_button-bg-hover	var(--semi-color-fill-0)	步进器按钮图标颜色 - 悬浮
$color-inputNumber_button-bg-active	var(--semi-color-fill-1)	步进器按钮图标颜色 - 按下
$color-inputNumber_button-border-default	var(--semi-color-border)	步进器按钮描边颜色
$color-inputNumber_button-border-hover	var(--semi-color-fill-2)	步进器按钮描边颜色 - 悬浮
$width-inputNumber_button-border	1px	步进器按钮描边宽度
$spacing-inputNumber_button_inner-marginLeft	$spacing-tight	隐藏步进器按钮左侧外边距
$spacing-inputNumber_clearbtn_suffix-marginLeft	-$spacing-extra-tight	清空按钮左侧外边距