{"id":14962633,"url":"https://github.com/shubhadip/svelte-otp","last_synced_at":"2025-10-25T00:30:28.552Z","repository":{"id":58556314,"uuid":"532267481","full_name":"shubhadip/svelte-otp","owner":"shubhadip","description":" OTP Input Component for Svelte","archived":false,"fork":false,"pushed_at":"2022-10-03T14:43:31.000Z","size":1205,"stargazers_count":14,"open_issues_count":3,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-05T06:31:35.105Z","etag":null,"topics":["component","javascript","library","masked-inputs","otp","otp-input","otp-verification","otpauth","svelte","svelte3","typescript","vite","vitejs"],"latest_commit_sha":null,"homepage":"","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/shubhadip.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-03T13:25:14.000Z","updated_at":"2024-08-14T16:14:57.000Z","dependencies_parsed_at":"2023-01-19T03:01:03.229Z","dependency_job_id":null,"html_url":"https://github.com/shubhadip/svelte-otp","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fsvelte-otp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fsvelte-otp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fsvelte-otp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fsvelte-otp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhadip","download_url":"https://codeload.github.com/shubhadip/svelte-otp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867388,"owners_count":16555891,"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":["component","javascript","library","masked-inputs","otp","otp-input","otp-verification","otpauth","svelte","svelte3","typescript","vite","vitejs"],"created_at":"2024-09-24T13:30:17.634Z","updated_at":"2025-10-25T00:30:28.157Z","avatar_url":"https://github.com/shubhadip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Svelte Otp\n\n[![Build Status](https://app.travis-ci.com/shubhadip/svelte-otp.svg?branch=main)](https://app.travis-ci.com/shubhadip/svelte-otp)\n\n[![codecov](https://codecov.io/gh/shubhadip/svelte-otp/branch/main/graph/badge.svg?token=P95PBOGESX)](https://codecov.io/gh/shubhadip/svelte-otp)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/01cc3b58-429a-41d5-b1d4-f96641a3245f/deploy-status)](https://app.netlify.com/sites/svelte-otp/deploys)\n\nA Otp Component that can be used with Svelte.\n\n# Install\n``` bash\nnpm install svelte-otp --save\n\nyarn add svelte-otp\n```\n\n- [Demo](#demo)\n- [Usage](#usage)\n- [Props](#available-props)\n- [Events](#events)\n\n## Demo\n\nTo view a demo online: \u003chttps://svelte-otp.netlify.app/\u003e\n\nTo view demo examples locally clone the repo and run `npm install \u0026\u0026 npm run dev`\n\n``` javascript\nimport OtpInput from 'svelte-otp';\n\n// main\n\u003cOtpInput\n    separator=\"-\"\n    placeholder=\"0000\"\n    ...\n/\u003e\n```\n\n## Usage\n\n``` html\n\u003cOtpInput\n\t\tseparator=\"-\"\n\t\tplaceholder=\"0000\"\n        ...\n\t/\u003e\n```\n\n***numberOfInputs* prop**\n\n``` html\n    \u003cOtpInput numberOfInputs={6} /\u003e\n```\n***numberOfInputs* along with *separator*prop**\n``` html\n\u003cOtpInput numberOfInputs={4} separator=\"-\"  /\u003e\n```\n**Using *numberOfInputs*, *separator* and *placeholder* props**\n``` html\n\u003cOtpInput separator=\"-\" placeholder=\"******\" numberOfInputs={6}  /\u003e\n```\n**Masking Input**\n``` html\n\u003cOtpInput separator=\"-\" placeholder=\"****\" numberOfInputs={4} maskInput={true} /\u003e\n```\n**Change Focus on Input/Delete**\n``` html\n\u003cOtpInput\n\t...\n\tautoFocusNextOnInput={true}\n\tfocusPreviousOnDelete={true}\n/\u003e\n```\n**Programtic Access of value of Otp**\n```html\n    let otpInstance: {getValue: () =\u003e void};\n    function handleClick() {\n        console.log('value on click',\n            otpInstance?.getValue());\n    }\n\t...\n\u003cOtpInput\n\t\t...\n\t\tbind:this={otpInstance}\n\t/\u003e\n```\n\n**Prefill value on some other events/actions**\n``` html\nfunction callbackFunction(event: CustomEvent) {\n    console.log('emittedValue', event.detail);\n}\nfunction handlePrefill() {\n    value = '123456';\n}\n\u003cOtpInput\n\t\t...\n        bind:initialValue={value}\n\t\ton:notify={callbackFunction}\n\t\t...\n\t\temitEventOnPrefill={false}\n\t/\u003e\n\u003cdiv class=\"button-otp\" on:click={handleClick}\u003e Get Value \u003c/div\u003e\n```\n\n**Event on Otp Filled completely**\n``` html\nfunction callbackFunction(event: CustomEvent) {\n    console.log('emittedValue', event.detail);\n}\n\n\u003cOtpInput\n\t\t...\n\t\ton:notify={callbackFunction}\n\t\t...\n\t\temitEventOnPrefill={false}\n\t/\u003e\n```\n\n## Available props\n\n| Prop                          | Type            | Default     | Description                              |\n|-------------------------------|-----------------|-------------|------------------------------------------|\n| numberOfInputs                | Number          |     4       | Number of Inputs to be shown             |\n| separator                     | String          |             | separator between inputs                 |\n| placeholder                   | String          |             | placeholder for text inputs.             |\n| maskInput                     | Boolean         | false       | mask input values                        |\n| autoFocusNextOnInput          | Boolean         | true        | focus on next input after entering value              |\n| focusPreviousOnDelete         | Boolean         | true        | move focus to previous element on delete                   |\n| customWrapperClass            | string          | false       | used to style wrapper element of otp                |\n| customSeparatorClass          | string          |             | used to style separator                   |\n| customRowClass                | string          |           \t| used to style individual input                   |\n| customInputWrapperClass       | string\t      |        \t\t| used to style input wrapper                    |\n| customTextInputClass          | string          |        \t\t| used to style input box                   |\n| emitEventOnPrefill            | string          |        \t\t| emits events on filling all input fields                   |\n\n## Events\n\nOnly emitted event.\n\neventObj = {\n            completevalue: string;\n            isInputComplete: boolean;\n        }\n\n| Event             | Output     | Description                          |\n|-------------------|------------|--------------------------------------|\n| notify            |  eventObj  | Even is emitted when input is complete                 |\n\n## Authors\n[@shubhadip](https://www.github.com/shubhadip)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhadip%2Fsvelte-otp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhadip%2Fsvelte-otp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhadip%2Fsvelte-otp/lists"}