Input OTP

1"use client";2​3import * as React from "react";4import { MinusIcon } from "@phosphor-icons/react/ssr";5​6import { cn } from "@/lib/utils";7​8// A one-time code field, written for the console's look (extrapolated from Figma "Form- Input"): joined 40px slots in9// the field's lilac-gray edge with 8px outer corners, 16px medium ink characters, and the active slot in the purple edge10// with the soft focus ring and a blinking 1px caret. One real input lies over the slots, so typing, deleting, pasting11// a whole code, autofill from SMS and arrow keys all work as in any field. `pattern` limits each character.12const REGEXP_ONLY_DIGITS = "^\\d+$";13const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";14const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";15​16type Slot = { char: string | null; isActive: boolean; hasFakeCaret: boolean };17const InputOTPContext = React.createContext<{ slots: Slot[]; invalid: boolean; disabled: boolean }>({ slots: [], invalid: false, disabled: false });18​19type InputOTPProps = Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "maxLength" | "pattern"> & {20  maxLength: number;21  value?: string;22  defaultValue?: string;23  onChange?: (value: string) => void;24  onComplete?: (value: string) => void;25  /** A regular expression (as a string) each character must match, such as REGEXP_ONLY_DIGITS. */26  pattern?: string;27  containerClassName?: string;28};29​30function InputOTP({ maxLength, value: valueProp, defaultValue = "", onChange, onComplete, pattern, containerClassName, className, children, disabled = false, onFocus, onBlur, onKeyDown, ...props }: InputOTPProps) {31  const [inner, setInner] = React.useState(defaultValue.slice(0, maxLength));32  const value = valueProp ?? inner;33  const input = React.useRef<HTMLInputElement>(null);34  const [focused, setFocused] = React.useState(false);35  const [selection, setSelection] = React.useState<[number, number]>([value.length, value.length]);36  const test = React.useMemo(() => (pattern ? new RegExp(pattern) : null), [pattern]);37​38  const sync = React.useCallback(() => {39    const el = input.current;40    if (el && document.activeElement === el) setSelection([el.selectionStart ?? el.value.length, el.selectionEnd ?? el.value.length]);41  }, []);42  React.useEffect(() => {43    document.addEventListener("selectionchange", sync);44    return () => document.removeEventListener("selectionchange", sync);45  }, [sync]);46​47  const commit = (next: string) => {48    if (valueProp === undefined) setInner(next);49    onChange?.(next);50    if (next.length === maxLength && next !== value) onComplete?.(next);51  };52​53  // A caret at the end, or the last character selected when the code is full, so typing replaces it.54  const placeCaret = (el: HTMLInputElement) => {55    const at = Math.min(el.value.length, maxLength - 1);56    if (el.value.length >= maxLength) el.setSelectionRange(at, maxLength);57    else el.setSelectionRange(el.value.length, el.value.length);58    sync();59  };60​61  const [start, end] = selection;62  const active = focused ? (start === end ? Math.min(start, maxLength - 1) : start) : -1;63  const slots: Slot[] = Array.from({ length: maxLength }, (_, i) => ({64    char: value[i] ?? null,65    isActive: i === active,66    hasFakeCaret: focused && start === end && i === start && !value[i],67  }));68  const invalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";69​70  return (71    <InputOTPContext.Provider value={{ slots, invalid, disabled }}>72      <div data-slot="input-otp" className={cn("relative flex items-center gap-2 has-disabled:opacity-50", containerClassName)}>73        {children}74        <input75          ref={input}76          data-slot="input-otp-input"77          inputMode={pattern === REGEXP_ONLY_DIGITS ? "numeric" : "text"}78          autoComplete="one-time-code"79          spellCheck={false}80          maxLength={maxLength}81          value={value}82          disabled={disabled}83          className={cn("absolute inset-0 size-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed", className)}84          onChange={(e) => {85            const next = e.target.value.replace(/\s/g, "").slice(0, maxLength);86            if (next && test && !test.test(next)) return;87            commit(next);88          }}89          onPaste={(e) => {90            // A pasted code replaces the whole field, cut to length and checked against the pattern.91            const text = e.clipboardData.getData("text").replace(/\s/g, "").slice(0, maxLength);92            if (!text) return;93            e.preventDefault();94            if (test && !test.test(text)) return;95            commit(text);96            requestAnimationFrame(() => input.current && placeCaret(input.current));97          }}98          onFocus={(e) => {99            setFocused(true);100            placeCaret(e.currentTarget);101            onFocus?.(e);102          }}103          onMouseUp={(e) => placeCaret(e.currentTarget)}104          onBlur={(e) => {105            setFocused(false);106            onBlur?.(e);107          }}108          onKeyDown={(e) => {109            onKeyDown?.(e);110            if (e.defaultPrevented) return;111            const el = e.currentTarget;112            const at = el.selectionStart ?? 0;113            // Arrows move one slot and select it, so the next key replaces that character.114            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {115              e.preventDefault();116              const to = Math.max(0, Math.min(e.key === "ArrowLeft" ? at - 1 : at + 1, el.value.length));117              el.setSelectionRange(to, to < el.value.length ? to + 1 : to);118              sync();119            } else if (e.key === "Home" || e.key === "End") {120              e.preventDefault();121              const to = e.key === "Home" ? 0 : el.value.length;122              el.setSelectionRange(to, to);123              sync();124            }125          }}126          {...props}127        />128      </div>129    </InputOTPContext.Provider>130  );131}132​133function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {134  return <div data-slot="input-otp-group" className={cn("flex items-center rounded-control", className)} {...props} />;135}136​137function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & { index: number }) {138  const { slots, invalid } = React.useContext(InputOTPContext);139  const { char, hasFakeCaret, isActive } = slots[index] ?? { char: null, hasFakeCaret: false, isActive: false };140  return (141    <div142      data-slot="input-otp-slot"143      data-active={isActive || undefined}144      aria-invalid={invalid || undefined}145      className={cn(146        "relative -ml-px flex size-10 items-center justify-center border border-line-field bg-surface font-sans text-body-lg leading-none font-medium text-fg transition-[border-color,box-shadow] duration-150 ease-out first:ml-0 first:rounded-l-control last:rounded-r-control aria-invalid:border-danger data-active:z-10 data-active:border-line-brand data-active:shadow-focus aria-invalid:data-active:shadow-none motion-reduce:transition-none",147        className,148      )}149      {...props}150    >151      {char}152      {hasFakeCaret && (153        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">154          <div className="h-5 w-px animate-caret-blink bg-fg" />155        </div>156      )}157    </div>158  );159}160​161function InputOTPSeparator(props: React.ComponentProps<"div">) {162  return (163    <div data-slot="input-otp-separator" role="separator" className="flex items-center text-fg-faint" {...props}>164      <MinusIcon weight="bold" className="size-4" />165    </div>166  );167}168​169export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };