Pin Input

Entrada de código PIN, OTP ou verificação dígito a dígito.

Uso

<script setup lang="ts">
import { PinInput } from '@halfbyte/maka'
import { ref } from 'vue'

const codigo = ref([])
</script>

<template>
  <PinInput v-model="codigo" label="Código de verificação" :length="6" :otp="true" />
</template>

Exemplos

<!-- padrão -->
<PinInput v-model="val" :length="4" />
<PinInput v-model="val" :length="6" :otp="true" />

<!-- com separador 3-3 -->
<PinInput v-model="val" :length="6" :separator="3" />

<!-- mascarado (PIN) -->
<PinInput v-model="val" :length="4" :mask="true" />

<!-- estados -->
<PinInput v-model="val" :length="4" tone="error" />
<PinInput v-model="val" :length="4" tone="success" />
<PinInput v-model="val" :length="4" :disabled="true" />

<!-- tamanhos -->
<PinInput v-model="val" :length="4" size="sm" />
<PinInput v-model="val" :length="4" size="lg" />

Props

Prop	Tipo	Padrão
modelValue	string[]	—
label	string	—
length	number	4
type	"numeric" | "alphabetic" | "alphanumeric"	"numeric"
mask	boolean	false
otp	boolean	false
size	"sm" | "md" | "lg"	"md"
tone	"default" | "error" | "success"	"default"
separator	number	—
autoFocus	boolean	false
invalid	boolean	false
disabled	boolean	false
placeholder	string	"○"
name	string	—

Events

Evento	Payload	Descrição
update:modelValue	string[]	Emitido ao alterar qualquer dígito
complete	string	Emitido ao preencher todos os dígitos

Notas

• separator: insere um separador visual entre células. Ex: :separator="3" numa entrada de 6 dígitos forma grupos 3–3.
• tone="error" aplica animação de shake ao entrar no estado de erro.
• invalid é mantido por compatibilidade e implica tone="error" automaticamente.