{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/inputnumber","result":{"data":{"current":{"frontmatter":{"title":"InputNumber","order":42,"brief":"Through the mouse or keyboard, input the value in the range. Unlike Input, it has a stepper operation area for digital scenes, and it can display more complex content formats when used with Parser.","icon":"doc-inputnumber"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to Use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-input-box","title":"Basic Input Box"},{"url":"#inner-buttons","title":"Inner Buttons"},{"url":"#size","title":"Size"},{"url":"#custom-display-format-and-resolution","title":"Custom Display Format and Resolution"},{"url":"#can-only-enter-numbers","title":"Can Only Enter Numbers"},{"url":"#currency-display","title":"Currency Display"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#methods","title":"Methods"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 42,\n  \"category\": \"Input\",\n  \"title\": \"InputNumber\",\n  \"subTitle\": \"InputNumber\",\n  \"icon\": \"doc-inputnumber\",\n  \"brief\": \"Through the mouse or keyboard, input the value in the range. Unlike Input, it has a stepper operation area for digital scenes, and it can display more complex content formats when used with Parser.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"When to Use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need to get a standard value.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { InputNumber } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Input Box\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    return (\\n        <div style={{ width: 280 }}>\\n            <label>Simple</label>\\n            <InputNumber />\\n            <br/><br/>\\n\\n            <label>Set step to 2 </label>\\n            <InputNumber step={2} />\\n            <br/><br/>\\n\\n            <label>Press shift key and click the button to increase/decrease the step size </label>\\n            <InputNumber shiftStep={100} />\\n            <br/><br/>\\n\\n            <label>Set min to 1, max to 10</label>\\n            <InputNumber min={1} max={10} defaultValue={1} />\\n            <br/><br/>\\n        </div>\\n    );\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    return (\\n        <div style={{ width: 280 }}>\\n            <label>Set defaultValue to 1 </label>\\n            <InputNumber defaultValue={1} />\\n            <br/><br/>\\n\\n            <label>Set disabled to true</label>\\n            <InputNumber defaultValue={2} disabled />\\n            <br/><br/>\\n\\n            <label>Set precision to 2 </label>\\n            <InputNumber precision={2} defaultValue={1.234} />\\n            <br/><br/>\\n\\n            <label>Set innerButtons=true </label>\\n            <InputNumber innerButtons={true} suffix={'Hour'} defaultValue={1} style={{ width: 190 }} />\\n            <br/>\\n\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Inner Buttons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"innerButtons\"), \", you can hide the buttons on the right into the interior, which will only be displayed when hover occurs\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <InputNumber innerButtons style={{ width: 190 }} />\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hidebuttons\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" to hide the buttons completely\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <InputNumber hideButtons style={{ width: 190 }} />\\n);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    return (\\n        <div style={{ width: 180 }}>\\n            <label>size=default</label>\\n            <InputNumber />\\n            <br/><br/>\\n\\n            <label>size=large</label>\\n            <InputNumber size=\\\"large\\\" />\\n            <br/><br/>\\n\\n            <label>size=small</label>\\n            <InputNumber size=\\\"small\\\" />\\n            <br/>\\n\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Display Format and Resolution\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"A pair of methods for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formatter\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"parser\"), \", which generally need to be set at the same time, otherwise the value cannot be resolved correctly.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useCallback } from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    const log = useCallback((v) => {\\n        console.log(`Changed to: [${typeof v}] ${v}`);\\n    }, []);\\n\\n    return (\\n        <div style={{ width: 180 }}>\\n            <label>RMB</label>\\n            <InputNumber\\n                onChange={log}\\n                defaultValue={1000}\\n                min={0}\\n                formatter={value => `\\uFFE5 ${value}`.replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')}\\n                parser={value => value.replace(/\\\\\\uFFE5\\\\s?|(,*)/g, '')}\\n            />\\n            <br/><br/>\\n\\n            <label>Custom string</label>\\n            <InputNumber\\n                onChange={log}\\n                defaultValue={1111}\\n                formatter={value => String(value).split('').join('-')}\\n                parser={value => value.replace(/\\\\-/g, '')}\\n            />\\n            <br/>\\n\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Can Only Enter Numbers\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With formatter and onNumberChange(\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \">=v1.9.0\"), \"), a pure digital input box can be implemented.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\nfunction Demo () {\\n    return (\\n        <InputNumber\\n            formatter={value => `${value}`.replace(/\\\\D/g, '')}\\n            onNumberChange={number => console.log(number)}\\n            min={0}\\n            max={Number.MAX_SAFE_INTEGER}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Currency Display\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Version 2.77.0 supports currency display. In internationalization mode, enable currency={true} 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)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useMemo, useState } from 'react';\\nimport zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\nimport en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';\\nimport ko_KR from '@douyinfe/semi-ui/lib/es/locale/source/ko_KR';\\nimport ja_JP from '@douyinfe/semi-ui/lib/es/locale/source/ja_JP';\\nimport ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';\\nimport vi_VN from '@douyinfe/semi-ui/lib/es/locale/source/vi_VN';\\nimport ru_RU from '@douyinfe/semi-ui/lib/es/locale/source/ru_RU';\\nimport id_ID from '@douyinfe/semi-ui/lib/es/locale/source/id_ID';\\nimport ms_MY from '@douyinfe/semi-ui/lib/es/locale/source/ms_MY';\\nimport th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';\\nimport tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';\\nimport pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';\\nimport zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';\\nimport sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';\\nimport pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';\\nimport nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';\\nimport es from '@douyinfe/semi-ui/lib/es/locale/source/es';\\nimport it from '@douyinfe/semi-ui/lib/es/locale/source/it';\\nimport de from '@douyinfe/semi-ui/lib/es/locale/source/de';\\nimport fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';\\nimport ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';\\nimport { LocaleProvider, InputNumber, Select } from '@douyinfe/semi-ui';\\n\\nfunction I18nDemo() {\\n    const [locale, setLocale] = useState(zh_CN);\\n    const [localeCode, setLocaleCode] = useState('zh_CN');\\n\\n    const language = useMemo(() => ({\\n        'zh_CN': zh_CN,\\n        'en_GB': en_GB,\\n        'en_US': en_US,\\n        'ko_KR': ko_KR,\\n        'ja_JP': ja_JP,\\n        'ar': ar,\\n        'vi_VN': vi_VN,\\n        'ru_RU': ru_RU,\\n        'id_ID': id_ID,\\n        'ms_MY': ms_MY,\\n        'th_TH': th_TH,\\n        'tr_TR': tr_TR,\\n        'pt_BR': pt_BR,\\n        'zh_TW': zh_TW,\\n        'es': es,\\n        'sv_SE': sv_SE,\\n        'pl_PL': pl_PL,\\n        'nl_NL': nl_NL,\\n        de,\\n        it,\\n        fr,\\n        ro\\n    }), []);\\n\\n    const onLanguageChange = (code) => {\\n        setLocale(language[code]);\\n        setLocaleCode(code);\\n    };\\n\\n    return (\\n        <>\\n            <div style={{ paddingBottom: 20 }}>\\n                <Select onChange={onLanguageChange} insetLabel='\\u5207\\u6362\\u8BED\\u8A00' style={{ width: 250 }} defaultValue='zh_CN'>\\n                    <Select.Option value='zh_CN'>Chinese</Select.Option>\\n                    <Select.Option value='en_GB'>English</Select.Option>\\n                    <Select.Option value='ja_JP'>Japanese</Select.Option>\\n                    <Select.Option value='ko_KR'>Korean</Select.Option>\\n                    <Select.Option value='ar'>Arabic</Select.Option>\\n                    <Select.Option value='vi_VN'>Vietnamese</Select.Option>\\n                    <Select.Option value='ru_RU'>Russian</Select.Option>\\n                    <Select.Option value='id_ID'>Indonesian</Select.Option>\\n                    <Select.Option value='ms_MY'>Malay</Select.Option>\\n                    <Select.Option value='th_TH'>Thai</Select.Option>\\n                    <Select.Option value='tr_TR'>Turkish</Select.Option>\\n                    <Select.Option value='es'>Spanish</Select.Option>\\n                    <Select.Option value='de'>German</Select.Option>\\n                    <Select.Option value='it'>Italian</Select.Option>\\n                    <Select.Option value='fr'>French</Select.Option>\\n                    <Select.Option value='ro'>Romanian</Select.Option>\\n                    <Select.Option value='sv_SE'>Swedish</Select.Option>\\n                    <Select.Option value='pl_PL'>Polish</Select.Option>\\n                    <Select.Option value='nl_NL'>Dutch</Select.Option>\\n                </Select>\\n            </div>\\n            <LocaleProvider locale={locale}>\\n                <InputNumber key={localeCode} currency={true} defaultValue={123456.78} />\\n            </LocaleProvider>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can also specify the currency to be displayed by manually passing localeCode and currency.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const defaultValue = 123456.78;\\n    return (\\n        <div>\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY</div>\\n            <InputNumber localeCode=\\\"zh-CN\\\" currency=\\\"CNY\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDEA\\uD83C\\uDDFA EUR</div>\\n            <InputNumber localeCode=\\\"de-DE\\\" currency=\\\"EUR\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDEF\\uD83C\\uDDF5 JPY</div>\\n            <InputNumber localeCode=\\\"ja-JP\\\" currency=\\\"JPY\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDFB\\uD83C\\uDDF3 VND</div>\\n            <InputNumber localeCode=\\\"vi-VN\\\" currency=\\\"VND\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n        </div>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"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\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';    \\n\\n() => {\\n    const defaultValue = 123456.78;\\n    return (\\n        <div>\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 code</div>\\n            <InputNumber currency=\\\"CNY\\\" currencyDisplay=\\\"code\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 symbol</div>\\n            <InputNumber currency=\\\"CNY\\\" currencyDisplay=\\\"symbol\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 name</div>\\n            <InputNumber currency=\\\"CNY\\\" currencyDisplay=\\\"name\\\" defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>Hide display of currency symbols/codes/names</div>\\n            <InputNumber currency=\\\"CNY\\\" currencyDisplay=\\\"name\\\" defaultValue={defaultValue} showCurrencySymbol={false}/>\\n            <br />\\n            <br />\\n        </div>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Hide the display of currency symbols/codes/names, and display the currency symbol through the prefix/suffix\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { InputNumber } from '@douyinfe/semi-ui';    \\n\\n() => {\\n    const defaultValue = 123456.78;\\n    return (\\n        <div>\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 code</div>\\n            <InputNumber style={{ width: 200 }} currency=\\\"CNY\\\" prefix=\\\"CNY\\\" showCurrencySymbol={false} defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 symbol</div>\\n            <InputNumber style={{ width: 200 }} currency=\\\"CNY\\\" prefix=\\\"\\uFFE5\\\" showCurrencySymbol={false} defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n            <div>\\uD83C\\uDDE8\\uD83C\\uDDF3 CNY \\u2795 name</div>\\n            <InputNumber style={{ width: 200 }} currency=\\\"CNY\\\" suffix=\\\"\\u4EBA\\u6C11\\u5E01\\\" showCurrencySymbol={false} defaultValue={defaultValue} />\\n            <br />\\n            <br />\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autofocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Automatic access to focus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"class name of InputNumber\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clearIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Can be used to customize the clear button, valid when showClear is true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.25.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currency\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Currency type. In international mode, currency={true} is enabled. The component will automatically display the corresponding currency type according to the locale. You can also manually pass in localeCode and currency to specify the currency type to display. The optional values \\u200B\\u200Bof currency are \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"CNY\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"EUR\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"USD\"), \", etc.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.77.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currencyDisplay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Currency display method. Optional values: symbol, code, name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"symbol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.77.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disabled status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formatter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the format of the input box to display the value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: number\", \"|\", \"string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hideButtons\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Hide the \\\"up/down\\\" button when passing \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"innerButtons\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Show the \\\"up/down\\\" button in input box when passing \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Keep the input box focused when you click the button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"localeCode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Used to specify the country code in currency mode. Optional values \\u200B\\u200Binclude \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"zh-CN\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"en-US\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"en-GB\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ja-JP\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ko-KR\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ar\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vi-VN\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ru-RU\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"id-ID\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ms-MY\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"th-TH\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tr-TR\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pt-BR\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"zh-TW\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"es\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"de\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"it\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fr\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"ro\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sv-SE\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pl-PL\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"nl-NL\"), \", etc.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.77.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Limit maximum value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Infinity\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"min\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Limit minimum value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-Infinity\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parser\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies how to convert back number string from formatter and use them in conjunction with formatter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"precision\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Numerical precision\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prefix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Prefix content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pressInterval\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"How often will the click event be triggered when the button is long pressed, in milliseconds\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"250\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pressTimeout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When the button is long pressed, how long will the click event be triggered after the delay, in milliseconds\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"250\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shiftStep\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Step size for pressing the shift key, it can be a decimal. The default value was adjusted from 1 to 10 in v2.13\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Do you show the clear button?\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showCurrencySymbol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to display the currency symbol/code/name, only valid in currency mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.77.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Enter box size, optional value: \\\"default\\\"\", \"|\", \"\\\"small\\\"\", \"|\", \"\\\"large\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"step\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Each time you change the number of steps, it can be a decimal.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style of InputNumber\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"suffix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom suffix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Current value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onBlur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when focus is lost\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: domEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Change callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: number\", \"|\", \"string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when focus is obtained\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: domEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onNumberChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Number change callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Some internal methods provided by InputNumber can be accessed through ref:\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"blur()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Move the focus.\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"focus()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Get the focus.\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Guideline: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\"\n  }, \"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"InputNumber has \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"spinbutton\"), \" role\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"spinbutton uses \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuenow\"), \" for current value, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuemax\"), \" for acceptable maximum value, and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuemin\"), \" for acceptable minimum value\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When InputNumber is used in Form, the value of the input box's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labeledby\"), \" reference is Field label\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Keyboard and Focus\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"InputNumber can get focus, keyboard users can use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\"), \" to switch focus (Increase and decrease buttons are not focusable)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Keyboard users can press up key \\u2B06\\uFE0F or down key \\u2B07\\uFE0F and the input value will increase or decrease by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"step\"), \" (default is 1)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hold down Shift + Up \\u2B06\\uFE0F or Down \\u2B07\\uFE0F , the input value will increase or decrease by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"shiftStep\"), \" (default is 10)\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/inputnumber","next":{"fields":{"slug":"zh-CN/input/inputnumber"},"id":"acab1ac3-a9e6-5f83-a513-92fa952f7667","frontmatter":{"title":"InputNumber 数字输入框","localeCode":"zh-CN","icon":"doc-inputnumber","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/input"},"id":"f507bb0e-f217-5ee9-a17a-41a4cb3d150b","frontmatter":{"title":"Input 输入框","localeCode":"zh-CN","icon":"doc-input","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}