Input OTP — Vanilla

One-time code input with multiple digit boxes. Add JS for focus move and paste.

Input OTP

Multiple single-character inputs for OTP codes. Classes: input-otp, input-otp__digit. Add JavaScript to move focus on input and to split paste across digits. See Astro component source for reference implementation.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<!-- Rizzo CSS. BEM: input-otp, input-otp__digit. Add JS for focus move and paste (see /docs/vanilla/components/input-otp). -->
<div class="input-otp" role="group" aria-label="One-time code">
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 1 of 6" />
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 2 of 6" />
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 3 of 6" />
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 4 of 6" />
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 5 of 6" />
  <input type="text" inputmode="numeric" maxlength="1" class="input-otp__digit" aria-label="Digit 6 of 6" />
</div>

Other frameworks: Astro · Svelte · Vue · React