Input Otp
One-time code input: multiple digit boxes (e.g. 4–6) with auto-focus and paste support
Same BEM classes and behavior as Astro, Svelte, and Vue.
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.
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import InputOtp from '../components/astro/InputOtp.astro';
---
<InputOtp length={6} ariaLabel="One-time code" client:load />
<!-- 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>
<script>
import { InputOtp } from '$lib/rizzo';
</script>
<InputOtp length={6} ariaLabel="One-time code" />
<script setup>
import InputOtp from '@/components/rizzo/InputOtp.vue';
</script>
<template>
<InputOtp :length="6" aria-label="One-time code" />
</template>
import { InputOtp } from './components/react';
<InputOtp length={6} ariaLabel="One-time code" />
Other frameworks: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun