Skip to main content

Label

Visão geral#

O componente label tem a função de identificar um campo de entrada de dados e informar às pessoas sobre qual informação precisa ser inserida naquele campo. É sempre usado de forma complementar, ou seja, em conjunto com outros componentes de entrada de dados.

Tipos#

Pensando na modularidade e padronização no uso da label em diferentes componentes, foram previstas duas variações:

  • Label (basic): para uso com um checkbox ou radio, individualmente;
  • Label-field: Rotula os componentes de input e grupos de radio ou checkbox;
Label basic aplicada com checkbox e radio; e Label field rotulando text field e grupo de checkbox

Anatomia#

Estruturalmente, os dois tipos de label possuem o text, que é o rótulo em si. Porém, a versão label-field possui também o required text, para sinalizar a obrigatoriedade do campo. Esse elemento é opcional no componente.

Tipos de label com as partes sinalizadas, sendo 1 text e 2 required text

1. Text

2. Required text (opcional)

O componente é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

Boas práticas#

O componente foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1). Também foi estruturado com base em padrões de usabilidade para contribuir com uma boa experiência. Por isso, ao aplicar esse componente, é muito importante que sejam levados em consideração alguns critérios e práticas:

  • Mantenha a label sempre visível e próxima ao campo ao qual está relacionada. Nunca use o placeholder para substituir a label;
  • Use textos auto-explicativos, com instruções claras e objetivas, para que seja possível identificar com facilidade qual informação precisa ser inserida no campo;
  • Use textos curtos, em geral de 1 a 3 palavras e não inclua qualquer tipo de pontuação;
Campo com rótulo “Email”Fazer

Mantenha os textos curtos e objetivos, e sem pontuações.

Campo com rótulo “Insira neste campo seu email:Não fazer

O excesso de texto na label dificulta o escaneamento dos campos e a pontuação é desnecessária.

  • Sempre que possível, use capitalização no texto, isto é, deixando apenas a primeira letra da frase em maiúsculo. A exceção fica para siglas, marcas e nomes próprios;
  • Não use textos com todas as letras maiúsculas ou todas minúsculas no texto, pois isso prejudica a legibilidade e cria um atrito desnecessário;
Label 'Nome completo' com apenas a primeira letra maiúsculaFazer

Usar capitalização nos textos torna a leitura mais confortável e simples.

Label 'Nome completo' com todas as letras maiúsculasNão fazer

Usar todas das letras maiúsculas ou minúsculas dificulta a leitura do texto.

  • Mantenha todas as labels com o mesmo posicionamento em um formulário. Para componentes como text field e select, que utilizam label-field, é recomendável posicioná-la na parte superior do componente;
  • Para checkbox e radio, posicione o rótulo de cada opção ao lado direito do componente;
  • Sinalize a obrigatoriedade do campo de acordo com o contexto. Quando a maioria dos campos for opcional, indique todos que são obrigatórios. Quando a maioria dos campos for obrigatório, sinalize os campos que são opcionais;
Inputs Nome, CPF e Email, sendo que apenas o email está sinalizado como opcionalFazer

Indique a obrigatoriedade do campo, conforme o contexto, evitando a carga de informação nos campos.

Inputs Nome, CPF e Email, com os dois primeiros marcados como obrigatório.Não fazer

Repetir a informação que é a maioria no formulário gera redundância.