Material Input [sw-matinp]
Input com label flutuante estilo Material Design, com validação e máscara embutidas — um pacote fechado, sem precisar combinar sw-valid + sw-mask manualmente.
1. Variantes de estilo
Aplique a classe no .fld-mat (wrapper).
2. Com ícone .fld-mat-ico
3. Validação com sw-matinp
Adicione sw-matinp no input e use os atributos de validação. O módulo JS cria a label (se não existir), hint e mensagem de erro automaticamente.
4. Máscaras automáticas
Use sw-matinp-mask pra formatação automática enquanto digita.
5. Estados visuais
Normal
Válido .is-ok
Erro .is-err
E-mail inválido.
Com hint
Letras e números, sem espaços.
Desabilitado
Textarea
6. API JavaScript
→ resultado aqui
7. Eventos
Referência
| Atributo/Classe | Descrição |
|---|---|
.fld-mat | Wrapper obrigatório. |
.fld-mat-inp | Input/textarea. |
.fld-mat-lbl | Label flutuante (criada automaticamente). |
.fld-mat-out | Variante outline (contorno, sem preenchimento). |
.fld-mat-fil | Variante filled (preenchida, só borda inferior). |
.fld-mat-sta | Label estática (sempre no topo, sem animação). |
.fld-mat-ico | Com ícone à esquerda (use .fld-mat-ico-el no <i>). |
sw-matinp-label | Texto da label flutuante (criada automaticamente). |
sw-matinp-mask | telefone | cpf | cnpj | cep | data | hora | cartao |
sw-matinp-req / -email / -url / -minlen / -maxlen / -min / -max / -match / -regex | Regras de validação — mesma sintaxe do sw-valid, mas prefixadas com sw-matinp-. |
sw-matinp-msg-* | Mensagem de erro customizada por regra (ex.: sw-matinp-msg-req). |
sw-matinp-hint | Texto de ajuda abaixo do campo. |
sw-matinp-validate | blur (padrão) · input · change |
.is-ok / .is-err | Estados visuais no wrapper. |
sw:matinp:valid / :invalid / :change | Eventos no input. |
el._swMatinp.validate()/.getValue()/.setValue()/.setError()/.clearError()/.reset() | API na instância. |