Pular para o conteúdo principal

Number Field​

Componente Number Field

📘 Modo de Uso​

cuidado

Atenção: O componente Number Field é uma variação do componente Text Input.
Ele foi criado para situações em que a entrada de dados deve ser estritamente numérica.

O componente Number Field deve ser usado em formulários ou interfaces onde o usuário precise inserir valores numéricos, como quantidades, preços, idades, entre outros.
Ele também possui botões laterais que permitem aumentar ou diminuir o valor de forma incremental, reduzindo o esforço de digitação.

🧩 Anatomia​

Anatomia do componente Number Field

📋 Propriedades​

Propriedades do componente Number Field

⌨️ Código​

opl.input.component.numberField

🎨 Variantes​

Estados​

Variações de estado do componente Number Field

Tamanhos​

Variações de tamanho do componente Number Field

Semântica​

Variações de semântica do componente Number Field

📃 Observações​

  • Deve aceitar apenas valores numéricos.
  • Utilize mensagens claras de erro quando a entrada for inválida ou estiver fora do intervalo esperado.
  • Pode ser configurado com valores mínimos, máximos e incremento definido.

🛡️ Boas Práticas e Acessibilidade​

  • Use labels claras, concisas e exclusivas. WCAG 2.1 – 1.3.1 Informações e Relações.
  • Prefira texto auxiliar para instruções em vez de placeholders. WCAG 2.1 – 3.3.2 Rótulos ou Instruções.
  • Certifique-se de que mensagens de erro ajudem o usuário a corrigir problemas. WCAG 2.1 – 3.3.3 Sugestão de Erro.
  • Indique restrições de formato ou limites numéricos de forma explícita (ex.: “Somente números inteiros entre 1 e 100”).