react-otp-z

react-otp-z

LIVE EXAMPLE

---

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

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

---

Quick Example

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

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