Input

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

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

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)

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

Diretrizes de Usabilidade: Campos Obrigatórios e Validação Visual

1. Realce Amarelo em Campos Obrigatórios (Estímulo Pré-atentivo)

Em formulários logísticos complexos e extensos, depender exclusivamente do asterisco (*) gera sobrecarga visual e aumenta o tempo de preenchimento. O uso do realce em tom amarelo nos campos obrigatórios estabelece um guia visual pré-atentivo, permitindo que o usuário identifique de imediato as informações indispensáveis para a conclusão da tarefa. Diretrizes e Benefícios de Usabilidade:

Varredura Rápida: Reduz o custo de interação (Nielsen Norman Group) ao destacar a rota crítica de preenchimento em meio a dezenas de campos opcionais.
Prevenção Proativa de Falhas: Minimiza a ocorrência de erros de submissão ao orientar o operador antes do envio, alinhando-se à heurística de prevenção de erros de Jakob Nielsen.
Semiótica Adequada: Comunica prioridade e atenção sem a conotação punitiva do vermelho, reservado exclusivamente para o estado de erro.
Acessibilidade Combinada: O realce cromático complementa o asterisco () no rótulo e a propriedade aria-required="true", assegurando conformidade com os critérios da WCAG.

2. Borda Destacada em Campos Preenchidos (Confirmação Imediata)

O estado de campo preenchido adota uma borda de maior peso visual para sinalizar a conclusão e validação satisfatória do dado inserido. Benefícios de Usabilidade:

Confirmação Imediata (Heurística de Nielsen): Fornece feedback visual passivo de que o sistema assimilou o dado, sem exigir cliques de checagem.
Diferenciação Visual: Evita confusão entre textos de marcador de posição (placeholders) e informações reais inseridas pelo operador.
Retomada Ágil de Fluxo: Facilita a varredura ocular após interrupções, permitindo ao usuário identificar em segundos onde parou o preenchimento.
Hierarquia Limpa: Cria uma distinção clara entre campos pendentes (borda neutra), campos mandatórios (realce amarelo) e campos concluídos (borda destacada).
Percepção de Progresso: Confere sensação de avanço contínuo na conclusão de formulários complexos

Estados do Campo

[heading_4]

Definição: Estado inicial e interativo do campo antes do foco ou inserção de dados.
Comportamento Visual: Borda neutra e fundo padrão.
Texto: Rótulo em cor neutra; texto de instrução (placeholder) orienta o formato esperado sem o uso de reticências (ex: 000.000.000-00). [heading_4]
Definição: Indica que a edição do campo não está acessível no fluxo atual.
Comportamento Visual: Opacidade reduzida no contêiner, texto e ícones; cursor de bloqueio.
Texto: Deve manter o rótulo visível para leitura. Evite mensagens de ajuda longas neste estado. [heading_4]
Definição: Exibe dados já registrados no sistema que não podem ser alterados pelo operador na etapa atual.
Comportamento Visual: Fundo e texto em tom esmaecido, com valor preenchido visível.
Texto: Apresenta o dado com clareza (ex: Curitiba, PR), sem permitir edição. [heading_4]
Definição: Campo selecionado ativamente para entrada de texto ou interação do teclado.
Comportamento Visual: Borda realçada na cor primária (azul) e exibição do cursor de digitação.
Texto: O rótulo flutua ou ganha destaque cromático na cor de foco da interface. [heading_4]
Definição: Campo completado com dados pelo usuário e já validado pelo sistema.
Comportamento Visual: Borda com peso visual reforçado para confirmar a conclusão satisfatória da inserção de dados.
Texto: Exibe o valor inserido com alto contraste e legibilidade. [heading_4]
Definição: Informação inserida em desacordo com as regras de validação do sistema.
Comportamento Visual: Borda e textos auxiliares em cor de alerta (vermelho).
Texto: A mensagem de apoio deve orientar claramente a resolução do problema em vez de apenas acusar o erro.
- Ruim: Campo inválido.
- Melhor: Informe um CNPJ com 14 dígitos. [heading_4]
Definição: Campo essencial para a submissão do formulário.
Comportamento Visual: Fundo ou contorno em destaque amarelo com asterisco () junto ao rótulo, facilitando a identificação rápida em telas extensas.
Texto: Rótulo acompanhado do caractere (ex: **Razão Social ***). | Estado | Gatilho de Uso | Tratamento Visual | Diretriz Textual | | — | — | — | — | | Normal | Pronto para digitação | Borda neutra | Rótulo claro, sem valor | | Desabilitado | Ação bloqueada | Opacidade reduzida | Rótulo legível, sem foco | | Preenchido e Desabilitado | Leitura de dado fixo | Fundo atenuado com valor | Valor bloqueado para edição | | Com Foco | Campo em edição | Borda na cor primária | Cursor ativo de inserção | | Preenchido | Dado inserido com sucesso | Borda em evidência | Valor visível em alto contraste | | Com Erro | Dado inválido | Borda e suporte em vermelho | Mensagem orientando a correção | | Obrigatório | Preenchimento mandatório | Fundo ou realce amarelo com * | Adiciona * junto ao rótulo |

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<div class="mds-input">
  <div class="mds-input__content ">
    <input class="mds-input__field" id="mds-input-example" type="text" placeholder="Digite algo..." value="undefined"  >
    <label class="mds-input__label" for="mds-input-example">Label do Campo</label>
  </div>
  <div class="helper-text">Informação de ajuda ao usuário.</div>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`placeholder`	—	`Digite algo...`
