input-otp

OTP input with numeric digits.

OTP input with numeric digits.

Загрузка превью…

src/input-otp/c-input-otp-2.vue

<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp"
</script>

<template>
  <div class="flex items-center justify-center">
    <Field>
      <FieldLabel for="digits-only">Digits Only</FieldLabel>
      <InputOTP id="digits-only">
        <InputOTPGroup>
          <InputOTPSlot :index="0" />
          <InputOTPSlot :index="1" />
          <InputOTPSlot :index="2" />
          <InputOTPSlot :index="3" />
          <InputOTPSlot :index="4" />
          <InputOTPSlot :index="5" />
        </InputOTPGroup>
      </InputOTP>
    </Field>
  </div>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-input-otp-2.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)