Komponents
Components

Components

InputOTP

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

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

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

Usage

Snippet
import { InputOTP } from "@komponents/ui";

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

Props

  • length — digit count (default 6)
  • onComplete — fires when every slot is filled
  • Shared field variants and sizes

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled
  • Controlled value or defaultValue

Accessibility

  • Group role with labeled digit slots
  • Arrow keys move between digits
  • Hidden name input for form submission when provided

PasswordField

Password input with an accessible show and hide toggle.

FileUpload

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

On this page

UsagePropsStatesAccessibility