\n {slots.slice(0, 3).map((slot, idx) => (\n
\n\n \n {slots.slice(3).map((slot, idx) => (\n
\n \n )}\n/>\n\n// Feel free to copy. Uses @shadcn/ui tailwind colors.\nfunction Slot(props: SlotProps) {\n return (\n \n {props.char ?? props.placeholderChar}\n
\n {props.hasFakeCaret && \n \n
\n )\n}\n\n// Inspired by Stripe's MFA input.\nfunction FakeDash() {\n return (\n \n \n
\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\n
\n\nSupports iOS + Android copy-paste-cut
\n\nhttps://github.com/guilhermerodz/input-otp/assets/10366880/bdbdc96a-23da-4e89-bff8-990e6a1c4c23\n\n\n
\n\nAutomatic OTP code retrieval from transport (e.g SMS)
\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\n
\n\nSupports screen readers (a11y)
\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\n
\n\nSupports all keybindings
\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\n![\"image\"](\"https://github.com/guilhermerodz/input-otp/assets/10366880/9bb306ca-deff-4803-aa3d-148c594a540c\")
\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
\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) => 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) => unknown\n\n // Callback when the input is complete\n onComplete?: (...args: any[]) => 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: Automatically optimizes for password managers
\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\n\n`textAlign=\"center\"`\n
\n\n`textAlign=\"right\"`\n
\n\n\n\n
\n
\n","readmeFilename":"README.md"}