react-otp-input-cells

A lightweight, zero-dependency React OTP input component with full TypeScript support.

• Supports numeric, alphabetic, and alphanumeric input
• Auto-focus next cell on type, previous cell on backspace
• Fully customizable styles per cell and container
• Works with both JavaScript and TypeScript projects

Installation

npm install react-otp-input-cells

Usage

TypeScript / TSX

import { OtpInput } from "react-otp-input-cells"

function App() {
  const [otp, setOtp] = useState("")

  return (
    <OtpInput
      cells={6}
      accept="number"
      setValue={setOtp}
    />
  )
}

JavaScript / JSX

import { OtpInput } from "react-otp-input-cells"

function App() {
  const [otp, setOtp] = React.useState("")

  return (
    <OtpInput
      cells={4}
      accept="alphanumeric"
      setValue={(val) => setOtp(val)}
    />
  )
}

CommonJS

const { OtpInput } = require("react-otp-input-cells")

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | setValue | (value: string) => void | required | Called with the full OTP string on every change | | cells | number | 6 | Number of input boxes | | type | "text" \| "password" | "password" | Input type — use "text" to show characters | | accept | "number" \| "char" \| "alphanumeric" | "number" | Restricts which characters are accepted | | containerStyle | React.CSSProperties | — | Styles applied to the wrapper div | | boxStyle | React.CSSProperties | — | Styles applied to each input cell |

Examples

4-digit PIN (visible)

<OtpInput
  cells={4}
  type="text"
  accept="number"
  setValue={(val) => console.log(val)}
/>

6-character alphabetic code

<OtpInput
  cells={6}
  type="text"
  accept="char"
  setValue={(val) => console.log(val)}
/>

Custom styles

<OtpInput
  cells={6}
  accept="number"
  setValue={(val) => console.log(val)}
  containerStyle={{ gap: "16px" }}
  boxStyle={{
    width: "52px",
    height: "52px",
    borderRadius: "8px",
    fontSize: "20px",
    boxShadow: "0 0 0 2px #6366f1",
  }}
/>

Peer Dependencies

| Package | Version | |---------|---------| | react | >=17.0.0 | | react-dom | >=17.0.0 |

License

MIT