OTP Field

A one-time password input composed of individual character slots. Each cell matches Input: no border, a color wash, and a lightness shift on hover and focus. The separator is a 1px accent rule. Cells are Regular.

Verification code

Enter the 6-character code we sent to your device.

Anatomy

<UiOtpFieldRoot :length="6">
  <UiOtpFieldInput />
  <UiOtpFieldInput />
  <UiOtpFieldInput />
  <UiOtpFieldInput />
  <UiOtpFieldInput />
  <UiOtpFieldInput />
</UiOtpFieldRoot>

Parts

Root — length is required. validationType defaults to numeric. value / defaultValue. Emits complete when every slot is filled. Paste fills from the start.
Input — one character. Auto-advances. Backspace moves to the previous slot. The first input uses the root id for the label.
Separator — an optional rule between groups of slots.

Give the remaining inputs an accessible name; the primitive adds aria-label="Character n of length" after the first.