Input OTP

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPDemo() {
  return (
    <InputOTP maxLength={6} aria-label="Kod weryfikacyjny">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}

"use client"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  REGEXP_ONLY_DIGITS,
} from "@/components/ui/input-otp"

export default function InputOTPDigitsOnly() {
  return (
    <Field className="w-fit">
      <FieldLabel htmlFor="input-otp-pin">PIN karty</FieldLabel>
      <InputOTP
        id="input-otp-pin"
        maxLength={4}
        pattern={REGEXP_ONLY_DIGITS}
        inputMode="numeric"
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
      </InputOTP>
      <FieldDescription>
        Litery i symbole są pomijane podczas wpisywania.
      </FieldDescription>
    </Field>
  )
}

"use client"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
  REGEXP_ONLY_DIGITS_AND_CHARS,
} from "@/components/ui/input-otp"

export default function InputOTPAlphanumeric() {
  return (
    <Field className="w-fit">
      <FieldLabel htmlFor="input-otp-recovery">Kod odzyskiwania</FieldLabel>
      <InputOTP
        id="input-otp-recovery"
        maxLength={8}
        pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
        inputMode="text"
        pasteTransformer={(pasted) => pasted.replaceAll("-", "").toUpperCase()}
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
          <InputOTPSlot index={6} />
          <InputOTPSlot index={7} />
        </InputOTPGroup>
      </InputOTP>
      <FieldDescription>
        Wklej kod, np. 7F2K-9QXA — myślniki zostaną usunięte.
      </FieldDescription>
    </Field>
  )
}

"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  REGEXP_ONLY_DIGITS,
} from "@/components/ui/input-otp"

export default function InputOTPControlled() {
  const [code, setCode] = React.useState("")
  const [status, setStatus] = React.useState<"idle" | "verifying" | "verified">(
    "idle"
  )

  // Stands in for the request that checks the code; cleared on unmount.
  React.useEffect(() => {
    if (status !== "verifying") return
    const timer = setTimeout(() => setStatus("verified"), 1200)
    return () => clearTimeout(timer)
  }, [status])

  return (
    <Field className="w-fit items-center">
      <FieldLabel htmlFor="input-otp-controlled">
        Wpisz 6-cyfrowy kod
      </FieldLabel>
      <InputOTP
        id="input-otp-controlled"
        maxLength={6}
        pattern={REGEXP_ONLY_DIGITS}
        value={code}
        onChange={(value) => {
          setCode(value)
          setStatus("idle")
        }}
        onComplete={() => setStatus("verifying")}
        disabled={status === "verifying"}
      >
        <InputOTPGroup>
          {Array.from({ length: 6 }, (_, index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <FieldDescription aria-live="polite" className="text-center">
        {status === "verifying" && "Weryfikowanie…"}
        {status === "verified" && "Zweryfikowano. Zalogowano pomyślnie."}
        {status === "idle" && "Wysłaliśmy go na adres ada@prfct.dev."}
      </FieldDescription>
      <Button
        variant="link"
        size="sm"
        disabled={status === "verifying"}
        onClick={() => {
          setCode("")
          setStatus("idle")
        }}
      >
        Wyślij kod ponownie
      </Button>
    </Field>
  )
}

"use client"

import * as React from "react"

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPInvalid() {
  const [code, setCode] = React.useState("481209")

  return (
    <Field data-invalid className="w-fit">
      <FieldLabel htmlFor="input-otp-invalid">Kod weryfikacyjny</FieldLabel>
      <InputOTP
        id="input-otp-invalid"
        maxLength={6}
        value={code}
        onChange={setCode}
        aria-invalid
        aria-describedby="input-otp-invalid-error"
      >
        <InputOTPGroup>
          {Array.from({ length: 6 }, (_, index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <FieldError id="input-otp-invalid-error">
        Ten kod wygasł. Poproś o nowy.
      </FieldError>
    </Field>
  )
}