Input OTP

A row of real <input> elements sharing one logical value: the concatenated code string. Typing a digit advances focus to the next cell, backspace on an empty cell moves back, and pasting a full code fills every cell at once.

Verification code

Enter the 6-digit code sent to your phone.

Usage

import { useState } from "react";
import { InputOTP } from "@kernelui/react";

function VerifyCode() {
  const [value, setValue] = useState("");

  return (
    <InputOTP
      length={6}
      label="Verification code"
      value={value}
      onValueChange={setValue}
      onComplete={(code) => console.log("submit", code)}
    />
  );
}

Props

Prop	Type	Default
`length`	number	6
`value`	string	—
`defaultValue`	string	—
`onValueChange`	(value: string) => void	—
`onComplete`	(value: string) => void	—
`label`	ReactNode	—
`disabled`	boolean	false

Accessibility

Each cell is a real <input>, grouped in a <fieldset> with a <legend> when a label is given, the same grouping semantics a screen reader user already expects from a set of related inputs.
autoComplete="one-time-code" is a real, standardized autofill hint: browsers and password managers use it specifically to offer one-tap SMS or email code entry, no custom parsing needed.
Every cell is visually unlabeled, so each one carries its own aria-label (for example "Digit 1 of 6") so assistive technology announces position within the code, not just "edit text" six times in a row.
Arrow Left/Right move focus between cells without changing their content, matching expectations from native text fields.