{"id":22096522,"url":"https://github.com/pksilen/semantic-ui-react-numberinput","last_synced_at":"2025-07-24T22:32:10.348Z","repository":{"id":35064611,"uuid":"201916816","full_name":"pksilen/semantic-ui-react-numberinput","owner":"pksilen","description":"Numeric input control with step buttons for Semantic UI React","archived":false,"fork":false,"pushed_at":"2024-01-10T10:24:21.000Z","size":5414,"stargazers_count":11,"open_issues_count":5,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T18:43:52.236Z","etag":null,"topics":["input","javascript-library","number","numberinput","numberpicker","react","semantic-ui"],"latest_commit_sha":null,"homepage":"https://pksilen.github.io/semantic-ui-react-numberinput","language":"JavaScript","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/pksilen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"custom":["paypal.me/pksilen"]}},"created_at":"2019-08-12T11:25:54.000Z","updated_at":"2022-12-14T23:04:00.000Z","dependencies_parsed_at":"2024-10-27T05:36:50.710Z","dependency_job_id":"df6b93cd-49f9-4779-9e14-ce28b2c4d25b","html_url":"https://github.com/pksilen/semantic-ui-react-numberinput","commit_stats":{"total_commits":185,"total_committers":4,"mean_commits":46.25,"dds":0.5243243243243243,"last_synced_commit":"c6de3bb62fb30918b3cdc5ad7ad6383d6582b9ee"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/pksilen/semantic-ui-react-numberinput","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-numberinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-numberinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-numberinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-numberinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pksilen","download_url":"https://codeload.github.com/pksilen/semantic-ui-react-numberinput/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pksilen%2Fsemantic-ui-react-numberinput/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266913680,"owners_count":24005579,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["input","javascript-library","number","numberinput","numberpicker","react","semantic-ui"],"created_at":"2024-12-01T04:11:30.285Z","updated_at":"2025-07-24T22:32:09.969Z","avatar_url":"https://github.com/pksilen.png","language":"JavaScript","funding_links":["paypal.me/pksilen"],"categories":[],"sub_categories":[],"readme":"# semantic-ui-react-numberinput\nNumeric input control with step buttons for [Semantic UI React]\n\n[![version][version-badge]][package]\n[![build][build]][circleci]\n[![Downloads][downloads]][package]\n[![coverage][coverage]][codecov]\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-numberinput\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-numberinput)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-numberinput\u0026metric=bugs)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-numberinput)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=pksilen_semantic-ui-react-numberinput\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=pksilen_semantic-ui-react-numberinput)\n[![MIT License][license-badge]][license]\n\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/number_input_with_border_radius.png)\n\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/right_buttons_number_input_with_border_radius.png)\n\n## Prerequisites\n    \"react\": \"^16.0.0\",\n    \"react-dom\": \"^16.0.0\",\n    \"semantic-ui-react\": \"^0.87.0\"\n\n## Installation\n    npm install --save semantic-ui-react-numberinput\n    \n## Demo\n   NumberInput [demo] \n    \n## Example usage\n```jsx\nimport React from 'react';\nimport NumberInput from 'semantic-ui-react-numberinput';\n\nclass NumberInputExample extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: '0'\n        };\n    }\n\n    changeValue = (newValue) =\u003e {\n        this.setState({ value: newValue });\n    }\n\n    render() =\u003e {(\n        \u003cNumberInput value={this.state.value} onChange={this.changeValue} /\u003e\n    )};\n}\n```\n    \nRender NumberInput with step buttons on left and right side of the input (this is default behavior, if buttonPlacement is not specified)\n     \n```jsx\n\u003cNumberInput buttonPlacement=\"leftAndRight\" value={this.state.value} onChange={this.changeValue} /\u003e\n```\n         \nRender NumberInput with step buttons on the right side of the input\n\n```jsx\n\u003cNumberInput buttonPlacement=\"right\" value={this.state.value} onChange={this.changeValue} /\u003e\n```\n    \nSpecify allowed number range to be between 0 and 100\n         \n```jsx\n\u003cNumberInput minValue={0} maxValue={100} value={this.state.value} onChange={this.changeValue} /\u003e\n```\n         \nSpecify buttons to increment/decrement by 5 \n\n```jsx\n\u003cNumberInput stepAmount={5} value={this.state.value} onChange={this.changeValue} /\u003e\n```\n         \nSpecify decimal NumberInput with increment/decrement step of 0.25 and default precision of 2 \n\n```jsx\n\u003cNumberInput valueType=\"decimal\" stepAmount={0.25} value={this.state.value} onChange={this.changeValue} /\u003e\n```\n          \nSpecify decimal NumberInput with increment/decrement step of 0.1 and precision of 1 \n\n```jsx\n\u003cNumberInput valueType=\"decimal\" stepAmount={0.1} precision={1} value={this.state.value} onChange={this.changeValue} /\u003e\n```\n\nMore examples in `demo/demo.js` file\n\n## Mandatory NumberInput properties      \n    value: string, // must be parseable to integer or decimal number depending on valueType\n    onChange: (newValue: string) =\u003e void,\n         \n## Optional NumberInput properties\n| property             | description                                                                                                                    |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|\n| allowEmptyValue      | Specifies if value can be empty                                                                                                |    \n| allowMouseWheel      | Specifies if mouse wheel can used to change input value                                                                        |\n| buttonPlacement      | Specifies how step buttons are placed                                                                                          |\n| id                   | id for HTML outer div element                                                                                                  |\n| className            | class name(s) for HTML outer div element                                                                                       |\n| defaultValue         | Specifies default value to be used when value is empty (must be integer or decimal number depending on valueType)              |\n| disabled             | Specifies if NumberInput is disabled\n| doubleClickStepAmount| Specifies how much double click of a button increments/decrements the value, zero value disables double click feature          |\n| minValue             | Minimum value accepted for NumberInput (must be integer or decimal number depending on valueType)                              |                                                                           |\n| maxValue             | Maximum value accepted for NumberInput (must be integer or decimal number depending on valueType)                              |\n| maxLength            | Maximum length of HTML input value (must be a positive integer)                                                                |\n| placeholder          | Placeholder text for input element when value is empty, applicable only when allowEmptyValue is true                           |\n| precision            | Decimal number precision when valueType is 'decimal'                                                                           |\n| showError            | Specifies if HTML input element should show error style                                                                        |\n| showTooltips         | Specifies if tooltips are shown                                                                                                |\n| size                 | Specifies the size of the control                                                                                              |\n| stepAmount           | Specifies how much buttons increment/decrement the value (must be a positive integer or decimal number depending on valueType) |\n| valueType            | Specifies if value is integer or decimal number                                                                                |\n\n    \n## Optional NumberInput property types\n```ts\nallowEmptyValue: boolean,\nallowMouseWheel: boolean,\nbuttonPlacement: 'right' | 'leftAndRight' | 'none',  \nid: string,\nclassName: string,\ndefaultValue: number,\ndisabled: boolean,\ndoubleClickStepAmount: number,\nminValue: number, \nmaxValue: number,   \nmaxLength: number,\nplaceholder: string,\nprecision: number,\nshowError: boolean,\nshowTooltips: boolean,\nsize: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive',\nstepAmount: number,\nvalueType: 'integer' | 'decimal'\n```\n        \n## Default values for optional properties\n```js\nallowEmptyValue: false,\nallowMouseWheel: false,\nbuttonPlacement: 'leftAndRight',\nid: undefined,\nclassName: undefined,\ndefaultValue: undefined,\ndisabled: false,\ndoubleClickStepAmount: 0,\nminValue: 0,\nmaxValue: 9999999999,\nmaxLength: 10,\nplaceholder: 'Enter a value',\nprecision: 2,\nshowError: false,\nshowTooltips: true,\nsize: 'small',\nstepAmount: 1,\nvalueType: 'integer'\n```\n    \n## Keyboard actions\n\n| Key                  | Action                                                                                                                         |\n| -------------------- | -------------------------------------------------------------------------------------------------------------------------------|\n| ArrowUp              | Increments value by stepAmount                                                                                                 |\n| ArrowDown            | Decrements value by stepAmount                                                                                                 |\n| +                    | Increments value by stepAmount                                                                                                 |\n| -                    | Decrements value by stepAmount                                                                                                 |\n| PageUp               | Increments value by doubleClickStepAmount                                                                                      |\n| PageDown             | Decrements value by doubleClickStepAmount                                                                                      |\n| Ctrl + ArrowUp       | Increments value by doubleClickStepAmount                                                                                      |\n| Ctrl + ArrowDown     | Decrements value by doubleClickStepAmount                                                                                      |\n| Ctrl + +             | Increments value by doubleClickStepAmount                                                                                      |\n| Ctrl + -             | Decrements value by doubleClickStepAmount                                                                                      |\n  \n        \n## Styling example\n![Example image of numberInput](https://raw.githubusercontent.com/pksilen/semantic-ui-react-numberinput/master/example/styled_number_input.png)\n\nstyles.css\n\n```css\n.numberInput .ui.button {\n  background-color: red;\n  border-radius: 0 !important;\n  color: white;\n}\n\n.numberInput .ui.input \u003e input {\n  border-color: red;\n  color: red;\n  font-weight: bold;\n  width: 50px;\n}\n```\n    \nApplying CSS using className\n\n```jsx\n\u003cNumberInput className=\"numberInput\" value={this.state.value} onChange={this.changeValue} /\u003e\n```\n    \n## License\nMIT License\n\n## My other Semantic UI React components\n\n* [Scrollbar](https://github.com/pksilen/semantic-ui-react-scrollbar)\n* [Date Time Input](https://github.com/pksilen/semantic-ui-react-datetimeinput)\n* [Slider](https://github.com/pksilen/semantic-ui-react-slider)\n* [Text Input with integrated label](https://github.com/pksilen/semantic-ui-react-labeledinput)\n* [Line style Text Input](https://github.com/pksilen/semantic-ui-react-lineinput)\n\n[license-badge]: https://img.shields.io/badge/license-MIT-green\n[license]: https://github.com/pksilen/semantic-ui-react-numberinput/blob/master/LICENSE\n[version-badge]: https://img.shields.io/npm/v/semantic-ui-react-numberinput.svg?style=flat-square\n[package]: https://www.npmjs.com/package/semantic-ui-react-numberinput\n[downloads]: https://img.shields.io/npm/dm/semantic-ui-react-numberinput\n[build]: https://img.shields.io/circleci/project/github/pksilen/semantic-ui-react-numberinput/master.svg?style=flat-square\n[circleci]: https://circleci.com/gh/pksilen/semantic-ui-react-numberinput/tree/master\n[coverage]: https://img.shields.io/codecov/c/github/pksilen/semantic-ui-react-numberinput/master.svg?style=flat-square\n[codecov]: https://codecov.io/gh/pksilen/semantic-ui-react-numberinput\n[demo]: https://pksilen.github.io/semantic-ui-react-numberinput/\n[Semantic UI React]: https://react.semantic-ui.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-numberinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpksilen%2Fsemantic-ui-react-numberinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpksilen%2Fsemantic-ui-react-numberinput/lists"}