Componentes — 04

Input & Textarea

Campos de texto com três estados, três tamanhos e foco neo-brutalista. A sombra offset 2×2 aparece no foco e some no blur.

04.1

Input — Tamanhos

SM para filtros compactos, MD para formulários padrão, LG para campos de destaque ou buscas principais.

SM · MD · LG
<Input size="sm" placeholder="Buscar..." />
<Input size="md" placeholder="Nome completo" />
<Input size="lg" placeholder="E-mail" />
04.2

Input — Estados

Default
<Input label="Patente" placeholder="Ex.: Sargento" />
Com label e helper text

Digite apenas números

<Input label="CPF" placeholder="000.000.000-00" helperText="Digite apenas números" />
Required
<Input label="Nome de guerra" placeholder="Ex.: Silva" required />
Error

E-mail inválido

<Input inputState="error" label="E-mail" defaultValue="invalido@" helperText="E-mail inválido" required />
Success

Matrícula encontrada

<Input inputState="success" label="Matrícula" defaultValue="12345678" helperText="Matrícula encontrada" />
Disabled
<Input label="Força" defaultValue="Exército Brasileiro" disabled />
04.3

Textarea

Redimensionável verticalmente. Compartilha o mesmo sistema de estados e tamanhos do Input.

Default
<Textarea label="Observações" placeholder="Descreva aqui..." />
Error

Campo obrigatório

<Textarea inputState="error" label="Justificativa" helperText="Campo obrigatório" required />
04.4

Exemplo de Formulário

Composição realista com vários campos.

Formulário de inscrição
04.5

Tokens Usados

border--border-strong / --state-error / --state-success2px solid
background (error)--state-error-pale#f7eaea
background (success)--state-success-palevar(--b-50)
focus shadow--accent / --state-error / --state-success2px 2px 0 {color}
label font--font-mono'JetBrains Mono'
label size--text-xs11px uppercase
helper color (error)--state-error#922020