메인 콘텐츠로 이동

OTP Field

A split input field for entering one-time passwords and verification codes.

Overview

OneTimePasswordField renders a row of individual input slots for entering a one-time password or verification code. Built on input-otp, it supports paste, keyboard navigation, and accessibility out of the box. Use onValueChange to receive the current full value as a string. Use it for verification codes from SMS, email, or authenticator apps. Pair it with a timer or "Resend code" action for a complete verification UX.

Accessibility

  • Built on input-otp with proper ARIA attributes for code input.
  • Auto-focuses the first empty slot on mount for immediate input.
  • Supports paste — users can paste the full code at once, and it distributes across slots.
  • Tab moves focus into and out of the OTP field as a single unit.
  • Arrow keys move between individual slots for correction.

Import

import { OneTimePasswordField } from "@cocso-ui/react";

Default

"use client";

import { OneTimePasswordField } from "@cocso-ui/react";
import { useState } from "react";

export default function OTPDefault() {
  const [value, setValue] = useState("");

  return (
    <div className="p-4">
      <OneTimePasswordField onValueChange={setValue} />
      {value && <p className="mt-2 text-sm text-neutral-500">Value: {value}</p>}
    </div>
  );
}

API Reference

PropTypeDefaultDescription
maxLength*number-The number of OTP input slots to render. Set this to match the expected code length (e.g., 6 for a standard verification code).
valuestring-Controlled input value as a string. Use together with `onValueChange` for full control over the entered code.
onValueChange(value: string) => void-Callback invoked on every keystroke with the current full OTP string. Use to validate or submit when the code is complete.
classNamestring-Class name applied to the outer container element for custom positioning or spacing.
slotClassNamestring-Class name applied to each individual slot element for custom styling (e.g., border, size).