Input OTP — Astro

---
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" />