Components/Inputs/PinInput

PinInput

Inputs

Multi-cell OTP / PIN entry with automatic focus advancement.

Renders length individual input boxes that auto-advance focus on character entry. Supports numeric or alphanumeric input, masking for sensitive values, and paste-to-fill.

Usage

import { PinInput } from "nosible-ux"

export default function Example() {
  return <PinInput length={6} label="Verification code" onComplete={(v) => console.log(v)} />
}

Examples

OTP entry

One-time code

Masked PIN

API PIN

Accessibility

Each box is a text input with inputMode="numeric" (or text for alphanumeric). Arrow keys navigate between boxes. Paste fills from the current box onward.

Props

Name	Type	Default	Description
`defaultValue`	`string \| undefined`	—	Uncontrolled initial value.
`disabled`	`boolean \| undefined`	—
`error`	`string \| undefined`	—	Validation error text.
`label`	`string \| undefined`	—	Label rendered ALL-CAPS in Space Mono above the input group.
`length`	`number \| undefined`	`6`	Number of digit/character boxes.
`mask`	`boolean \| undefined`	`false`	When true, renders bullets instead of the typed character (like a password).
`onChange`	`((value: string) => void) \| undefined`	—	Called with the full current string on every change.
`onComplete`	`((value: string) => void) \| undefined`	—	Called with the complete code when all boxes are filled.
`placeholder`	`string \| undefined`	`"○"`	Placeholder character shown inside each empty box.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual size.
`type`	`"number" \| "alphanumeric" \| undefined`	`"alphanumeric"`	Input type constraint.
`value`	`string \| undefined`	—	Controlled value string (length ≤ `length`).

← All Components Getting Started →