3.0 Design System

Forms

Componentes de input para coletar dados do usuário. Cada campo é projetado para superfícies escuras com estados de foco claros e tratamento de erro acessível.

8 Sections · V1.0 · 2026
00

Floating Label

Padrão de input com label flutuante usado no site institucional. A label sobe ao focar ou preencher o campo.

O padrão .floating-field usa placeholder=" " (espaço) para detectar via CSS se o campo está vazio ou preenchido, movendo a label automaticamente.

Text — Vazio
Email — Preenchido
Tel — Máscara (00) 00000-0000
Textarea
Classes CSS necessárias
.floating-field { position: relative; } .floating-input { padding: 1.5rem 1rem 0.5rem; border: 1px solid #2A2A3C; background: #141420; border-radius: 0.75rem; } .floating-input:focus { border-color: #2563EB; } .floating-label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); } .floating-input:focus ~ .floating-label { top: 0.5rem; font-size: 0.6875rem; color: #2563EB; }
01

Text Input

O campo de input fundamental com label, placeholder, texto auxiliar e estados de erro.

Apenas letras, números e underscores.
A senha deve ter pelo menos 8 caracteres.
02

Textarea

Input de texto multi-linha com contagem de caracteres.

42 / 280
03

Select

Dropdown estilizado com indicador chevron.

04

Checkbox & Radio

Controles de seleção estilizados com estados ativos em brand-primary.

Checkboxes
Radio Buttons
05

Toggle / Switch

Toggle animado com transições suaves e estado ativo em brand-primary.

Dark mode

Usar interface escura em todos os lugares

Modo compacto

Reduzir espaçamento em listas

Funcionalidades beta

Requer aprovação de admin

06

File Input

Área de upload drag-and-drop com affordance visual.

Clique para upload ou arraste e solte

SVG, PNG, JPG or WebP (max 4MB)

07

Search Input

Campo de busca com ícone e ação de limpar.

08

Formulário Composto

Um layout de formulário completo combinando múltiplos tipos de input.

Entre em Contato

Retornaremos em até 24 horas.