Material Input Componentes

O que é

Um input mais completo que o .sw-input simples — label some pra dentro do campo quando ele ganha foco/conteúdo, com validação e máscara embutidas.

Como funciona

Injeta a label, a dica e a mensagem de erro automaticamente ao redor do input. A validação roda por regras nomeadas (sw-matinp-req, -email etc.) checadas em ordem — a primeira que falhar define a mensagem mostrada.

Exemplos

<div class="fld-mat">
  <input sw-matinp sw-matinp-label="Nome completo" sw-matinp-req autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>

<div class="fld-mat fld-mat-out">
  <input sw-matinp sw-matinp-label="Contorno completo (fld-mat-out)" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>
<div class="fld-mat fld-mat-fil">
  <input sw-matinp sw-matinp-label="Fundo preenchido (fld-mat-fil)" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>

<div class="fld-mat fld-mat-sta">
  <input sw-matinp sw-matinp-label="Label numa linha própria" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>
<div class="fld-mat fld-mat-ico">
  <i class="swi-mail"></i>
  <input sw-matinp sw-matinp-label="Com ícone à esquerda" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>

<div class="fld-mat">
  <input sw-matinp sw-matinp-label="Telefone" sw-matinp-mask="telefone" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>
<div class="fld-mat">
  <input sw-matinp sw-matinp-label="E-mail" sw-matinp-req sw-matinp-email sw-matinp-msg-email="Digite um e-mail válido" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')">
</div>

const inst = document.querySelector('#meuInput')._swMatinp;

inst.validate()           // → true/false — executa validação
inst.getValue()           // → string com o valor atual
inst.setValue('texto')    // → preenche e valida
inst.setError('msg')      // → exibe erro manual
inst.clearError()         // → limpa estado de erro
inst.reset()               // → limpa campo e estados

const inp = document.querySelector('#email');

inp.addEventListener('sw:matinp:valid',   e => console.log('Válido:', e.detail.value));
inp.addEventListener('sw:matinp:invalid', e => console.log('Inválido:', e.detail.error));
inp.addEventListener('sw:matinp:change',  e => console.log('Mudou:', e.detail.value));

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

• O input precisa estar dentro de um .fld-mat (ou o módulo usa o parentElement como wrapper).

Limitações — o que ele não faz

Nenhuma.