Toolbars, labels e placeholders

Esta seção possui recomendações para a criação de textos para componentes específicos do layout.

Vamos conferir? 🤝

---

Toolbars

Os textos de toolbar (barra/menu de ferramentas) devem explicar claramente funções principais de ações rápidas. Opte, sempre que possível, por uma ou duas palavras para esse tipo de label.

• Use termos objetivos: Compartilhar, Enviar letra, Comentar, Salvar, Aplicar alterações.

• Evite frases longas ou termos técnicos, como Ferramenta para explorar músicas ou Exercícios completos de inglês.

• Os textos de menus devem ser autoexplicativos!

Cuidado: a criatividade excessiva ou termos muito longos, como Área de gerenciamento pessoal, é um risco à compreensão da mensagem.

---

Labels e placeholders

Tanto as labels quanto os placeholders são aplicações de textos em formulários para orientar o preenchimento.

As labels são espécies de etiquetas para campos de formulários. Já os placeholders são os chamados textos de exemplo que aparecem em campos de input onde o usuário precisa adicionar uma informação, sendo usados de exemplo de como a informação deve ser inserida.

Uma boa forma de diferenciar pensar é que as labels indicam a informação e os placeholders o formato que elas devem aparecer.

• As labels devem indicar claramente a informação solicitada: Endereço de e-mail, Nome completo.

• As labels devem conter apenas o termo que descreve o campo, sem indicar uma ação.

✓ Data de nascimento.

✕ Digite aqui sua data.

• Evite placeholders que substituam labels permanentes.

• Não utilize placeholders para informações essenciais, já que desaparecem após o clique.

✓ label E-mail e placeholder [email protected].

✕ placeholder: Digite seu e-mail sem label.

💡 Dica: use labels e placeholders complementares para simplificar e acelerar o preenchimento de formulários. Pense nesses textos funcionando em conjunto!

---

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo.