{"id":13528257,"url":"https://github.com/guilhermerodz/input-otp","last_synced_at":"2025-05-15T00:05:17.874Z","repository":{"id":222403596,"uuid":"757126772","full_name":"guilhermerodz/input-otp","owner":"guilhermerodz","description":"One time passcode Input. Accessible \u0026 unstyled.","archived":false,"fork":false,"pushed_at":"2025-02-21T22:01:34.000Z","size":1884,"stargazers_count":2850,"open_issues_count":17,"forks_count":73,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T23:41:03.444Z","etag":null,"topics":["2fa","input","mfa","otp","otp-verification","react"],"latest_commit_sha":null,"homepage":"https://input-otp.rodz.dev","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/guilhermerodz.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-13T21:21:30.000Z","updated_at":"2025-05-07T22:53:00.000Z","dependencies_parsed_at":"2024-04-23T22:36:38.765Z","dependency_job_id":"6781998d-0657-49de-b6d9-4ece17f311b0","html_url":"https://github.com/guilhermerodz/input-otp","commit_stats":null,"previous_names":["guilhermerodz/otp-input","guilhermerodz/input-otp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Finput-otp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Finput-otp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Finput-otp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermerodz%2Finput-otp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guilhermerodz","download_url":"https://codeload.github.com/guilhermerodz/input-otp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254249199,"owners_count":22039029,"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":["2fa","input","mfa","otp","otp-verification","react"],"created_at":"2024-08-01T06:02:21.844Z","updated_at":"2025-05-15T00:05:17.681Z","avatar_url":"https://github.com/guilhermerodz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# The only accessible \u0026 unstyled \u0026 full featured Input OTP component in the Web.\n\n### OTP Input for React 🔐 by [@guilhermerodz](https://twitter.com/guilherme_rodz)\n\n\u003ch3 align=\"center\"\u003eHero Sponsors 🎖️\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://go.clerk.com/input-otp\" target=\"_blank\"\u003e\n\u003cimg alt=\"Clerk\" src='https://input-otp.rodz.dev/sponsors/clerk-wordmark-white-in-black-bg.svg' width=\"130\" style=\"aspect-ratio: auto;\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://go.resend.com/input-otp\" target=\"_blank\"\u003e\n\u003cimg alt=\"Resend\" src='https://input-otp.rodz.dev/sponsors/resend-wordmark-white-in-black-bg.svg' width=\"130\" style=\"aspect-ratio: auto;\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://evomi.com/?utm_source=github\u0026utm_campaign=otp\" target=\"_blank\"\u003e\n\u003cimg alt=\"Evomi\" src='https://input-otp.rodz.dev/sponsors/evomi-wordmark-white-in-black-bg.svg' width=\"130\" style=\"aspect-ratio: auto;\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/753751f5-eda8-4145-a4b9-7ef51ca5e453\n\n## Usage\n\n```bash\nnpm install input-otp\n```\n\nThen import the component.\n\n```diff\n+'use client'\n+import { OTPInput } from 'input-otp'\n\nfunction MyForm() {\n  return \u003cform\u003e\n+   \u003cOTPInput maxLength={6} render={({slots})  =\u003e (...)} /\u003e\n  \u003c/form\u003e\n}\n```\n\n## Default example\n\nThe example below uses `tailwindcss` `@shadcn/ui` `tailwind-merge` `clsx`:\n\n```tsx\n'use client'\nimport { OTPInput, SlotProps } from 'input-otp'\n\u003cOTPInput\n  maxLength={6}\n  containerClassName=\"group flex items-center has-[:disabled]:opacity-30\"\n  render={({ slots }) =\u003e (\n    \u003c\u003e\n      \u003cdiv className=\"flex\"\u003e\n        {slots.slice(0, 3).map((slot, idx) =\u003e (\n          \u003cSlot key={idx} {...slot} /\u003e\n        ))}\n      \u003c/div\u003e\n\n      \u003cFakeDash /\u003e\n\n      \u003cdiv className=\"flex\"\u003e\n        {slots.slice(3).map((slot, idx) =\u003e (\n          \u003cSlot key={idx} {...slot} /\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/\u003e\n  )}\n/\u003e\n\n// Feel free to copy. Uses @shadcn/ui tailwind colors.\nfunction Slot(props: SlotProps) {\n  return (\n    \u003cdiv\n      className={cn(\n        'relative w-10 h-14 text-[2rem]',\n        'flex items-center justify-center',\n        'transition-all duration-300',\n        'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',\n        'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',\n        'outline outline-0 outline-accent-foreground/20',\n        { 'outline-4 outline-accent-foreground': props.isActive },\n      )}\n    \u003e\n      \u003cdiv className=\"group-has-[input[data-input-otp-placeholder-shown]]:opacity-20\"\u003e\n        {props.char ?? props.placeholderChar}\n      \u003c/div\u003e\n      {props.hasFakeCaret \u0026\u0026 \u003cFakeCaret /\u003e}\n    \u003c/div\u003e\n  )\n}\n\n// You can emulate a fake textbox caret!\nfunction FakeCaret() {\n  return (\n    \u003cdiv className=\"absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink\"\u003e\n      \u003cdiv className=\"w-px h-8 bg-white\" /\u003e\n    \u003c/div\u003e\n  )\n}\n\n// Inspired by Stripe's MFA input.\nfunction FakeDash() {\n  return (\n    \u003cdiv className=\"flex w-10 justify-center items-center\"\u003e\n      \u003cdiv className=\"w-3 h-1 rounded-full bg-border\" /\u003e\n    \u003c/div\u003e\n  )\n}\n\n// tailwind.config.ts for the blinking caret animation.\nconst config = {\n  theme: {\n    extend: {\n      keyframes: {\n        'caret-blink': {\n          '0%,70%,100%': { opacity: '1' },\n          '20%,50%': { opacity: '0' },\n        },\n      },\n      animation: {\n        'caret-blink': 'caret-blink 1.2s ease-out infinite',\n      },\n    },\n  },\n}\n\n// Small utility to merge class names.\nimport { clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport type { ClassValue } from 'clsx'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n```\n\n## How it works\n\nThere's currently no native OTP/2FA/MFA input in HTML, which means people are either going with 1. a simple input design or 2. custom designs like this one.\nThis library works by rendering an invisible input as a sibling of the slots, contained by a `relative`ly positioned parent (the container root called _OTPInput_).\n\n## Features\n\nThis is the most complete OTP input on the web. It's fully featured \n\n\u003cdetails\u003e\n\u003csummary\u003eSupports iOS + Android copy-paste-cut\u003c/summary\u003e\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/bdbdc96a-23da-4e89-bff8-990e6a1c4c23\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAutomatic OTP code retrieval from transport (e.g SMS)\u003c/summary\u003e\n\nBy default, this input uses `autocomplete='one-time-code'` and it works as it's a single input. \n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/5705dac6-9159-443b-9c27-b52e93c60ea8\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSupports screen readers (a11y)\u003c/summary\u003e\n\nStripe was my first inspiration to build this library.\n\nTake a look at Stripe's input. The screen reader does not behave like it normally should on a normal single input.\nThat's because Stripe's solution is to render a 1-digit input with \"clone-divs\" rendering a single char per div.\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/3d127aef-147c-4f28-9f6c-57a357a802d0\n\nSo we're rendering a single input with invisible/transparent colors instead.\nThe screen reader now gets to read it, but there is no appearance. Feel free to build whatever UI you want:\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/718710f0-2198-418c-8fa0-46c05ae5475d\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSupports all keybindings\u003c/summary\u003e\n\nShould be able to support all keybindings of a common text input as it's an input.\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/185985c0-af64-48eb-92f9-2e59be9eb78f\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAutomatically optimizes for password managers\u003c/summary\u003e\n\n\nFor password managers such as LastPass, 1Password, Dashlane or Bitwarden, `input-otp` will automatically detect them in the page and increase input width by ~40px to trick the password manager's browser extension and prevent the badge from rendering to the last/right slot of the input.\n\n\u003cimg width=\"670\" alt=\"image\" src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/9bb306ca-deff-4803-aa3d-148c594a540c\"\u003e\n\n- **This feature is optional and it's enabled by default. You can disable this optimization by adding `pushPasswordManagerStrategy=\"none\"`.**\n- **This feature does not cause visible layout shift.**\n\n### Auto tracks if the input has space in the right side for the badge\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/bf01af88-1f82-463e-adf4-54a737a92f59\n\n\u003c/details\u003e\n\n## API Reference\n\n### OTPInput\n\nThe root container. Define settings for the input via props. Then, use the `render` prop to create the slots.\n\n#### Props\n\n```ts\ntype OTPInputProps = {\n  // The number of slots\n  maxLength: number\n\n  // Render function creating the slots\n  render: (props: RenderProps) =\u003e React.ReactElement\n  // PS: Render prop is mandatory, except in cases\n  // you'd like to consume the original Context API.\n  // (search for Context in this docs)\n\n  // The class name for the root container\n  containerClassName?: string\n\n  // Value state controlling the input\n  value?: string\n  // Setter for the controlled value (or callback for uncontrolled value)\n  onChange?: (newValue: string) =\u003e unknown\n\n  // Callback when the input is complete\n  onComplete?: (...args: any[]) =\u003e unknown\n\n  // Where is the text located within the input\n  // Affects click-holding or long-press behavior\n  // Default: 'left'\n  textAlign?: 'left' | 'center' | 'right'\n\n  // Virtual keyboard appearance on mobile\n  // Default: 'numeric'\n  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'\n\n  // Pro tip: input-otp export some patterns by default such as REGEXP_ONLY_DIGITS which you can import from the same library path\n  // Example: import { REGEXP_ONLY_DIGITS } from 'input-otp';\n  // Then use it as: \u003cOTPInput pattern={REGEXP_ONLY_DIGITS}\u003e\n  pattern?: string\n\n  // While rendering the input slot, you can access both the char and the placeholder, if there's one and it's active.\n  placeholder?: string\n\n  // Transfomer function that allows pasting, for example, \"XXX-XXX\" even though the input's regex/pattern doesn't allow hyphen and its max length is 6.\n  // Example: (pasted) =\u003e pasted.replaceAll('-', '')\n  pasteTransformer?: (pastedText: string) =\u003e string\n\n  // Enabled by default, it's an optional\n  // strategy for detecting Password Managers\n  // in the page and then shifting their\n  // badges to the right side, outside the input.\n  pushPasswordManagerStrategy?:\n    | 'increase-width'\n    | 'none'\n\n  // Enabled by default, it's an optional\n  // fallback for pages without JS.\n  // This is a CSS string. Write your own\n  // rules that will be applied as soon as\n  // \u003cnoscript\u003e is parsed for no-js pages.\n  // Use `null` to disable any no-js fallback (not recommended).\n  // Default: `\n  // [data-input-otp] {\n  //   --nojs-bg: white !important;\n  //   --nojs-fg: black !important;\n  // \n  //   background-color: var(--nojs-bg) !important;\n  //   color: var(--nojs-fg) !important;\n  //   caret-color: var(--nojs-fg) !important;\n  //   letter-spacing: .25em !important;\n  //   text-align: center !important;\n  //   border: 1px solid var(--nojs-fg) !important;\n  //   border-radius: 4px !important;\n  //   width: 100% !important;\n  // }\n  // @media (prefers-color-scheme: dark) {\n  //   [data-input-otp] {\n  //     --nojs-bg: black !important;\n  //     --nojs-fg: white !important;\n  //   }\n  // }`\n  noScriptCSSFallback?: string | null\n}\n```\n\n## Examples\n\n\u003cdetails\u003e\n\u003csummary\u003eAutomatic form submission on OTP completion\u003c/summary\u003e\n\n```tsx\nexport default function Page() {\n  const formRef = useRef\u003cHTMLFormElement\u003e(null)\n  const buttonRef = useRef\u003cHTMLButtonElement\u003e(null)\n\n  return (\n    \u003cform ref={formRef}\u003e\n      \u003cOTPInput\n        // ... automatically submit the form\n        onComplete={() =\u003e formRef.current?.submit()}\n        // ... or focus the button like as you wish\n        onComplete={() =\u003e buttonRef.current?.focus()}\n      /\u003e\n\n      \u003cbutton ref={buttonRef}\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAutomatically focus the input when the page loads\u003c/summary\u003e\n\n```tsx\nexport default function Page() {\n  return (\n    \u003cform ref={formRef}\u003e\n      \u003cOTPInput\n        autoFocus\n        // Pro tip: accepts all common HTML input props...\n      /\u003e\n    \u003c/form\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUsage with react-hook-form\u003c/summary\u003e\nJust use it as a regular text input:\n\n```tsx\nconst { register, handleSubmit } = useForm();\n// Then register it like a text input\n\u003cInputOTP {...register(\"otp\")} /\u003e\n```\n\nYou can also use react-hook-form's Controller if needed:\n```tsx\nconst { control } = useForm();\n// Then control it like a text input\n\u003cController\n  name=\"customOTP\"\n  control={control}\n  defaultValue=\"\"\n  render={({ field }) =\u003e (\n    \u003cOTPInput\n      {...field}\n      label=\"Custom OTP\"\n    /\u003e\n  )}\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePaste-transformers\u003c/summary\u003e\nIf you want to allow pasting of \"XXX-XXX\" even though the input's regex/pattern doesn't allow hyphen and its max length is 6, you can use the `pasteTransformer` prop.\n\n```tsx\n\u003cOTPInput\n  // Transform the pasted text to parse hyphens but remove hyphens,\n  // so it fits into the input's pattern and max length.\n  pasteTransformer={(pasted) =\u003e pasted.replaceAll('-', '')}\n/\u003e\n```\n\u003c/details\u003e\n\n## Caveats\n\n\u003cdetails\u003e\n\u003csummary\u003e[Workaround] If you want to block specific password manager/badges:\u003c/summary\u003e\n\nBy default, `input-otp` handles password managers for you.\nThe password manager badges should be automatically shifted to the right side.\n\nHowever, if you still want to block password managers, please disable the `pushPasswordManagerStrategy` and then manually block each PWM.\n\n```diff\n\u003cOTPInput\n  // First, disable library's built-in strategy\n  // for shifting badges automatically\n- pushPasswordManagerStrategy=\"increase-width\"\n+ pushPasswordManagerStrategy=\"none\"\n  // Then, manually add specifics attributes\n  // your password manager docs\n  // Example: block LastPass\n+ data-lpignore=\"true\" \n  // Example: block 1Password\n+ data-1p-ignore=\"true\"\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e[Setting] If you want to customize the `noscript` CSS fallback\u003c/summary\u003e\n\nBy default, `input-otp` handles cases where JS is not in the page by applying custom CSS styles.\nIf you do not like the fallback design and want to apply it to your own, just pass a prop:\n\n```diff\n// This is the default CSS fallback.\n// Feel free to change it entirely and apply to your design system.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}`\n\n\u003cOTPInput\n  // Pass your own custom styles for when JS is disabled\n+ noScriptCSSFallback={NOSCRIPT_CSS_FALLBACK}\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e[Workaround] If you're experiencing an unwanted border on input focus:\u003c/summary\u003e\n\n```diff\n\u003cOTPInput\n  // Add class to the input itself\n+ className=\"focus-visible:ring-0\"\n  // Not the container\n  containerClassName=\"...\"\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e[Not Recommended] If you want to centralize input text/selection, use the `textAlign` prop:\u003c/summary\u003e\n\n```diff\n\u003cOTPInput\n  // customizable but not recommended\n+ textAlign=\"center\"\n/\u003e\n```\n\nNOTE: this also affects the selected caret position after a touch/click.\n\n`textAlign=\"left\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/685a03df-2b69-4a36-b21c-e453f6098f79\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n`textAlign=\"center\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/e0f15b97-ceb8-40c8-96b7-fa3a8896379f\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n`textAlign=\"right\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/26697579-0e8b-4dad-8b85-3a036102e951\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eIf you want to use Context props:\u003c/summary\u003e\n\n```diff\n+import { OTPInputContext } from 'input-otp'\n\nfunction MyForm() {\n  return (\n    \u003cOTPInput\n-     // First remove the `render` prop\n-     render={...}\n    \u003e\n      \u003cOTPInputWrapper /\u003e\n    \u003c/OTPInput\u003e\n  )\n}\n\n+function OTPInputWrapper() {\n+ const inputContext = React.useContext(OTPInputContext)\n+ return (\n+   \u003c\u003e\n+     {inputContext.slots.map((slot, idx) =\u003e (\n+       \u003cSlot key={idx} {...slot} /\u003e\n+     ))}\n+   \u003c/\u003e\n+ )\n+}\n```\n\nNOTE: this also affects the selected caret position after a touch/click.\n\n`textAlign=\"left\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/685a03df-2b69-4a36-b21c-e453f6098f79\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n`textAlign=\"center\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/e0f15b97-ceb8-40c8-96b7-fa3a8896379f\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n`textAlign=\"right\"`\n\u003cimg src=\"https://github.com/guilhermerodz/input-otp/assets/10366880/26697579-0e8b-4dad-8b85-3a036102e951\" width=\"300\" /\u003e\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e[DX] Add Tailwind autocomplete for `containerClassname` attribute in VS Code.\u003c/summary\u003e\n\nAdd the following setting to your `.vscode/settings.json`:\n```diff\n{\n  \"tailwindCSS.classAttributes\": [\n    \"class\",\n    \"className\",\n+   \".*ClassName\"\n  ]\n}\n```\n\u003c/details\u003e\n\n#### Sponsors\n\n\u003e [Clerk](https://go.clerk.com/input-otp) is the easiest way to add authentication to your application.\n\n\u003e [Resend](https://go.resend.com/input-otp) is email for developers.\n\n\u003e [Evomi](https://evomi.com/?utm_source=github\u0026utm_campaign=otp) offers Residential Proxies starting from $0.49.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermerodz%2Finput-otp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguilhermerodz%2Finput-otp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermerodz%2Finput-otp/lists"}