Padrões
Formulários
Rótulo de máquina em cima, controle com a mesma altura do botão, dica embaixo. Erro diz o que fazer.
Na prática#
Falta o domínio. Ex.: nome@empresa.com
Visível só para a equipe.
Rótulo em cima, erro que diz o que fazer
Regras#
- 01Rótulo sempre visível (hb-label). Placeholder é exemplo, não rótulo.
- 02Tamanho do campo acompanha o botão ao lado: sm 32, md 40, lg 48.
- 03Erro liga aria-invalid e aria-describedby, com ícone e instrução: "Falta o domínio. Ex.: nome@empresa.com".
- 04Campos relacionados em grade de 2 colunas a partir de md; texto longo ocupa a linha.
- 05Ação principal à direita no rodapé; no celular, empilhada com a principal por baixo.
Evite#
- Erro só em cor.
- Validar a cada tecla antes de a pessoa terminar.
- Rótulo flutuante dentro do campo.
Peças usadas#
Button
Button
Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.
Input
Input
Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.
Select
Select
Campo nativo. Mesmo anel e a mesma altura do Input, com a seta Graffiti do campo. O menu aberto é o do sistema.
Textarea
Textarea
Campo de várias linhas. Mesmo anel do Input. Mínimo de 96px, cresce na vertical.