{"id":23039297,"url":"https://github.com/javadbat/jb-number-input","last_synced_at":"2025-08-14T18:33:09.525Z","repository":{"id":248830419,"uuid":"826694228","full_name":"javadbat/jb-number-input","owner":"javadbat","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-11T16:35:15.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-11T17:35:27.206Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/javadbat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-07-10T07:42:27.000Z","updated_at":"2024-12-11T16:35:19.000Z","dependencies_parsed_at":"2024-12-11T17:26:28.820Z","dependency_job_id":"2c517769-c4ca-4fdb-9b00-aeb81f510932","html_url":"https://github.com/javadbat/jb-number-input","commit_stats":null,"previous_names":["javadbat/jb-number-input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-number-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859745,"owners_count":18135506,"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":[],"created_at":"2024-12-15T18:30:04.314Z","updated_at":"2025-08-14T18:33:09.509Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jb-number-input\n\nthis is a superset component on [jb-input](https://github.com/javadbat/jb-input) , just for number input with extra filter and ready to use validator\n\nbenefits:\n\n- with thousand separator (1,000,000)\n- with  +- button\n- with keyboard support for up and down value with customizable step\n- with preventable negative value.\n- with min \u0026 max value control.\n- support persian numbers.\n- can handle wrong user inputted value ex: 100.00=\u003e100 , 50.=\u003e50\n\n\nDemo: [codepen](https://codepen.io/javadbat/pen/gONgKRw)\n\n## using with JS frameworks\n\nto use this component in **react** see [`jb-number-input/react`](https://github.com/javadbat/jb-number-input/tree/main/react);\n\n## instructions\n\n### install\n\n#### using npm\n\n1- install npm package\n```cmd\nnpm i jb-number-input\n```\n\n2- import module in one of your js in page\n\n```js\nimport 'jb-number-input';\n\n```\n\n3- use component in your html or jsx file like any other html tag\n\n```html\n\u003cjb-number-input label=\"number:\" message=\"subtitle of input box\"\u003e\u003c/jb-number-input\u003e\n```\n#### using cdn\n\n1- add script tag to your html file.\n\n```HTML\n\u003cscript src=\"https://unpkg.com/jb-input/dist/jb-number-input.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/jb-number-input/dist/jb-number-input.umd.js\"\u003e\u003c/script\u003e\n```\n2- use web component like any other html tag whenever you need\n\n```html\n\u003cdiv class=\"some-app-div\"\u003e\n  \u003cjb-number-input label=\"number:\" message=\"subtitle of input box\"\u003e\u003c/jb-number-input\u003e\n\u003c/div\u003e\n```\n### get/set value\n\n```js\n//get value\nconst inputValue = document.getElementByTagName('jb-number-input').value;\n//set value\ndocument.getElementByTagName('jb-number-input').value = \"new string\";\n```\n### Config Number parameters\n\nif you want to control which number user may input, ex: you may want to let user input negative number or add min \u0026 max boundary or limit decimal precision. for doing so you can set number field parameter to jb-number-input.    \n\n```javascript\n  const numberInput = document.getElementByTagName('jb-number-input')\n\n        //how many number you want to + or  - on user press buttons or use arrow keys default is 1\n        numberInput.step=100,\n        // how many decimal input accept default is infinity\n        numberInput.decimalPrecision=2,\n        // what char replaced to input if user paste some illegal value default is '' (empty string)\n        numberInput.invalidNumberReplacement='0',\n        // separate every 3 number with comma like 1000000 =\u003e 1,000,000\n        numberInput.showThousandSeparator = false,\n        // which char we use to separate thousand number\n        numberInput.thousandSeparator =',',\n        //can input accept negative number or not\n        numberInput.acceptNegative=true,\n        // max number value user can input. if user input bigger number it will be set to max\n        numberInput.maxValue= 1000,\n        //min number value user can input. if user input smaller number it will be set to this value.\n        numberInput.minValue = 1,\n        // will show persian number instead of english number in output but original input value remain in english char\n        //if true and user type 123 and see ۱۲۳ but inputtedDom.value will be 123\n        numberInput.showPersianNumber =false,\n```\n\nyou can also set this values by html attributes:\n```html\n\u003cjb-number-input \n  min=\"10\"\n  max=\"100\"\n  step=\"3\"\n  decimal-precision=\"2\"\n  show-persian-number\n  accept-negative\n  thousand-separator=\",\"\n  \u003c!-- or --\u003e\n  thousand-separator\n  \u003c!-- or --\u003e\n  thousand-separator=\"true\"\n  \u003c!-- or --\u003e\n  thousand-separator=\"false\"\n\n/\u003e\n```\n\n\n\n### set custom style\n\nin some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.    \nif you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component.\nsince jb-payment-input use jb-input underneath, read [jb-input](https://github.com/javadbat/jb-input) custom style list.\n\n| variable                                       | description |\n|------------------------------------------------|-------------|\n| --jb-number-input-input-direction              | number input is ltr by default even in rtl page.so you should override it by this variable if you want it rtl or inherit |\n| --jb-number-input-button-width                 | |\n| --jb-number-input-increase-button-bg           | |\n| --jb-number-input-decrease-button-bg           | |\n| --jb-number-input-increase-button-border       | |\n| --jb-number-input-decrease-button-border       | |\n| --jb-number-input-increase-button-border-radius| |\n| --jb-number-input-decrease-button-border-radius| |\n| --jb-number-input-increase-button-color        | |\n| --jb-number-input-decrease-button-color        | |\n| --jb-number-input-increase-button-color-hover  | |\n| --jb-number-input-decrease-button-color-hover  | |\n\n### control Buttons\nyou can add `+` and `-` button into your box element for easier access to change the number with just simple click or touch.\nif you want to add this buttons you just have to set `showControlButton` of component:\n\n```js\ndocument.getElementByTagName('jb-number-input').showControlButton = true //or false\n```\nor you can set `show-control-button` attribute \n```html\n\u003cjb-number-input show-control-button\u003e\n\u003cjb-number-input show-control-button=\"true\"\u003e\n\u003cjb-number-input show-control-button=\"false\"\u003e\n```\nafter that if user click on the `+` or `-` value will increase or decrease base on the step you set in `step` attribute(default is 1).    \nclick on `+` `-` button will call `onChange` event.\n\n## Other Related Docs:\n\n- see [jb-number-input/react](https://github.com/javadbat/jb-number-input/tree/main/react) if you want to use this component in a react app.\n\n- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-number-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-number-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-number-input/lists"}