headless-otp-input
v1.1.0
Published
The unstyled, fully customizable, and accessible OTP input component for React.
Downloads
28
Readme
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.