InputNumber - Semi Design Next

When to Use

When you need to get a standard value.

Demos

How to import

import { InputNumber } from '@fibrous/semi-ui-react';

Basic Input Box

简单数字输入框

设置了步长 step=2

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

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

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return (
        <div style={{ width: 280 }}>
            <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" min={1} max={10} defaultValue={1} />
            <br />
            <br />
        </div>
    );
}

设置了默认值 defaultValue=1

禁用 disabled=true

设置了小数位数 precision=2

设置了 innerButtons=true

小时

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return (
        <div style={{ width: 280 }}>
            <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" precision={2} defaultValue={1.234} />
            <br />
            <br />

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

Inner Buttons

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

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Number with inner buttons" innerButtons style={{ width: 190 }} />;
}

Set hideButtons to true to hide the buttons completely

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Number without buttons" hideButtons style={{ width: 190 }} />;
}

Size

默认尺寸 size=default

大尺寸 size=large

小尺寸 size=small

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return (
        <div style={{ width: 180 }}>
            <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>
    );
}

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

import { InputNumber } from '@fibrous/semi-ui-react';

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

    return (
        <div style={{ width: 180 }}>
            <span id="inputnumber-formatter-rmb">人民币</span>
            <InputNumber aria-labelledby="inputnumber-formatter-rmb" onChange={log} defaultValue={1000} min={0} formatter={(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={(value) => value.replace(/￥\s?|(,*)/g, '')} />
            <br />
            <br />

            <span id="inputnumber-formatter-custom">自定义串</span>
            <InputNumber aria-labelledby="inputnumber-formatter-custom" onChange={log} defaultValue={1111} formatter={(value) => String(value).split('').join('-')} parser={(value) => value.replace(/-/g, '')} />
            <br />
        </div>
    );
}

Can Only Enter Numbers

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

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return <InputNumber aria-label="Integer" formatter={(value) => `${value}`.replace(/\D/g, '')} onNumberChange={(number) => console.log(number)} min={0} max={Number.MAX_SAFE_INTEGER} />;
}

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

import { useMemo, useState } from 'react';
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 { LocaleProvider, InputNumber, Select } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    const [locale, setLocale] = useState(zh_CN);
    const [localeCode, setLocaleCode] = useState('zh_CN');

    const language = useMemo(
        () => ({
            zh_CN: zh_CN,
            en_GB: en_GB,
            en_US: en_US,
            ko_KR: ko_KR,
            ja_JP: ja_JP,
            ar: ar,
            vi_VN: vi_VN,
            ru_RU: ru_RU,
            id_ID: id_ID,
            ms_MY: ms_MY,
            th_TH: th_TH,
            tr_TR: tr_TR,
            pt_BR: pt_BR,
            zh_TW: zh_TW,
            es: es,
            sv_SE: sv_SE,
            pl_PL: pl_PL,
            nl_NL: nl_NL,
            de,
            it,
            fr,
            ro,
        }),
        []
    );

    const onLanguageChange = (code?: string) => {
        if (!code) {
            return;
        }
        setLocale(language[code as keyof typeof language]);
        setLocaleCode(code);
    };

    return (
        <>
            <div style={{ paddingBottom: 20 }}>
                <Select aria-label="切换语言" onChange={onLanguageChange} insetLabel="切换语言" style={{ width: 250 }} defaultValue="zh_CN">
                    <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 aria-label="金额" key={localeCode} currency defaultValue={123456.78} />
            </LocaleProvider>
        </>
    );
}

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

🇨🇳 人民币

🇪🇺 欧元

🇯🇵 日元

🇻🇳 越南盾

Code

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    const defaultValue = 123456.78;
    return (
        <div>
            <div id="inputnumber-currency-locale-cny">🇨🇳 人民币</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-cny" localeCode="zh-CN" currency="CNY" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-eur">🇪🇺 欧元</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-eur" localeCode="de-DE" currency="EUR" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-jpy">🇯🇵 日元</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-jpy" localeCode="ja-JP" currency="JPY" defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-locale-vnd">🇻🇳 越南盾</div>
            <InputNumber aria-labelledby="inputnumber-currency-locale-vnd" localeCode="vi-VN" currency="VND" defaultValue={defaultValue} />
            <br />
            <br />
        </div>
    );
}

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

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    const defaultValue = 123456.78;
    return (
        <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>
    );
}

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

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    const defaultValue = 123456.78;
    return (
        <div>
            <div id="inputnumber-currency-affix-code">🇨🇳 CNY ➕ code</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-code" style={{ width: 200 }} currency="CNY" prefix="CNY" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-affix-symbol">🇨🇳 CNY ➕ symbol</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-symbol" style={{ width: 200 }} currency="CNY" prefix="￥" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
            <div id="inputnumber-currency-affix-name">🇨🇳 CNY ➕ name</div>
            <InputNumber aria-labelledby="inputnumber-currency-affix-name" style={{ width: 200 }} currency="CNY" suffix="人民币" showCurrencySymbol={false} defaultValue={defaultValue} />
            <br />
            <br />
        </div>
    );
}

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

