{"id":20927135,"url":"https://github.com/sahil143/mui-otp-input","last_synced_at":"2026-04-21T08:02:15.275Z","repository":{"id":50730165,"uuid":"517378171","full_name":"sahil143/mui-otp-input","owner":"sahil143","description":"A one time password input component based on MUI","archived":false,"fork":false,"pushed_at":"2022-10-14T08:22:34.000Z","size":216,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-26T20:14:21.878Z","etag":null,"topics":["component","mui-otp-input","otp-input","react","react-otp-input","typescript"],"latest_commit_sha":null,"homepage":"","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/sahil143.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}},"created_at":"2022-07-24T16:32:46.000Z","updated_at":"2022-10-14T12:26:27.000Z","dependencies_parsed_at":"2023-01-20T08:48:11.977Z","dependency_job_id":null,"html_url":"https://github.com/sahil143/mui-otp-input","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/sahil143/mui-otp-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahil143%2Fmui-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahil143%2Fmui-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahil143%2Fmui-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahil143%2Fmui-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sahil143","download_url":"https://codeload.github.com/sahil143/mui-otp-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahil143%2Fmui-otp-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32082780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T06:27:27.065Z","status":"ssl_error","status_checked_at":"2026-04-21T06:27:21.250Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["component","mui-otp-input","otp-input","react","react-otp-input","typescript"],"created_at":"2024-11-18T20:46:16.729Z","updated_at":"2026-04-21T08:02:15.256Z","avatar_url":"https://github.com/sahil143.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mui Otp Input\n\n\u003e Component is in development phase\n\nA Simple One Time Password input component based on [Mui](https://github.com/mui/material-ui). \n\n\u003cimg width=\"325\" alt=\"Screenshot 2022-07-24 at 9 31 09 PM\" src=\"https://user-images.githubusercontent.com/9278015/180660211-a100fa24-0514-425e-a943-838b94eeb0f0.png\"\u003e\n\n\n## Usage\n\n[Codesandbox Playground](https://codesandbox.io/s/mui-otp-input-demo-9x25le)\n\n```tsx\nimport { OtpInput } from 'mui-otp-input';\n\nfunction App() {\n  const [value, setValue] = React.useState('');\n\n                                       //123456  // 123-456\n  const handleChange = React.useCallback((value, formattedValue) =\u003e {\n    setValue(value);\n  }, []);\n\n  return (\n    \u003cOtpInput value={value} onChange={handleChange} format=\"___-___\" /\u003e\n  );\n}\n```\n### Props\n\n```tsx\ntype OtpInputProps = {\n  format: OtpInputFormat;\n  value: OtpInputValue;\n  type?: OTPInputType; // default: numeric\n  isSecure?: boolean; // default: false\n  isDisabled?: boolean; // default: false\n  onChange: (\n    value: OtpInputValue,\n    formattedValue: FormattedOtpInputValue\n  ) =\u003e void;\n};\n```\n| Name       | Type                                                                      | Description                                                                                                                                                                       |\n|------------|---------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| format     | string (alias: OtpInputFormat)                                            | Format represents how the input will be rendered with seperators. In format `_` represents an input field ex: `_-_-_-_`. **Note**: `format` must not change in between renders                                                         |\n| value      | string (alias: OtpInputValue)                                             | Value to be filled in each rendered input                                                                                                                                         |\n| type       | 'numeric'/'alphanumeric'                                                  | `numeric` (default): input type will be number and RegExp `/^[0-9]$/` used to validate input. `alphanumeric`: input type will be text and RegExp `/^[a-zA-Z0-9]$/` used to validate input.  |\n| isSecure   | boolean                                                                   | Inputs rendered with type password. Respective RegExp is used based on `type` prop to validate value.                                                                             |\n| isDisabled | boolean                                                                   | To Disable all Inputs                                                                                                                                                             |\n| onChange   | ( value: OtpInputValue, formattedValue: FormattedOtpInputValue ) =\u003e void; | A callback for when the input value changes.                                                                                                                                      |\n\n\n\n## Commands\n\nThis Project has been bootstrapped using [TSDX](https://github.com/jaredpalmer/tsdx)\n\nTSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.\n\nThe recommended workflow is to run TSDX in one terminal:\n\n```bash\nnpm start # or yarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen run the example inside another:\n\n```bash\ncd example\nnpm i # or yarn to install dependencies\nnpm start # or yarn start\n```\n\nThe default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).\n\nTo do a one-off build, use `npm run build` or `yarn build`.\n\nTo run tests, use `npm test` or `yarn test`.\n\n## Configuration\n\nCode quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.\n\n### Jest\n\nJest tests are set up to run with `npm test` or `yarn test`.\n\n### Bundle analysis\n\nCalculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.\n\n### Tests\n\n```\nyarn test\n```\n\nThis library uses [Jest](https://jestjs.io/) and [testing-library](https://testing-library.com/docs/react-testing-library/intro/) for unit tests\n\n### Code Quality\n\n[Eslint](https://eslint.org/) and [Prettier](https://prettier.io/) is used to maintain the code quality\n\n```\nyarn lint\n```\n\nCode quality is set up with `prettier`, `husky`, and `lint-staged`.\n\n## Deploying the Example Playground\n\nThe Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):\n\n```bash\ncd example # if not already in the example folder\nnpm run build # builds to dist\nnetlify deploy # deploy the dist folder\n```\n\nAlternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:\n\n```bash\nnetlify init\n# build command: yarn build \u0026\u0026 cd example \u0026\u0026 yarn \u0026\u0026 yarn build\n# directory to deploy: example/dist\n# pick yes for netlify.toml\n```\n\n## Publishing to NPM\n\nWe recommend using [np](https://github.com/sindresorhus/np).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahil143%2Fmui-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsahil143%2Fmui-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahil143%2Fmui-otp-input/lists"}