# react-otp-z

> Accessible, headless & styled React OTP input component with full keyboard, paste, mask, grouping, and animation support.

Latest version **2.1.1** (published 2026-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-otp-z
pnpm add react-otp-z
yarn add react-otp-z
bun add react-otp-z
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2026-01-27 |
| First published | 2023-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 31.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Delpi.Kye |
| Maintainers | delpikye |
| Keywords | react, otp, otp-input, one-time-password, verification-code, pin-input, react-otp, react-otp-input, react-component, react-ui, auth, authentication, security, form-input, styled-components, react-fast-context, headless-ui, otp-ui, sms-code, 2fa, mfa |

## Links

- npm: https://www.npmjs.com/package/react-otp-z
- Repository: https://github.com/delpikye-v/react-otp
- Homepage: https://github.com/delpikye-v/react-otp#readme
- Issues: https://github.com/delpikye-v/react-otp/issues
- npm.io page: https://npm.io/package/react-otp-z

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2026-01-27
- 2.1.0 — 2026-01-27
- 2.0.0 — 2026-01-27
- 1.0.0-np — 2023-02-09

## README

## 🔐 react-otp-z

[![NPM](https://img.shields.io/npm/v/react-otp-z.svg)](https://www.npmjs.com/package/react-otp-z) ![Downloads](https://img.shields.io/npm/dt/react-otp-z.svg)

<a href="https://codesandbox.io/p/sandbox/zr38jd" target="_blank">LIVE EXAMPLE</a>

---

**react-otp-z**: Built for modern authentication flows with full keyboard, paste, mask, grouping, and flexible styling support.

> Headless, accessible, and highly customizable OTP input for React.

---

### 🚀 Why react-otp-z

- Headless logic, easy to style
- Controlled & Uncontrolled support
- Keyboard navigation (Backspace, arrows)
- Auto focus & smart cursor handling
- Paste full OTP (SMS / Email)
- Grouping & separators
- Mask support (`•`, `*`, custom)
- Uppercase transform
- Error state handling
- Border styles: `box` | `bottom`
- Powered by `react-fast-context-z`

---

### 📦 Installation

```bash
npm install react-otp-z
# or
yarn add react-otp-z
```

---

### ⚡ Quick Example

```tsx
import { Otp } from "react-otp-z"

export default function App() {
  return (
    <Otp
      length={6}
      autoFocus
      group={[3, 3]}
      separator="-"
      onComplete={(v) => console.log("OTP:", v)}
    />
  )
}
```

---

### 🧠 Controlled Usage

```tsx
const [otp, setOtp] = useState("")

<Otp
  value={otp}
  onChange={setOtp}
  onComplete={() => submitOtp(otp)}
/>
```

### ⚙️ Props

| Prop             | Type                                        | Default       | Description                                            |
| ---------------- | ------------------------------------------- | ------------- | ------------------------------------------------------ |
| `name`           | `string`                                    | `undefined`   | `name` attribute for form submission.                  |
| `value`          | `string`                                    | `undefined`   | **Controlled** OTP value.                              |
| `defaultValue`   | `string`                                    | `""`          | Initial OTP value for uncontrolled usage.              |
| `length`         | `number`                                    | `6`           | Number of OTP characters.                              |
| `inputMode`      | `'number' \| 'text' \| 'mix'`               | `'number'`    | Allowed character type for OTP input.                  |
| `uppercase`      | `boolean`                                   | `false`       | Automatically converts characters to uppercase.        |
| `autoFocus`      | `boolean`                                   | `false`       | Focuses the first empty input on mount.                |
| `disabled`       | `boolean`                                   | `false`       | Disables the entire OTP input.                         |
| `readOnly`       | `boolean`                                   | `false`       | Makes the OTP input read-only.                         |
| `group`          | `number[]`                                  | `undefined`   | Splits OTP into groups (e.g. `[3, 3]`).                |
| `separator`      | `ReactNode`                                 | `" "`         | Separator between OTP groups.                          |
| `groupSeparator` | `ReactNode \| (index: number) => ReactNode` | `undefined`   | Custom separator per group index.                      |
| `borderStyle`    | `'box' \| 'bottom'`                         | `'box'`       | Input border style (boxed or bottom-only).             |
| `activeColor`    | `string`                                    | Theme default | Border color of the active input.                      |
| `filledColor`    | `string`                                    | Theme default | Border color of filled inputs.                         |
| `errorColor`     | `string`                                    | Theme default | Border color when in error state.                      |
| `mask`           | `boolean \| string`                         | `false`       | Masks input characters (`true` = `•`, or custom char). |
| `error`          | `boolean`                                   | `false`       | Enables error state (with shake animation).            |
| `className`      | `string`                                    | `undefined`   | Custom class for the OTP wrapper.                      |
| `onChange`       | `(value: string) => void`                   | `undefined`   | Fired whenever the OTP value changes.                  |
| `onComplete`     | `(value: string) => void`                   | `undefined`   | Fired **once** when OTP is fully entered.              |

---

### 📜 License

MIT

---
_Source: https://npm.io/package/react-otp-z · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._