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.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Verification code

Unstyled

Same component — Kernel look stripped. See Platforms.

length

label

disabled

Usage

<InputOTP length={6} label="Verification code" />

<kernel-input-otp length="6" label="Verification code"></kernel-input-otp>

Props

Props for Input Otp.
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.