Number field
Campo numérico com botões de menos e mais. Mantém o valor dentro dos limites, avança pelo teclado e formata como moeda, porcentagem ou unidade.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Coloque dentro de um Field para ganhar um rótulo.
import { NumberField, Field, FieldLabel } from "@camaleo/react";Anatomia
Uma caixa com três partes: o botão de menos, o input e o botão de mais.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Até 4 ingressos por pedido.
Mínimo e máximo
Clique no mais até parar. No max o botão se desativa, e a descrição explica o motivo antes de a pessoa chegar lá.
5 × R$ 24,00 = R$ 120,00 por mês
Total ao vivo
Mude as licenças. value e onValueChange atualizam o preço abaixo, anunciado com aria-live.
Até 50%. Shift + seta pula 25 pontos.
Porcentagem, com passos
O format={{ style: "percent" }} trabalha com frações, então step={0.05} são 5 pontos; o largeStep é o que Shift + seta soma.
Moeda
Passe format e locale e o campo mostra o R$ e os separadores que a pessoa espera, enquanto o valor continua um número.
Com unidade
Um formato unit coloca o "kg" dentro do campo, então o rótulo não precisa dizer e ninguém pensa em libras.
Obrigatório
Digite um número, apague e saia. Dentro de um Field, required e FieldError match="valueMissing" funcionam como em qualquer input.
Botões com nome
Os botões só mostram − e +. O decrementLabel e o incrementLabel dão nome a eles, então traduza junto com a página.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Seu carrinho
R$ 59,90
R$ 42,00
SubtotalR$ 161,80
Reserve sua estadia
Chalé na serra · 31/10 a 03/11
De 2 a 12 anos
Boas práticas
Hóspedes, ingressos, licenças: um clique ou uma seta chega lá mais rápido do que digitar.
CEP, telefone e número de cartão não são quantidades: os botões e os separadores estragam o valor. Use um Input com inputMode="numeric".
"45 min" não deixa dúvida.
45 são minutos, horas ou pessoas? Não faça a pessoa adivinhar.
Props
null quando o campo está vazio.Intl.NumberFormat: moeda, porcentagem, unidade, casas decimais."pt-BR".As outras props da raiz do Base UI passam direto, como smallStep, snapOnStep, allowWheelScrub e onValueCommitted.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio campo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* botões redondos, só no carrinho */
.cart [data-slot="number-field"] {
--cml-number-btn-radius: 999px;
--cml-number-divider: 0;
}Acessibilidade
- O input é uma caixa de texto anunciada como campo numérico (aria-roledescription), com o nome vindo do rótulo do Field.
- Os botões recebem nome pelo decrementLabel e pelo incrementLabel; o padrão é em inglês, então passe os traduzidos.
- No limite, o botão correspondente fica desativado, então ele nunca falha em silêncio.
- Ele usa inputmode="numeric", então o celular abre o teclado numérico; com passo ou format fracionário e min ≥ 0, usa "decimal", que traz a vírgula.