Input OTP

InputKbd

Separate boxes for entering a one-time code.

Verification code

Installation

pnpm add krz-ui

Usage

import { InputOTP } from "krz-ui";
<InputOTP length={6} groups={[3]} onComplete={verify} />

API Reference

PropTypeDescription
lengthnumberNumber of characters. Defaults to 6.
value / defaultValuestringControlled or initial code.
onValueChange / onComplete(value: string) => voidCalled on every change / when all boxes are filled.
type"numeric" | "alphanumeric"Allowed characters. Defaults to numeric.
groupsnumber[]Insert a separator after these positions.
maskbooleanHide the characters.
label / error / disabled / autoFocusReactNode / booleanField text and state.
className / style / ref—All go to the outer element. See Customization.
classNames{ label?, boxes?, slot?, box?, separator?, message? }Extra classes for inner parts.