{"id":26775515,"url":"https://github.com/react-component/input-number","last_synced_at":"2025-05-13T23:04:25.385Z","repository":{"id":30357391,"uuid":"33909864","full_name":"react-component/input-number","owner":"react-component","description":"React Input Number","archived":false,"fork":false,"pushed_at":"2025-04-29T13:40:00.000Z","size":9944,"stargazers_count":324,"open_issues_count":84,"forks_count":177,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-07T20:38:37.599Z","etag":null,"topics":["ant-design","antd","antd-mobile","javascript","react","react-native"],"latest_commit_sha":null,"homepage":"https://input-number.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"ant-design","patreon":null,"open_collective":"ant-design","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2015-04-14T04:01:00.000Z","updated_at":"2025-04-29T13:40:04.000Z","dependencies_parsed_at":"2023-02-10T06:15:13.809Z","dependency_job_id":"7d079a55-5300-4c69-8ff8-1bd5b28a78c9","html_url":"https://github.com/react-component/input-number","commit_stats":{"total_commits":490,"total_committers":87,"mean_commits":5.632183908045977,"dds":0.616326530612245,"last_synced_commit":"88d1593bbefcb36421ee57089bc5a933cc88e20e"},"previous_names":[],"tags_count":215,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Finput-number","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Finput-number/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Finput-number/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Finput-number/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/input-number/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253480857,"owners_count":21915249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","antd-mobile","javascript","react","react-native"],"created_at":"2025-03-29T03:18:41.374Z","updated_at":"2025-05-13T23:04:25.358Z","avatar_url":"https://github.com/react-component.png","language":"TypeScript","readme":"# rc-input-number\n\nInput number control.\n\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n[![build status][github-actions-image]][github-actions-url]\n[![Codecov][codecov-image]][codecov-url]\n[![bundle size][bundlephobia-image]][bundlephobia-url]\n[![dumi][dumi-image]][dumi-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-input-number.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-input-number\n[travis-image]: https://img.shields.io/travis/react-component/input-number/master?style=flat-square\n[travis-url]: https://travis-ci.com/react-component/input-number\n[github-actions-image]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml/badge.svg\n[github-actions-url]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/input-number/master.svg?style=flat-square\n[codecov-url]: https://app.codecov.io/gh/react-component/input-number\n[david-url]: https://david-dm.org/react-component/input-number\n[david-image]: https://david-dm.org/react-component/input-number/status.svg?style=flat-square\n[david-dev-url]: https://david-dm.org/react-component/input-number?type=dev\n[david-dev-image]: https://david-dm.org/react-component/input-number/dev-status.svg?style=flat-square\n[download-image]: https://img.shields.io/npm/dm/rc-input-number.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-input-number\n[bundlephobia-url]: https://bundlephobia.com/package/rc-input-number\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-input-number\n[dumi-url]: https://github.com/umijs/dumi\n[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square\n\n## Screenshots\n\n\u003cimg src=\"https://user-images.githubusercontent.com/507615/83162463-61414a80-a13c-11ea-9420-971f8697d490.png\" width=\"288\"/\u003e\n\n## Install\n\n[![rc-input-number](https://nodei.co/npm/rc-input-number.png)](https://npmjs.org/package/rc-input-number)\n\n## Usage\n\n```js\nimport InputNumber from 'rc-input-number';\n\nexport default () =\u003e \u003cInputNumber defaultValue={10} /\u003e;\n```\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Example\n\nhttp://127.0.0.1:8000/examples/\n\nonline example: https://input-number.vercel.app/\n\n## API\n\n### props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprefixCls\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003erc-input-number\u003c/td\u003e\n          \u003ctd\u003eSpecifies the class prefix\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emin\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the minimum value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonClick\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eplaceholder\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emax\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the maximum value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003estep\u003c/td\u003e\n          \u003ctd\u003eNumber or String\u003c/td\u003e\n          \u003ctd\u003e1\u003c/td\u003e\n          \u003ctd\u003eSpecifies the legal number intervals\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eprecision\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the precision length of value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edisabled\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eSpecifies that an InputNumber should be disabled\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003erequired\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eSpecifies that an InputNumber is required\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eautoFocus\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eSpecifies that an InputNumber should automatically get focus when the page loads\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ereadOnly\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eSpecifies that an InputNumber is read only \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003econtrols\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003eWhether to enable the control buttons\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ename\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the name of an InputNumber\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eid\u003c/td\u003e\n          \u003ctd\u003eString\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the id of an InputNumber\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003evalue\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the value of an InputNumber\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edefaultValue\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the defaultValue of an InputNumber\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonChange\u003c/td\u003e\n          \u003ctd\u003eFunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCalled when value of an InputNumber changed\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonBlur\u003c/td\u003e\n            \u003ctd\u003eFunction\u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003ctd\u003eCalled when user leaves an input field\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonPressEnter\u003c/td\u003e\n          \u003ctd\u003eFunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eThe callback function that is triggered when Enter key is pressed.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonFocus\u003c/td\u003e\n          \u003ctd\u003eFunction\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eCalled when an element gets focus\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003estyle\u003c/td\u003e\n          \u003ctd\u003eObject\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eroot style. such as {width:100}\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eupHandler\u003c/td\u003e\n          \u003ctd\u003eReact.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecustom the up step element\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edownHandler\u003c/td\u003e\n          \u003ctd\u003eReact.Node\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003ecustom the down step element\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eformatter\u003c/td\u003e\n          \u003ctd\u003e(value: number|string): displayValue: string\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the format of the value presented\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eparser\u003c/td\u003e\n          \u003ctd\u003e(displayValue: string) =\u003e value: number\u003c/td\u003e\n          \u003ctd\u003e`input =\u003e input.replace(/[^\\w\\.-]*/g, '')`\u003c/td\u003e\n          \u003ctd\u003eSpecifies the value extracted from formatter\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003epattern\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of \"\\d*\" to do this) or form validation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edecimalSeparator\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the decimal separator\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003einputMode\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eSpecifies the inputmode of input\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ewheel\u003c/td\u003e\n          \u003ctd\u003eBoolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003eAllows changing value with mouse wheel\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Keyboard Navigation\n* When you hit the \u003ckbd\u003e⬆\u003c/kbd\u003e or \u003ckbd\u003e⬇\u003c/kbd\u003e key, the input value will be increased or decreased by `step`\n* With the \u003ckbd\u003eShift\u003c/kbd\u003e key (\u003ckbd\u003eShift+⬆\u003c/kbd\u003e, \u003ckbd\u003eShift+⬇\u003c/kbd\u003e), the input value will be changed by `10 * step`\n* With the \u003ckbd\u003eCtrl\u003c/kbd\u003e or \u003ckbd\u003e⌘\u003c/kbd\u003e key (\u003ckbd\u003eCtrl+⬆\u003c/kbd\u003e or \u003ckbd\u003e⌘+⬆\u003c/kbd\u003e or \u003ckbd\u003eCtrl+⬇\u003c/kbd\u003e or \u003ckbd\u003e⌘+⬇\u003c/kbd\u003e ), the input value will be changed by `0.1 * step`\n\n## Mouse Wheel\n* When you scroll up or down, the input value will be increased or decreased by `step`\n* Scrolling with the \u003ckbd\u003eShift\u003c/kbd\u003e key, the input value will be changed by `10 * step`\n\n## Test Case\n\n```\nnpm test\nnpm run chrome-test\n```\n\n## Coverage\n\n```\nnpm run coverage\n```\n\nopen coverage/ dir\n\n## License\n\nrc-input-number is released under the MIT license.\n","funding_links":["https://github.com/sponsors/ant-design","https://opencollective.com/ant-design"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Finput-number","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Finput-number","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Finput-number/lists"}