Forms 2.0
Componentes avançados com JavaScript. Select com busca e multi-seleção, validação nativa com feedback em tempo real, floating label + estilos modernos, e file upload drag-and-drop. Use junto com os componentes CSS do Forms Framework ou de forma independente.
1. Select Avançado JS
Dropdown customizado com busca integrada, multi-seleção com tags e acessibilidade.
Wrapper: <div y2select> envolvendo um
<select> nativo.
Base - com busca
Estados - erro e sucesso
Multi-seleção com tags
Evento - ouvindo mudanças
Valor selecionado:
-
2. Input com Estilos Modernos
4 estilos visuais premium - cada um com seu contexto ideal. Aplicáveis a
.inp, .txr, .chk,
.rdo e .swt.
Soft Depth - .is-soft
Configurações
Painel de controle
Notificações
Push e e-mail
Modo escuro
Tema do sistema
2FA ativo
Autenticação dupla
Glassmorphism - .is-gls
Bem-vindo de volta
gabriel@y2.dev
98%
Uptime
2.4k
Usuários
12ms
Latência
Minimalist - .is-min
Apenas a linha inferior - foco no conteúdo, estilo Apple/mobile.
Solid Filled - .is-fld
3. File Upload Framework
Drop zone com hover animado, versão compacta e preview de progresso.
Drop zone completa
PNG, JPG, PDF, DOC, ZIP - até 50 MB por arquivo
Nenhum arquivo selecionado.
Compacto - .fle.is-p
4. Validação - Y2Valid JS
Sistema de validação nativo - sem dependências. Adicione atributos
y2valid-* nos campos e o framework gerencia estados e
mensagens.
Live - valida enquanto digita
5. Showcase 2.0 - Form Completo
Combinando [y2select], floating label, estilos modernos,
file upload e validação em um formulário real.
Quick Reference
| Seletor / Atributo | Descrição |
|---|---|
| <div y2select> | Wrapper do select avançado |
| y2select-ph="..." | Placeholder do select |
| y2select-search="false" | Desativa busca interna |
| multiple | Multi-seleção com tags |
| [y2select].is-err | Estado de erro |
| [y2select].is-ok | Estado de sucesso |
| yd:select:change | Evento ao selecionar |
| .inp.is-soft | Estilo Neumórfico |
| .inp.is-gls | Estilo Glassmorphism |
| .inp.is-min | Estilo Minimalista |
| .inp.is-fld | Estilo Solid Filled |
| Seletor / Atributo | Descrição |
|---|---|
| .fle | File upload drop zone |
| .fle.is-p | File upload compacto |
| form[y2valid] | Ativa validação no form |
| y2valid-live="true" | Valida enquanto digita |
| y2valid-req | Campo obrigatório |
| y2valid-email | Formato de e-mail |
| y2valid-url | Formato de URL |
| y2valid-minlen="N" | Mínimo de caracteres |
| y2valid-maxlen="N" | Máximo de caracteres |
| y2valid-min="N" | Valor numérico mínimo |
| y2valid-max="N" | Valor numérico máximo |
| y2valid-match="#id" | Deve coincidir com campo |
| .y2valid-grp | Wrapper do campo validado |
| .y2valid-msg | Container da mensagem |