Vitral 0.2
Formulário

InputOtp

Uma caixa por caractere de um código de uso único, que avança enquanto você digita e se preenche de uma vez com colagem ou preenchimento automático.

Testado com WAI-ARIA

Importação

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

Básico

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>

Mascarado

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

Tamanhos e estados

<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

Lido de packages/vue/src/components/InputOtp/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
lengthnumberQuantos caracteres o código tem. O padrão é 4.
integerOnlybooleanAceita só dígitos e pede o teclado numérico.
maskbooleanOculta os caracteres como uma caixa de senha.
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: { originalEvent: Event; value: string }—
completeevent: { originalEvent: Event; value: string }Todas as caixas têm um caractere.
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
default(props: { index: numberSubstitui uma caixa. Os eventos a conectam; `attrs` leva seu nome e estado.
valuestring—
attrsRecord<string, unknown>—
events{ input: (event: Event) => void; keydown: (event: KeyboardEvent) => void; paste: (event: ClipboardEvent) => void; focus: (event: FocusEvent) => void }—

Usado nestes templates