Installation

pnpm dlx kliping@latest add input-otp

Usage

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

<template>
  <InputOTP v-model="value" :maxlength="6">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
      <InputOTPSlot :index="2" />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot :index="3" />
      <InputOTPSlot :index="4" />
      <InputOTPSlot :index="5" />
    </InputOTPGroup>
  </InputOTP>
</template>

Examples

Pola

Pakai prop pattern untuk menentukan pola kustom pada input OTP.

<script setup lang="ts">
import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
// ...
</script>

<template>
  <InputOTP
    maxlength="6"
    :pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
  >
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <!-- ... -->
    </InputOTPGroup>
  </InputOTP>
</template>

Separator

Pakai komponen <InputOTPSeparator /> untuk menyisipkan pemisah di antara kelompok input.

<script setup lang="ts">
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@/components/ui/input-otp'
// ...
</script>

<template>
  <InputOTP maxlength="4">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot :index="2" />
      <InputOTPSlot :index="3" />
    </InputOTPGroup>
  </InputOTP>
</template>

Dikendalikan dari Luar

Pakai direktif v-model untuk mengendalikan nilai input dari luar.

Enter your one-time password.

Form

Komponen InputOTP bisa dipakai di dalam form, misalnya bersama VeeValidate.

One-Time Password

Please enter the one-time password sent to your phone.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3, vue-input-otp@^0.4.0
Files	components/ui/input-otp/input-otp.vue components/ui/input-otp/input-otp-group.vue components/ui/input-otp/input-otp-separator.vue components/ui/input-otp/input-otp-slot.vue components/ui/input-otp/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<InputOTP>
  <InputOTPGroup>
    <InputOTPSlot />
  </InputOTPGroup>
  <InputOTPSeparator />
</InputOTP>

API Reference

InputOTP

Prop	Type	Default	Description
maxlength	number	—	Number of characters in the code; one slot each.
textAlign?	"center" | "right" | "left"	—	Where the caret sits inside the hidden input; matches the slot that looks active.
inputmode?	"numeric" | "text"	—	Mobile keyboard to show: digits only (numeric) or full (text).
containerClass?	string	—	Classes for the wrapper around the slots; set from class by this component.
pushPasswordManagerStrategy?	"increase-width" | "none"	—	Widen the input so password-manager badges do not cover the last slot.
noScriptCssFallback?	string	—	CSS injected in a <noscript> tag so the input stays usable without JavaScript.
pasteTransformer?	((pasted: string) => string)	—	Cleans pasted text before it is checked against pattern, e.g. strips spaces or dashes.
defaultValue?	any	—	The initial value when uncontrolled.
nonce?	string	—	Applied to the injected <style> tag, for a nonce-based style-src CSP.
disabled?	boolean	—	Prevents the user from interacting with it.
name?	string	—	The name submitted with a form.
readonly?	boolean	—	Shows the value without allowing changes.
required?	boolean	—	Marks it as required when submitted in a form.
size?	number	—	The visual size.

Ditambah atribut <input> bawaan, diteruskan ke elemen input: accept, alt, autocomplete, autofocus, capture, checked, crossorigin, enterKeyHint, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, list, max, min, minlength, multiple, pattern, placeholder, spellcheck, src, step, type, value, width.

Event	Payload	Description
@input	[value: string]	Emitted with the current code on every change.
@select	[e: Event]	Native select event: the text selection inside the input changed.
@complete	[value: string]	Emitted with the code once every slot is filled.
@change	[e: Event]	Native change event of the hidden input.
@focus	[e: FocusEvent]	Emitted when the input gains focus.
@blur	[e: FocusEvent]	Emitted when the input loses focus.
@mouseover	[e: MouseEvent]	Emitted when the pointer enters the slots.
@mouseleave	[e: MouseEvent]	Emitted when the pointer leaves the slots.
@paste	[e: ClipboardEvent]	Emitted on paste, before pasteTransformer runs.

Slot	Props
#default	{ slots: SlotProps[]; isFocused: boolean; isHovering: boolean; }

Data attribute	Value
[data-slot]	"input-otp"

InputOTPGroup

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"input-otp-group"

InputOTPSeparator

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"input-otp-separator"

InputOTPSlot

Prop	Type	Default	Description
index	number	—	Zero-based position of the OTP character this slot displays.

Data attribute	Value
[data-slot]	"input-otp-slot"
[data-active]	set at runtime

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --foreground, --input, --radius, --ring.

Changelog

• 19 Okt 2026 · Fixed — Aksesibilitas: nama aksesibel dan peran ARIA yang sah.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.