import { InputNumber } from '@fibrous/semi-ui-react';

export default function InputNumberDemo() {
    return (
        <div style={{ width: 280 }}>
            <span id="inputnumber-scientific-default">启用科学计数法（默认阈值 15 位）</span>
            <InputNumber aria-labelledby="inputnumber-scientific-default" scientificNotation defaultValue={123456789012345} />
            <br />
            <br />

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

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

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

API Reference

Props

Property	Description	Type	Default
addonAfter	Trailing addon, shown outside the input on the right.	`React.ReactNode`	-
addonBefore	Leading addon, shown outside the input on the left.	`React.ReactNode`	-
aria-describedby	Id of the element describing the input.	`React.AriaAttributes['aria-describedby']`	-
aria-errormessage	Id of the element with the error message.	`React.AriaAttributes['aria-errormessage']`	-
aria-invalid	Whether validation failed. Fixed to `true` when `validateStatus` is `error`.	`React.AriaAttributes['aria-invalid']`	-
aria-label	Accessible name of the input.	`React.AriaAttributes['aria-label']`	-
aria-labelledby	Id of the element labelling the input, used as its accessible name. When not set and there is an inset label (`insetLabel`), it points to that label.	`React.AriaAttributes['aria-labelledby']`	-
aria-required	Whether a value is required.	`React.AriaAttributes['aria-required']`	-
autofocus	The native `autofocus` attribute, set on the native `input`.	`boolean`	-
borderless	Borderless mode.	`boolean`	-
className	Class name of the root element (`.semi-input-number`).	`string`	-
clearIcon	Icon of the clear button, as a ReactNode. Takes effect only when `showClear` is `true`.	`React.ReactNode`	-
composition	Whether to enable composition mode. When enabled, `onChange` is not called during IME composition and is called once after it ends.	`boolean`	-
currency	Currency, such as CNY, EUR or USD. When `true`, uses `defaultCurrency`, or the currency of the locale pack when that is not set.	`string \| boolean`	-
currencyDisplay	How the currency is shown: `symbol`, `code` or `name`.	`'code' \| 'symbol' \| 'name'`	-
defaultCurrency	Currency used when `currency` is `true`. Priority: own prop, global default, locale pack.	`string`	-
defaultValue	Initial value when uncontrolled.	`number \| string`	-
disabled	Whether disabled. Falls back to the value of the enclosing `InputGroup` when not set.	`boolean`	-
formatter	Format of the displayed value, usually set together with `parser`.	`Type`	-
getValueLength	Function that measures the text length. When set, it enforces `maxLength` and `minLength` instead of the native `maxlength` attribute.	`Type`	-
hideButtons	Hides the step buttons; with `innerButtons` also `true`, no built-in button is shown either.	`boolean`	-
hideSuffix	Hides the suffix while the clear button is shown; by default the two sit side by side.	`boolean`	-
innerButtons	Puts the step buttons inside the input, shown on hover or focus and temporarily replacing `suffix`.	`boolean`	`false`
inputStyle	Style of the native `input`, typed as `CSSProperties`.	`React.CSSProperties`	-
insetLabel	Inset label, shown inside the input.	`React.ReactNode`	-
insetLabelId	The id of the inset label.	`string`	-
keepFocus	Keeps the input focused when a step button is clicked.	`boolean`	`false`
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`	-
max	Maximum value.	`number`	`Infinity`
maximumFractionDigits	Maximum number of fraction digits shown, passed to `Intl.NumberFormat`.	`number`	-
min	Minimum value.	`number`	`-Infinity`
minimumFractionDigits	Minimum number of fraction digits shown, passed to `Intl.NumberFormat`.	`number`	-
mode	Input mode, `password`, which shows a button to toggle visibility.	`InputMode`	-
onBlur	Called when focus leaves the input; the event is the `focusout` of the wrapper.	`Type`	-
onChange	Called when the value changes, with the displayed value (`number` or `string`) and `e`, which is the typing, the `pointerdown` of a step button, the arrow or Home/End keydown, or the blur that caused it. Mounting and `value` changes do not call it; an out-of-range value is shown as given and is corrected and reported only after a user action.	`Type`	-
onClear	Called when the clear button is clicked.	`Type`	-
onDownClick	Called when the decrease button is clicked, with the stepped value and the `pointerdown` event. While held, it is called on every step with the event that began the press.	`Type`	-
onEnterPress	Called when the Enter key is pressed.	`Type`	-
onFocus	Called when focus enters the input; the event is the `focusin` of the wrapper.	`Type`	-
onInput	Called on the native `input` event of the input, passed through to it.	`Type`	-
onKeyDown	Called when a key is pressed in the input; the event is its `keydown`.	`Type`	-
onKeyUp	Called when a key is released in the input; the event is its `keyup`.	`Type`	-
onlyBorder	Internal prop giving the border width of the wrapper in pixels, set by other components; callers normally do not pass it.	`number`	-
onNumberChange	Called when the number changes; the first argument is the number, and the second is as in `onChange`.	`Type`	-
onUpClick	Called when the increase button is clicked, with the stepped value and the `pointerdown` event. While held, it is called on every step with the event that began the press.	`Type`	-
parser	Converts the text from `formatter` back to a number string; used together with `formatter`.	`Type`	-
placeholder	Placeholder text.	`string \| number`	-
precision	Numerical precision, the number of fraction digits kept.	`number`	-
prefix	Prefix content, shown inside the input on the left.	`React.ReactNode`	-
prefixCls	Class name prefix of the component; the root class is the prefix plus `-number`. The default prefix is `semi-input`, so the root class is `semi-input-number`.	`string`	`"semi-input"`
pressInterval	Interval in milliseconds between repeats while a step button is held.	`number`	`250`
pressTimeout	Delay in milliseconds before repeating starts while a step button is held.	`number`	`250`
preventScroll	Whether focusing stops the browser from scrolling the document to the input; applies to focusing inside the component, including the default of the handle's `focus()`.	`boolean`	-
readonly	Whether read-only. Locks typing and hides the clear button; the native `readOnly` locks typing only.	`boolean`	-
ref	Imperative handle of the component, typed `InputNumberHandle`, not a native DOM node. Its members are listed in Methods below.	`Type`	-
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`	-
shiftStep	Step of each change while Shift is held; may be a decimal.	`number`	`10`
showClear	Whether to show the clear button.	`boolean`	-
showClearIgnoreDisabled	Internal prop set by DatePicker; callers normally do not pass it.	`boolean`	-
showCurrencySymbol	Whether to show the currency symbol, code or name; only in currency mode.	`boolean`	`true`
size	Input size: `default`, `small` or `large`. The `size` of the enclosing `InputGroup` takes precedence when it is set.	`'small' \| 'large' \| 'default'`	`"default"`
step	Step of each change; may be a decimal.	`number`	`1`
style	Style of the root element (`.semi-input-number`).	`React.CSSProperties`	-
suffix	Suffix content, shown inside the input on the right.	`React.ReactNode`	-
type	The `type` attribute of the native `input`, `text` by default.	`string`	-
validateStatus	Validation status: `default`, `error`, `warning` or `success`.	`ValidateStatus`	-
value	Current value; passing it makes the component controlled, so update it in `onChange`. An explicit `undefined` is treated as uncontrolled.	`number \| string`	-

Methods

Method	Description	Type
blur	Removes focus from the input.	`Type`
focus	Focuses the input. When `options.preventScroll` is not passed, the value of the `preventScroll` prop is used.	`Type`
input	The native `input` element, `null` after unmounting.	`HTMLInputElement \| null`
nativeElement	The root element (`.semi-input-number`), `null` after unmounting.	`HTMLElement \| null`
select	Selects all the text in the input.	`Type`
setSelectionRange	Sets the selection of the input; the arguments are those of the native `setSelectionRange`.	`Type`

Other native attributes (such as id, name, tabindex, title and data-*) land on the native input.

Methods

The ref of InputNumber is an imperative handle (InputNumberHandle), not the native DOM node. Read a node from the handle's properties when you need one: each read returns the node mounted now, and null after unmount. The handle's methods and properties are listed in the API Reference.

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	清空按钮左侧外边距