Form

Para garantir a consistência de acessibilidade e usabilidade em todas as interações com formulários, o design system inclui padronização de elementos como campos de entrada (input field), seletores e validações de erro. Além disso, enfatiza-se a importância de práticas de acessibilidade, como rótulos claros e mensagens de erro informativas, para garantir que os formulários sejam compreensíveis e utilizáveis por todos os usuários.

Input field solid

O campo de preenchimento de dados padrão é o solido. O campo compreende um contorno de 1px e um border radius de 6px em todos os cantos. Ao clicar no campo (focus), um preenchimento verde opaco é ativado assim como um contorno na cor primária com um leve drop shadow. O texto que o usuário imputar é na cor preta. O estado disabled (desabilitado) reduz a opacidade para 30%. O estado negativo (erro), preenche o campo e o label na cor vermelha.

normal

label solid (com ícones)

account_circle

error

Helper (texto de ajuda/aviso)

label solid (sem ícones)

Helper (texto de ajuda/aviso)

focus

label solid (com ícones)

account_circle

error

Helper (texto de ajuda/aviso)

label solid (sem ícones)

Helper (texto de ajuda/aviso)

digitando

label solid (com ícones)

account_circle

error

Helper (texto de ajuda/aviso)

label solid (sem ícones)

Helper (texto de ajuda/aviso)

disabled

label solid (com ícones)

account_circle

error

Helper (texto de ajuda/aviso)

label solid (sem ícones)

Helper (texto de ajuda/aviso)

negativo

warning

Verifique os dados nos campos em destaque.

label solid (com ícones)

account_circle

error

Helper (texto de ajuda/aviso)

warning

Verifique os dados nos campos em destaque.

label solid (sem ícones)

Helper (texto de ajuda/aviso)

Input field outlined (contorno)

O campo de estilo outlined compreende apenas um contorno inferior de 1px. Ao clicar no campo (focus), o contorno inferior ganha destaque na cor primária de marca (verde) sem drop shadow. O texto que o usuário imputar é na cor verde (também primária de marca). O estado disabled (desabilitado) reduz a opacidade para 30%. O estado negativo (erro), preenche o campo e o label na cor vermelha.

normal

label outlined (com ícone)

rocket_launch

error

Helper (texto de ajuda/aviso)

label outlined (sem ícones)

Helper (texto de ajuda/aviso)

focus

label outlined (com ícone)

rocket_launch

error

Helper (texto de ajuda/aviso)

label outlined (sem ícones)

Helper (texto de ajuda/aviso)

digitando

label outlined (com ícone)

rocket_launch

error

Helper (texto de ajuda/aviso)

label outlined (sem ícones)

Helper (texto de ajuda/aviso)

disabled

label outlined (com ícone)

rocket_launch

error

Helper (texto de ajuda/aviso)

label outlined (sem ícones)

Helper (texto de ajuda/aviso)

negativo

warning

Verifique os dados nos campos em destaque.

label outlined (com ícone)

rocket_launch

error

Helper (texto de ajuda/aviso)

warning

Verifique os dados nos campos em destaque.

label outlined (sem ícones)

Helper (texto de ajuda/aviso)