form · Casa Hacker DS

overview

01

variantes

02

Single column (default)

Forms longos · mais legível, melhor em mobile.

Inline

Forms curtos (login, busca) · economiza espaço vertical.

estados

03

default

success · validado

email válido

warning

senha fraca · considere mais caracteres

erro

formato de email inválido

disabled

campo desabilitado · faça login pra editar

modifiers · api

04

prop	tipo	default	descrição
.form-group	class	—	agrupador label+input+helper
.form-label	class	—	label uppercase mono
.form-label .req	class	—	asterisco obrigatório
.form-helper	class	—	texto auxiliar abaixo
.form-error	class	—	mensagem de erro
.invalid	class no input	—	estado de erro visual

quando usar

05

use

Single column como default
Labels acima dos inputs (não ao lado)
Botão primary à esquerda, ghost à direita
Helper antes do erro, não substituído

não use

Placeholder substituindo label
Mais de 6-8 campos sem agrupar
Validar antes do submit (só se for crítico)
Asterisco vermelho sem indicação textual

acessibilidade

06 · wcag aa

Todo input tem <label for="id">
Required tem required attribute, não só asterisco
Erros associados por aria-describedby
Foco visível em todos os controles
Submit funciona via Enter no input

código

07 · html

<form>
  <div class="form-group">
    <label class="form-label" for="name">nome <span class="req">*</span></label>
    <input class="input" id="name" required>
    <div class="form-helper">ajuda</div>
  </div>
  <button type="submit" class="btn btn--primary">enviar</button>
</form>