14Componentes
Quadrado. Foco roxo. Sem pílula nunca.
Input é entrada de dado, não ação. Por isso é quadrado — diferente de botões e badges. Focus ring é halo roxo de 3px com border purple-400.
Form completo
Estados
- Default: border hairline, fundo bg-elev levemente translúcido.
- Focus: border purple-400 + halo de 3px
rgba(116,39,212,0.20). - Disabled: opacity 0.5, cursor not-allowed.
- Error: border error, mensagem em mono 0.7rem abaixo.
Microcopy obrigatória
Sempre acompanhar formulários com microcopy de transparência (em .e-eyebrow-dash): "Sem spam · Cancele quando quiser · LGPD-ready". Sem isso, o formulário quebra o tom de voz da marca.
Snippet · pronto pra colar
HTML · cole no seu projeto
<!-- Form vertical -->
<form class="form-grid" onsubmit="event.preventDefault();">
<div>
<label class="form-label" for="email">Seu e-mail</label>
<input id="email" class="e-input" type="email" placeholder="[email protected]">
</div>
<div>
<label class="form-label" for="msg">O que você está procurando?</label>
<textarea id="msg" class="e-input e-textarea" placeholder="Conte um pouco sobre você..."></textarea>
</div>
</form>
<!-- Form inline (newsletter) -->
<form class="form-row">
<input class="e-input" type="email" placeholder="[email protected]">
<button type="submit" class="e-btn e-btn-primary">Receber →</button>
</form>
<!-- Microcopy obrigatória abaixo do form -->
<span class="e-eyebrow-dash">
<span class="e-dash-line"></span>
<span>Sem spam · Cancele quando quiser · LGPD-ready</span>
</span>