`value`	—	—
`helperText`	—	`Informação de ajuda ao usuário.`
`type`	`text` `password` `email` `number` `date`	`text`
`variant`	`default` `success` `danger` `warning`	—
`disabled`	`true` · `false`	—
`required`	`true` · `false`	—
`icon`	—	—
`hasButton`	`true` · `false`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.form-check` `.form-check-inline` `.form-check-input` `.form-check-label` `.mds-control-group` `.mds-input`
Elementos	`.mds-btn__icon` `.mds-input__content` `.mds-input__field` `.mds-input__group` `.mds-input__helper` `.mds-input__icon` `.mds-input__label`
Modificadores	`.mds-btn--active` `.mds-btn--emphasis` `.mds-input__number-btn--decrease` `.mds-input__number-btn--increase` `.mds-input--active` `.mds-input--danger` `.mds-input--lg` `.mds-input--md` `.mds-input--required` `.mds-input--sm` `.mds-input--with-step-buttons` `.mds-input--xs`

Angular (mds-angular)

Seletor

mds-input

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`variant`	`MdsInputVariants`	`'default'`	—
`size`	`MdsSizes`	`'md'`	—
`label`	`string`	`''`	—
`icon`	`string \| undefined`	`undefined`	—
`complementoTexto`	`string \| undefined`	`undefined`	—
`complementPosition`	`MdsInputComplementPosition`	`'right'`	—
`type`	`MdsInputTypes`	`'text'`	—
`placeholder`	`string`	`''`	—
`help`	`string`	`''`	—
`autocomplete`	`'on' \| 'off'`	`'on'`	—
`datalistId`	`string \| undefined`	`undefined`	—
`pattern`	`string \| null`	`null`	—
`inputMode`	`MdsInputInputModes`	`''`	—
`customMask`	`string`	`''`	—
`prefix`	`string`	`''`	—
`suffix`	`string`	`''`	—
`separador`	`string`	`''`	—
`precision`	`number`	`2`	—
`limiteMilhar`	`string`	`'99999999'`	—
`zeroIsValid`	`boolean`	`false`	—
`readonly`	`boolean`	`false`	—
`required`	`boolean`	`false`	—
`minLength`	`number \| null`	`null`	—
`maxLength`	`number \| null`	`null`	—
`min`	`number \| null`	`null`	—
`max`	`number \| null`	`null`	—
`step`	`number \| null`	`null`	—
`paddingRight`	`number \| null`	`null`	—
`paddingBottom`	`boolean`	`true`	—
`textAreaRows`	`number`	`2`	—
`msgErrorRequired`	`string`	`'Campo obrigatório'`	—
`msgErrorMaxLength`	`string \| undefined`	`undefined`	—
`msgErrorMinLength`	`string \| undefined`	`undefined`	—
`msgErrorEmail`	`string`	`'E-mail inválido'`	—
`msgErrorMask`	`string`	`'Valor inválido'`	—
`validateCellPhoneNumber`	`boolean`	`false`	—
`showStepButtons`	`boolean`	`false`	—
`autofocus`	`boolean`	`false`	—

Outputs

Output	Payload	Descrição
`onChange`	`unknown`	—
`onKeyUp`	`void`	—
`onFocus`	`void`	—
`onBlur`	`void`	—
`onClick`	`void`	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="input-content"

Visão ao vivo

Input — Figma (Design System 2.0) ↗