Docs›Componentes (Admin)›mad-otp-field
Componentes (Admin)

mad-otp-field

Inputs separados para OTP/PIN/serial com auto-focus.

Campo de entrada para codigos de verificacao (OTP), PINs e chaves de licenca. Inputs individuais com auto-focus, paste, navegacao por teclado.

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio)
label string '' Label do campo
width string '' Largura fixa do campo (CSS)
max-width string '' Largura maxima do campo (CSS)
length int 6 Numero de inputs
mode string 'numeric' numeric, alpha, alphanumeric
separator int 0 Separador visual a cada N digitos (0 = sem)
private bool false Mascara os caracteres (tipo senha/PIN)
auto-submit bool false Submete o mad-form pai ao completar
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado
attrs string '' Atributos HTML extras

Codigo de verificacao (6 digitos)

<mad-otp-field name="codigo" label="Codigo de verificacao" />

PIN mascarado (4 digitos)

<mad-otp-field name="pin" label="PIN" length="4" private />

Chave de licenca alfanumerica com separador

<mad-otp-field name="licenca" label="Chave de licenca"
    length="9" mode="alphanumeric" separator="3" />

Auto-submit ao completar

<mad-otp-field name="otp" label="OTP" auto-submit />

Com callback PHP ao completar

<mad-otp-field name="codigo" label="Codigo"
    mad:change="onVerificar" />

public function onVerificar(string $codigo): MadResponse
{
    if ($codigo === '123456') {
        return (new MadResponse())
            ->toast('Codigo valido!', 'success')
            ->closeDrawer();
    }
    return MadMessage::error('Erro', 'Codigo invalido');
}

Dentro de formulario

<mad-form submit="onVerificar">
    <mad-otp-field name="codigo" label="Codigo de verificacao" required />
    <mad-btn type="submit" variant="primary" icon="check">Verificar</mad-btn>
</mad-form>

Modos

Modo Aceita Uso
numeric 0-9 OTP, PIN, codigo SMS
alpha A-Z (auto uppercase) Codigos alfabeticos
alphanumeric A-Z + 0-9 Chave de licenca, serial

Comportamento

  • Auto-focus: ao digitar, foco avanca para o proximo input
  • Backspace: apaga e volta o foco para o anterior
  • Paste: distribui caracteres validos entre os inputs
  • Arrow keys: navega entre inputs
  • Filtro: rejeita caracteres fora do modo selecionado
  • Auto uppercase: modo alpha/alphanumeric converte para maiuscula
  • autocomplete="one-time-code": no primeiro input para autofill de SMS
  • Hidden input: valor concatenado com mad:model para integracao com MadForm

NUNCA fazer

{{-- ERRADO: montar inputs OTP manualmente --}}
<div style="display:flex;gap:8px;">
    <input type="text" maxlength="1" style="width:48px;text-align:center;">
    <input type="text" maxlength="1" style="width:48px;text-align:center;">
    <input type="text" maxlength="1" style="width:48px;text-align:center;">
</div>

{{-- CERTO --}}
<mad-otp-field name="codigo" label="Codigo" length="3" />

{{-- ERRADO: usar input normal para codigo de verificacao --}}
<mad-input-field name="codigo" label="Codigo" maxlength="6" />

{{-- CERTO --}}
<mad-otp-field name="codigo" label="Codigo" />