Headless-otp-input NPM

The unstyled, fully customizable, and accessible OTP input component for React.

Installation

npm install headless-otp-input

Usage

"use client";
import { Root, Field } from "headless-otp-input";

function App() {
  return (
    <Root>
      <Field />
      <Field />
      <Field />
      <span>separator</span>
      <Field />
      <Field />
      <Field />
    </Root>
  );
}

Example

The example below uses tailwindcss.

"use client";
import * as OTPInput from "headless-otp-input";

function OTPInputField() {
  return (
    <OTPInput.Field className="border-b-2 outline-none border-pink-400 w-14 text-center text-2xl p-1 hover:border-pink-600 focus:border-pink-800" />
  );
}

function App() {
  return (
    <OTPInput.Root className="flex justify-center items-center gap-4 my-8">
      <OTPInputField />
      <OTPInputField />
      <OTPInputField />
      <OTPInputField />
      <OTPInputField />
      <OTPInputField />
    </OTPInput.Root>
  );
}

API Reference

Root Component

The Root component acts as the container for the individual OTP fields.

Props

Name	Type	Default	Description
defaultValue	`string[]`	`['', ...]` length equals number of fields	(Optional) The default values for each OTP field. Used for uncontrolled components.
blurOnCompleted	`boolean`	`false`	(Optional) If true, the input fields will lose focus once all fields are filled.
autoFocus	`boolean`	`false`	(Optional) If true, the first input field will be focused on mount.
value	`string[]`	`undefined`	(Optional) The values for each OTP field. Used for controlled components.
onChange	`(value: string[]) => void`	`undefined`	(Optional) The callback function that is called when the value changes. Used for controlled components.
onCompleted	`(values: string[]) => void`	`undefined`	(Optional) The callback function that is called when all fields are filled.
transform	`(value: string) => string`	`(value) => value`	(Optional) The function that transforms the value of each field. If returns `""`, the field will ignore the input. For example, `transform={(value) => value.replace(/[^0-9]/g, "")}` will only allow numbers.

Field Component

The Field component represents an individual OTP input field.

Props

All props for Field component are directly passed to the underlying <input> element. It accepts all standard HTML input attributes.

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago