Input
- Angular:
mds-input - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Input permite que o usuário insira e edite textos, números ou dados específicos em um formulário. Ele serve como o principal canal de coleta de informações estruturadas para o sistema.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Rótulos Claros (Labels): Use nomes curtos e diretos em Caixa de Sentença acima do campo. Nunca substitua o rótulo pelo texto de marcação (placeholder).
- Texto de Marcação (Placeholder): Use apenas para exemplificar o formato esperado. Não utilize reticências (…) no final, conforme as diretrizes do sistema.
- Exemplo: ABC-1234 (para placa) ou 00.000-000 (para CEP).
- Mensagens de Erro: Devem ser específicas e indicar como corrigir o problema. Evite tons de culpa.
- Ruim: Você digitou o CPF errado.
- Melhor: CPF inválido. Insira apenas números.
- Máscaras de Campo: Utilize máscaras visuais para dados formatados (datas, telefones, documentos) para reduzir erros de digitação.
- Estados de Foco: O campo deve indicar visualmente quando está ativo para recepção de dados.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo/Vago) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Identificação | Por favor, insira o nome do motorista aqui | Nome do motorista |
| Carga | Qual o peso total da mercadoria? | Peso total (kg) |
| Placeholder | Digite o código do rastreio… | Ex: 123456789 |