Formulários
Formulários têm elementos - ou grupos de elementos - que permitem incluir informações ou configuração de opções.
Exigem tempo das pessoas usuárias, por isso é recomendado que sejam o mais breve possível. Antes de pedir uma informação, entenda se ela é realmente necessária e se aquele é o melhor momento.
Labels
Labels, ou rótulos, são informações que ajudam na compreensão da informação. Se o rótulo não for usado, avise qual tipo de informação é esperada naquele espaço através do placeholder, oferecendo assim mais clareza ao formulário.
É possível usar os rótulos em Inputs, Selects e para listar itens com Checkbox ou Radio Buttons.
Grid e espaçamentos
Sempre que possível, procure posicionar os formulários horizontalmente, usando o grid como elemento de apoio. Não há uma regra de tamanho mínimo ou máximo definido, leve em consideração qual será a melhor experiência oferecida.
Grid
Espaçamento
Input + Botão
Se for necessário, pode ser aplicado um botão ao lado do campo de Input. É preciso garantir que estejam alinhados e que o espaçamento entre eles use o --size-spacing-03 de espaçamento.
Posicionamento de botões
Formulários com aplicações entre o botão primário e secundário têm algumas regras de uso:
Alinhados a direita
É o alinhamento padrão dos botões em formulários. São exibidos sempre no fim do formulário e na ordem de botão secundário e botão primário.
Alinhados a esquerda
Pode ser usado em casos excepcionais. Para usar essa opção, a ordem de apresentação dos botões deve ser sempre o botão primário antes e o secundário depois.
Campos obrigatórios
Sempre devem ser acompanhados por um asterisco (*) vermelho ao lado do rótulo do campo. Quando todos os elementos da tela forem obrigatórios, não é necessário usar asterisco.
Validação
Campo com erro
O aviso de erro do campo deve acontecer através do destaque desse campo e de uma mensagem de feedback logo abaixo (helper), para ajudar na resolução.
É importante que a mensagem de erro indique o que está errado e como solucionar. Se possível, antecipe o erro e dê dicas de preenchimento no próprio helper.
Para verificar os padrões de mensagem de feedback, acesse o guia de Estilo de Escrita neste documento.
O estado de "erro" deve permanecer até que a informação seja corrigida para, então, voltar ao estado default do campo.
Campo padrão
Campo inválido
Campo válido (no estilo padrão)
Campo com sucesso
Em casos específicos, onde a informação fornecida precisa de validação externa, é possível usar um ícone de checkmark e helpers adequados às etapas do processo.