Forms Framework

1. Input

A classe .inp funciona em qualquer input de texto.

Base

Nome completo

E-mail Nunca compartilharemos seu e-mail.

Senha

Número

Estados

Erro E-mail inválido

Sucesso E-mail válido e disponível

Alerta Senha fraca - adicione símbolos

Desabilitado

Somente leitura

Loading

Tamanhos

is-p

Base (padrão)

is-g

2. Input Groups - Prefixos, Sufixos e Addons

Combine ícones, texto e botões colados ao campo.

Ícones

Busca

Senha com toggle

E-mail com ícone

Usuário

Addons - texto e botão colado

URL do site

https://

Preço

R$ BRL

Inscrição na newsletter

Inscrever

Código de desconto

Aplicar

3. Floating Label Framework

Label que flutua para cima ao focar ou preencher. CSS puro via :not(:placeholder-shown).

Nome completo

Endereço de e-mail

CPF ou CNPJ

Documento inválido

Mensagem

Modern Visual Styles The Tentacles

4 variantes estéticas premium que podem ser aplicadas a qualquer componente de formulário (Input, Select, Textarea, Checkbox, Radio, Switch).

Soft Depth (.is-soft): Baseado em Neumorphism sutil, usa sombras internas e externas para um visual tátil e limpo.

Checkbox Switch

Glassmorphism (.is-gls): Efeito de vidro foscado com blur de fundo e bordas translúcidas. Indispensável para temas escuros modernos.

Checkbox Switch

Minimalist (.is-min): Estilo "Underline" inspirado em design mobile e Apple. Foca totalmente no conteúdo com bordas laterais removidas.

Thin Style Radio Line

Solid Filled (.is-fld): Fundos coloridos neutros ideais para zonas de busca ou componentes com alta ênfase visual.

Filled Box Filled Track

4. Select

Dropdown nativo estilizado com chevron SVG customizado.

Estado

Categoria

Erro Campo obrigatório

Desabilitado

is-p

is-g

Multi-select Ctrl+Click para múltiplos

Use a classe .sel para dropdowns nativos estilizados. Suporta os modificadores .is-err, .is-p e .is-g, além do atributo multiple para multiplas escolhas.

5. Textarea

Área de texto redimensionável com contagem de caracteres.

Descrição do produto 0 / 500

Comentário (erro) Mínimo de 20 caracteres

Notas (fixo) Resize desabilitado com .is-fix

6. Checkbox

Checkbox customizado com checkmark CSS. Suporta indeterminate, card e variantes de cor.

Checkboxes customizados com suporte a variantes de cores semânticas (.is-suc, .is-per, etc), modo card (.is-crd) e alinhamento horizontal.

7. Radio

Radio customizado com dot animado por spring. Suporta card variant.

Base

Starter - Grátis Pro - R$ 99/mês Enterprise - Sob consulta Legacy (indisponível)

Card variant - .rdo.is-crd

Cartão de crédito
Visa, Master, Elo, Amex PIX
Aprovação instantânea Boleto bancário
Vence em 3 dias úteis

Radios customizados com animação suave e suporte a modo card (.is-crd). Agrupe-os em uma .rdo-grp para espaçamento automático.

8. Switch / Toggle

Toggle com animação spring no thumb. Tamanhos sm/base/lg e variantes de cor.

Toggles modernos com suporte a labels dinâmicas (.swt-off e .swt-on) e variantes de cores semânticas.

9. Range Slider Framework

Track colorido progressivo, thumb com spring hover e variantes de cor.

Volume - 70%

0%100%

Prioridade - 3

BaixaAlta

Orçamento - R$ 2500

R$ 500R$ 10.000

Risco - 75%

10. File Upload Framework

Drop zone com hover, estado ativo e versão compacta.

Drop zone completa

Arraste arquivos aqui

ou clique para selecionar
PNG, JPG, PDF até 10MB

Selecionar arquivos

Compacto - .fle.is-p

Foto de perfil

Clique para enviar imagem

PNG, JPG até 2MB

Proporção recomendada: 1:1

Anexar documento

Selecionar documento

PDF ou DOCX até 20MB

Drop zone completa com suporte a múltiplos arquivos e drag and drop. Use .is-p para uma versão compacta de upload de fotos ou documentos únicos.

11. Segmented Control Framework

Alternativa ao grupo de radios - visual de botão integrado. HTML puro ou JavaScript.

Controle segmentado ideal para alternar vistas ou filtros rápidos. Suporta múltiplos tamanhos e a variante .is-gst (ghost).

12. Input Number com Steppers

Botões - e + integrados ao campo. JS mínimo para incremento/decremento.

Quantidade

Parcelas

Passageiros

Campos numéricos com incremento e decremento via botões. Utilize a estrutura .fld-num para alinhar os controles.

13. Inputs Especiais

Search com ícone embutido e color picker estilizado.

Busca global

Busca com valor

Cor principal da marca

Formato HEX

Estilos específicos para busca (.inp-srh) com ícone interno e seletor de cores (.inp-cor) customizado.

14. Form Layout

Exemplo completo usando .frm, .frm-row, .frm-fst, .frm-div e .frm-act.

Dados pessoais

Nome

Nome completo

Sobrenome

CPF

E-mail

Endereço

Rua / Logradouro

CEP

Buscar

Cidade

Estado

Complemento

Preferências

Plano

Starter Pro Scale

Notificações

E-mail SMS Push

Observações

Li e aceito os termos de uso e a política de privacidade.

Quick Reference

Classe	Componente
.fld	Wrapper do campo
.fld-lbl	Label
.fld-lbl.is-req	Label com asterisco obrigatório
.fld-hlp	Texto de ajuda
.fld-err	Mensagem de erro (ícone / auto)
.fld-ok	Mensagem de sucesso
.fld-cnt	Contador de caracteres
.fld-grp	Grupo com ícone/addon
.fld-ico-l / .fld-ico-r	Ícone absoluto
.fld-adn	Addon colado (.is-btn = botão)
.fld-flt	Floating label wrapper
.fld-num	Number + steppers
.inp	Input base
.inp.is-err/suc/ale	Estados semânticos
.inp.is-p / .is-g	Tamanhos
.inp.is-ldg	Loading spinner inline
.inp-srh	Input search com lupa
.inp-cor	Color picker

Classe	Componente
.sel	Select nativo estilizado
.txr	Textarea
.txr.is-fix/auto	Resize control
.chk	Checkbox custom
.chk.is-crd	Checkbox card variant
.chk-grp	Grupo vertical
.chk-grp.is-row	Grupo horizontal
.rdo	Radio custom
.rdo.is-crd	Radio card variant
.swt	Switch/Toggle
.swt.is-p / .is-g	Tamanhos do switch
.swt-off / .swt-on	Labels dinâmicas
.rng	Range slider
.fle	File upload drop zone
.fle.is-p	File upload compacto
.seg	Segmented control
.seg.is-fl / .is-gst / .is-p / .is-g	Variantes do seg
.is-soft	Estilo Neumórfico suave
.is-gls	Estilo Glassmorphism (blur)
.is-min	Estilo Minimalista (underline)
.is-fld	Estilo Solid Filled
.frm-row .frm-fst .frm-act	Layout helpers