InputNumber - Svelte - Semi Design Next

When to Use

When you need to get a standard value.

Demos

How to import

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

Basic Input Box

There is no defaultValue: a plain value is the initial value, bind:value reads and writes it, and a function binding bind:value={() => value, (next) => { ... }} can refuse or rewrite it.

简单数字输入框

设置了步长 step=2

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

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

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

<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" max={10} min={1} value={1} />
    <br />
    <br />
</div>

设置了默认值 value=1

禁用 disabled=true

设置了小数位数 precision=2

设置了 innerButtons=true

小时

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

    <span id="inputnumber-basic-more-inner-buttons">设置了 innerButtons=true </span>
    <InputNumber aria-labelledby="inputnumber-basic-more-inner-buttons" innerButtons style="width: 190px" value={1}>
        {#snippet suffix()}小时{/snippet}
    </InputNumber>
    <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

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

The innerButtons buttons temporarily replace the content of the suffix snippet while hovered or focused, and the original content comes back afterwards.

Set hideButtons to true to hide the buttons completely

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

Size

默认尺寸 size=default

大尺寸 size=large

小尺寸 size=small

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

<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>

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 lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    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>

<div style="width: 180px">
    <span id="inputnumber-formatter-rmb">人民币</span>
    <InputNumber aria-labelledby="inputnumber-formatter-rmb" formatter={formatRmb} min={0} onChange={log} parser={parseRmb} value={1000} />
    <br />
    <br />

    <span id="inputnumber-formatter-custom">自定义串</span>
    <InputNumber aria-labelledby="inputnumber-formatter-custom" formatter={formatCustom} onChange={log} parser={parseCustom} value={1111} />
    <br />
</div>

Can Only Enter Numbers

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

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

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

<InputNumber aria-label="Integer" formatter={formatInteger} max={Number.MAX_SAFE_INTEGER} min={0} onNumberChange={log} />

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 lang="ts">
    import ar from '@fibrae/semi-foundation/locale/source/ar';
    import de from '@fibrae/semi-foundation/locale/source/de';
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import en_US from '@fibrae/semi-foundation/locale/source/en_US';
    import es from '@fibrae/semi-foundation/locale/source/es';
    import fr from '@fibrae/semi-foundation/locale/source/fr';
    import id_ID from '@fibrae/semi-foundation/locale/source/id_ID';
    import it from '@fibrae/semi-foundation/locale/source/it';
    import ja_JP from '@fibrae/semi-foundation/locale/source/ja_JP';
    import ko_KR from '@fibrae/semi-foundation/locale/source/ko_KR';
    import ms_MY from '@fibrae/semi-foundation/locale/source/ms_MY';
    import nl_NL from '@fibrae/semi-foundation/locale/source/nl_NL';
    import pl_PL from '@fibrae/semi-foundation/locale/source/pl_PL';
    import pt_BR from '@fibrae/semi-foundation/locale/source/pt_BR';
    import ro from '@fibrae/semi-foundation/locale/source/ro';
    import ru_RU from '@fibrae/semi-foundation/locale/source/ru_RU';
    import sv_SE from '@fibrae/semi-foundation/locale/source/sv_SE';
    import th_TH from '@fibrae/semi-foundation/locale/source/th_TH';
    import tr_TR from '@fibrae/semi-foundation/locale/source/tr_TR';
    import vi_VN from '@fibrae/semi-foundation/locale/source/vi_VN';
    import zh_CN from '@fibrae/semi-foundation/locale/source/zh_CN';
    import zh_TW from '@fibrae/semi-foundation/locale/source/zh_TW';
    import { InputNumber, LocaleProvider, Select } from '@fibrae/semi-ui-svelte';

    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 optionList = [
        { value: 'zh_CN', label: '简体中文' },
        { value: 'en_US', label: '英语（美）' },
        { value: 'en_GB', label: '英语（英）' },
        { value: 'ja_JP', label: '日语' },
        { value: 'ko_KR', label: '韩语' },
        { value: 'ar', label: '阿拉伯语' },
        { value: 'vi_VN', label: '越南语' },
        { value: 'ru_RU', label: '俄罗斯语' },
        { value: 'id_ID', label: '印尼语' },
        { value: 'ms_MY', label: '马来语' },
        { value: 'th_TH', label: '泰语' },
        { value: 'tr_TR', label: '土耳其语' },
        { value: 'pt_BR', label: '葡萄牙语（巴西）' },
        { value: 'zh_TW', label: '繁体中文' },
        { value: 'es', label: '西班牙语' },
        { value: 'de', label: '德语' },
        { value: 'it', label: '意大利语' },
        { value: 'fr', label: '法语' },
        { value: 'ro', label: '罗马尼亚语' },
        { value: 'sv_SE', label: '瑞典语' },
        { value: 'pl_PL', label: '波兰语' },
        { value: 'nl_NL', label: '荷兰语' },
    ];

    let localeCode = $state<keyof typeof languages>('zh_CN');
    const locale = $derived(languages[localeCode]);

    const onLanguageChange = (code: unknown) => {
        if (typeof code === 'string' && code in languages) {
            localeCode = code as keyof typeof languages;
        }
    };
</script>

<div style="padding-bottom: 20px">
    <Select aria-label="切换语言" onChange={onLanguageChange} {optionList} style="width: 250px" value="zh_CN">
        {#snippet insetLabel()}切换语言{/snippet}
    </Select>
</div>
<LocaleProvider {locale}>
    {#key localeCode}
        <InputNumber aria-label="金额" currency value={123456.78} />
    {/key}
</LocaleProvider>

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

🇨🇳 人民币

🇪🇺 欧元

🇯🇵 日元

🇻🇳 越南盾

Code

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

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

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

<div>
    <div id="inputnumber-currency-display-code">🇨🇳 CNY ➕ code</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-code" currency="CNY" currencyDisplay="code" {value} />
    <br />
    <br />
    <div id="inputnumber-currency-display-symbol">🇨🇳 CNY ➕ symbol</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-symbol" currency="CNY" currencyDisplay="symbol" {value} />
    <br />
    <br />
    <div id="inputnumber-currency-display-name">🇨🇳 CNY ➕ name</div>
    <InputNumber aria-labelledby="inputnumber-currency-display-name" currency="CNY" currencyDisplay="name" {value} />
    <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

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';

    const value = 123456.78;
</script>

<div>
    <div id="inputnumber-currency-affix-code">🇨🇳 CNY ➕ code</div>
    <InputNumber aria-labelledby="inputnumber-currency-affix-code" currency="CNY" showCurrencySymbol={false} style="width: 200px" {value}>
        {#snippet prefix()}CNY{/snippet}
    </InputNumber>
    <br />
    <br />
    <div id="inputnumber-currency-affix-symbol">🇨🇳 CNY ➕ symbol</div>
    <InputNumber aria-labelledby="inputnumber-currency-affix-symbol" currency="CNY" showCurrencySymbol={false} style="width: 200px" {value}>
        {#snippet prefix()}￥{/snippet}
    </InputNumber>
    <br />
    <br />
    <div id="inputnumber-currency-affix-name">🇨🇳 CNY ➕ name</div>
    <InputNumber aria-labelledby="inputnumber-currency-affix-name" currency="CNY" showCurrencySymbol={false} style="width: 200px" {value}>
        {#snippet suffix()}人民币{/snippet}
    </InputNumber>
    <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

<script lang="ts">
    import { InputNumber } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

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

API Reference

Props

Property	Description	Type	Default
addonAfter	Snippet of the trailing addon.	`Snippet`	-
addonBefore	Snippet of the leading addon.	`Snippet`	-
autofocus	Focuses the input after mount.	`boolean`	-
borderless	Borderless mode.	`boolean`	-
clearIcon	Snippet of the custom clear button icon; valid when showClear is true.	`Snippet`	-
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; a bare currency attribute equals true.	`boolean \| string`	-
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`	-
disabled	Whether disabled.	`boolean`	-
formatter	Format of the displayed value, usually set together with parser. Priority: own prop, global default.	`Type`	-
hideButtons	Hides the step buttons; with innerButtons also true, no built-in button is shown either.	`boolean`	`false`
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 the suffix.	`boolean`	`false`
inputStyle	Style of the native input. Accepts a string only.	`string`	-
insetLabel	Snippet of the inset label.	`Snippet`	-
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`	-
maxlength	Maximum length of the input text.	`number`	-
min	Minimum value.	`number`	`-Infinity`
minimumFractionDigits	Minimum number of fraction digits shown, passed to Intl.NumberFormat.	`number`	-
minlength	Minimum length of the input text.	`number`	-
onBlur	Called when focus leaves the input and the clear button. The event is the focusout of the Input wrapper.	`Type`	-
onChange	Called 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 a new value from the parent 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`	-
onCompositionEnd	Called when an IME composition ends.	`Type`	-
onCompositionStart	Called when an IME composition starts.	`Type`	-
onCompositionUpdate	Called while an IME composition updates.	`Type`	-
onDownClick	Called 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.	`Type`	-
onEnterPress	Called when Enter is pressed in the input.	`Type`	-
onFocus	Called when focus enters the input; moving focus between the input and the clear button does not call it. The event is the focusin of the Input wrapper.	`Type`	-
onInput	Callback for the native input event.	`Type`	-
onKeyDown	Called when a key is pressed in the input.	`Type`	-
onKeyUp	Called when a key is released in the input.	`Type`	-
onNumberChange	Called when the number changes; the event argument is as in onChange.	`Type`	-
onUpClick	Called 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.	`Type`	-
parser	Converts the text from formatter back to a number string; used together with formatter. Priority: own prop, global default.	`Type`	-
placeholder	Placeholder text.	`string \| number`	-
precision	Numerical precision, the number of fraction digits kept.	`number`	-
prefix	Snippet of the prefix content.	`Snippet`	-
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 focus calls inside the component.	`boolean`	-
readonly	Whether read-only.	`boolean`	-
readOnly	Native `readonly`: blocks typing only and keeps the clear button; `readonly` also hides the clear button.	`boolean`	-
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`	-
showCurrencySymbol	Whether to show the currency symbol, code or name; only in currency mode.	`boolean`	`true`
size	Input size: default, small or large.	`InputSize`	-
step	Step of each change; may be a decimal.	`number`	`1`
suffix	Snippet of the suffix content; replaced while the innerButtons buttons are shown.	`Snippet`	-
validateStatus	Validation status: default, error, warning or success.	`ValidateStatus`	-
value	Current value; bind it with `bind:value`. A partial or invalid text is a string and a cleared input is ''. `bind:value={get, set}` makes it fully controlled; a plain `value` is the initial value.	`number \| string`	-

Methods

Method	Description	Type
blur	Removes focus.	`Type`
focus	Focuses the input; preventScroll prop applies when options.preventScroll is not given.	`Type`
getInput	Returns the native input element; null after unmount.	`Type`
getNativeElement	Returns the root element of the component; null after unmount.	`Type`
select	Selects all the text in the input.	`Type`
setSelectionRange	Sets the selection, with the parameters of the native setSelectionRange.	`Type`

class and style (a string) land on the outer .semi-input-number; other undeclared attributes (id, name, tabindex, title, aria-*, data-*, role) land on the native input. prefix, suffix, insetLabel, clearIcon, addonBefore and addonAfter are snippets. Inside an InputGroup it follows the group's size and disabled.

Methods

Call focus(options), blur(), select(), setSelectionRange(), getInput() and getNativeElement() on the instance obtained with bind:this; see Methods above. focus() without arguments follows the preventScroll prop.

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