Components

InputOTP

Segmented one-time code entry with paste and keyboard navigation.

newfree

Install

@hewnui/ui · hewnui

Terminal

npm install @hewnui/ui

Terminal

pnpm add @hewnui/ui

Terminal

yarn add @hewnui/ui

Terminal

bun add @hewnui/ui

Terminal

npx hewnui@latest add input-otp

Compositional OTP control for email codes and short PINs. Digits advance on entry, Backspace retreats, and paste fills the whole code.

Email code

Paste works across all digits.

Backup PIN

That code expired.

TSX

import { InputOTP } from "@hewnui/ui";

<InputOTP label="Email code" length={6} onComplete={(code) => console.log(code)} />

Props for InputOtp from @hewnui/ui/input-otp. Generated from component types — not hand-written.

Prop

Type

PasswordField

Password input with an accessible show and hide toggle.

FileUpload

Drag-and-drop file zone with browse trigger and removable file list.