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.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.