Vitral 0.2
Form

InputOtp

One box per character of a one-time code, that moves along as you type and fills at once from a paste or autofill.

WAI-ARIA tested

Import

main.ts
import { InputOtp } from '@vitral/vue';

Basic

Try pasting 123456.
<script setup lang="ts">import { InputOtp, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const code = ref('');const status = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="otp-code">Verification code</Label>        <InputOtp id="otp-code" v-model="code" :length="6" integer-only @complete="status = `Checking ${$event.value}…`" />        <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ status || 'Try pasting 123456.' }}</small>    </StackPanel></template>

Masked

<script setup lang="ts">import { InputOtp, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const pin = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="otp-pin">PIN</Label>        <InputOtp id="otp-pin" v-model="pin" mask integer-only />    </StackPanel></template>

Sizes and states

<script setup lang="ts">import { InputOtp } from '@vitral/vue';</script> <template>    <InputOtp size="small" aria-label="Small" />    <InputOtp size="large" variant="filled" aria-label="Large, filled" />    <InputOtp invalid aria-label="Invalid" model-value="12" />    <InputOtp disabled aria-label="Disabled" model-value="1234" /></template>

API

Read from packages/vue/src/components/InputOtp/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
lengthnumberHow many characters the code has. Defaults to 4.
integerOnlybooleanAccept digits only, and ask for the numeric keyboard.
maskbooleanHide the characters as a password box does.
sizeSize—
variantInputVariantDefaults to the plugin's `inputVariant`.
invalidboolean—
disabledboolean—
readonlyboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: { originalEvent: Event; value: string }—
completeevent: { originalEvent: Event; value: string }Every box holds a character.
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NameSlot propsDescription
default(props: { index: numberReplaces a box. The events wire it up; `attrs` carries its name and state.
valuestring—
attrsRecord<string, unknown>—
events{ input: (event: Event) => void; keydown: (event: KeyboardEvent) => void; paste: (event: ClipboardEvent) => void; focus: (event: FocusEvent) => void }—

Used in these templates