OTP Input for React

One time passcode Input. Accessible & unstyled.

Headless componentsReact
guilhermerodz/input-otpinput-otp.rodz.devinput-otp

README

OTP Input for React


https://github.com/guilhermerodz/input-otp/assets/10366880/753751f5-eda8-4145-a4b9-7ef51ca5e453

Usage


  1. ```bash
  2. npm install input-otp
  3. ```

Then import the component.

  1. ```diff
  2. +'use client'
  3. +import { OTPInput } from 'input-otp'

  5. function MyForm() {
  6.   return <form>
  7. +   <OTPInput maxLength={6} render={({slots})  => (...)} />
  8.   </form>
  9. }
  10. ```

Default example


The example below uses tailwindcss @shadcn/ui tailwind-merge clsx:

  1. ```tsx
  2. 'use client'
  3. import { OTPInput, SlotProps } from 'input-otp'
  4. <OTPInput
  5.   maxLength={6}
  6.   containerClassName="group flex items-center has-[:disabled]:opacity-30"
  7.   render={({ slots }) => (
  8.     <>
  9.       <div className="flex">
  10.         {slots.slice(0, 3).map((slot, idx) => (
  11.           <Slot key={idx} {...slot} />
  12.         ))}
  13.       </div>

  15.       <FakeDash />

  17.       <div className="flex">
  18.         {slots.slice(3).map((slot, idx) => (
  19.           <Slot key={idx} {...slot} />
  20.         ))}
  21.       </div>
  22.     </>
  23.   )}
  24. />

  26. // Feel free to copy. Uses @shadcn/ui tailwind colors.
  27. function Slot(props: SlotProps) {
  28.   return (
  29.     <div
  30.       className={cn(
  31.         'relative w-10 h-14 text-[2rem]',
  32.         'flex items-center justify-center',
  33.         'transition-all duration-300',
  34.         'border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md',
  35.         'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
  36.         'outline outline-0 outline-accent-foreground/20',
  37.         { 'outline-4 outline-accent-foreground': props.isActive },
  38.       )}
  39.     >
  40.       {props.char !== null && <div>{props.char}</div>}
  41.       {props.hasFakeCaret && <FakeCaret />}
  42.     </div>
  43.   )
  44. }

  46. // You can emulate a fake textbox caret!
  47. function FakeCaret() {
  48.   return (
  49.     <div className="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink">
  50.       <div className="w-px h-8 bg-white" />
  51.     </div>
  52.   )
  53. }

  55. // Inspired by Stripe's MFA input.
  56. function FakeDash() {
  57.   return (
  58.     <div className="flex w-10 justify-center items-center">
  59.       <div className="w-3 h-1 rounded-full bg-border" />
  60.     </div>
  61.   )
  62. }

  64. // tailwind.config.ts for the blinking caret animation.
  65. const config = {
  66.   theme: {
  67.     extend: {
  68.       keyframes: {
  69.         'caret-blink': {
  70.           '0%,70%,100%': { opacity: '1' },
  71.           '20%,50%': { opacity: '0' },
  72.         },
  73.       },
  74.       animation: {
  75.         'caret-blink': 'caret-blink 1.2s ease-out infinite',
  76.       },
  77.     },
  78.   },
  79. }

  81. // Small utility to merge class names.
  82. import { clsx } from 'clsx'
  83. import { twMerge } from 'tailwind-merge'

  85. import type { ClassValue } from 'clsx'

  87. export function cn(...inputs: ClassValue[]) {
  88.   return twMerge(clsx(inputs))
  89. }
  90. ```

How it works


There'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.
This library works by rendering an invisible input as a sibling of the slots, contained by a relatively positioned parent (the container root called _OTPInput_).