Campo numérico
Colete números com precisão e estilo. De entradas numéricas simples a controles deslizantes interativos com formatação de moeda, o campo Número oferece validação, formatação e uma experiência de usuário excepcional.
Coleta inteligente de números com validação integrada
Perfeito para:
Funcionalidades poderosas para cada caso de uso
🎯 Controle de Validação Preciso
Limites mínimo/máximo
Defina os valores mínimo e máximo permitidos. Evite entradas inválidas antes do envio com a validação integrada do navegador.
Controle do tamanho do passo
Defina os valores de incremento – números inteiros (1), meio passos (0.5) ou decimais precisos (0.01) para moeda.
Exemplos:
- Campo de idade: Mínimo 18, Máximo 100, Etapa 1
- Campo Preço: Mínimo 0, Máximo 10000, Incremento 0.01
- Classificação: Mínimo 1, Máximo 5, Incremento 0.5
💰 Formatação Inteligente de Números
Várias opções de formato:
- Número simples – Entrada numérica simples (123)
- Moeda – Dinheiro com símbolos ($123.00, €123.00, £123.00)
- Porcentagem – Adicionar automaticamente o símbolo % (85%)
- Decimal – Casas decimais fixas (123.45)
Símbolos de moeda personalizados
Aceita qualquer moeda: $, €, £, ¥, ₹ e muito mais – perfeito para formulários internacionais.
Precisão decimal
Controle as casas decimais de 0 a 4 dígitos para cálculos exatos.
Modo de controle deslizante interativo
Seleção visual de números
Transforme entradas numéricas em belos controles deslizantes. Os usuários deslizam para selecionar valores – perfeito para classificações, intervalos e preferências.
Aparência personalizável
- Escolha a cor do controle deslizante para combinar com a sua marca.
- Mostrar/ocultar a exibição do valor atual
- Animações e transições suaves
Ideal para:
- Classificação de satisfação (1-10)
- Faixas orçamentárias (US$ 0 - US$ 5000)
- Seletores de idade
- Níveis de prioridade
- Qualquer seleção de intervalo
🔀 Lógica Condicional
Visibilidade de campo inteligente
Mostre ou oculte este campo numérico com base nos valores de outros campos. Crie formulários dinâmicos que se adaptam à entrada do usuário.
Regras de lógica avançada:
- Lógica AND – Todas as condições devem ser atendidas.
- Lógica OU – Qualquer condição pode desencadear a ação.
- 8 operadores – Igual a, Diferente de, Maior que, Menor que, Contém, Está vazio e mais
Casos de uso:
- Exibir o “Número de convidados” somente quando a caixa de seleção “Trazer convidados?” estiver marcada.
- Exibir a “Faixa orçamentária” quando o tipo de serviço for igual a “Premium”.
- Ocultar o código de desconto quando o valor total do pedido for inferior a US$ 50.
- Exibir opções com restrição de idade quando a idade for maior que 1 ano.
🎨 Personalização completa
- Classes CSS personalizadas
- Modo de campo oculto
- Entradas otimizadas para dispositivos móveis
- Suporte de acessibilidade
- Integração com todos os recursos de formulário
- Tamanho do passo, valor inicial
- Valor mínimo/máximo permitido
- Campo oculto, valor oculto
⚙️ Configuração Inteligente
Valores padrão
Preencha previamente os campos com números iniciais para orientar os usuários ou agilizar o preenchimento.
Texto do espaço reservado
Exiba dicas úteis como "Digite a quantidade" ou "Sua idade" antes que os usuários comecem a digitar.
Texto de ajuda
Adicione descrições para esclarecer quais números devem ser inseridos.
Configuração simples em 3 etapas
Prepare seu campo suspenso em minutos
Adicione o campo numérico
Arraste e solte o campo Número da seção Campos Básicos no seu formulário.
Definir regras de validação
Configure os valores mínimo e máximo, o tamanho do passo e o valor inicial para controlar quais números os usuários podem inserir.
Escolha o formato e o estilo.
Selecione o formato: simples, moeda, porcentagem ou decimal. Opcionalmente, ative o modo de controle deslizante para seleção visual.
🎉 Pronto! Seu campo numérico está configurado com validação e formatação inteligentes.
Aplicações do mundo real
Comércio eletrônico e pedidos
- Seletores de quantidade de produtos
- Filtros de faixa de preço
- Entradas de porcentagem de desconto
- Contagem e totais de itens
Pesquisas e Avaliações
- Pontuação de satisfação (1-10)
- Classificação por estrelas
- Classificação de prioridades
- Escalas de probabilidade
Fitness e saúde
- Rastreamento de peso
- Medidas de altura
- Repetições do exercício
- Calculadoras de IMC
Reservas e agendamentos
- Número de convidados/participantes
- Quantidade de quartos
- Duração em horas/dias
- Tamanho da festa
Formulários de inscrição
- Verificação de idade
- Anos de experiência
- Expectativas salariais
- Faixas de orçamento
Finanças empresariais
- Entradas de receita
- Valores de investimento
- Percentagens de ROI
- Taxas de comissão
Preencha as opções de campo
Configuração básica
- Legenda do campo – O título exibido acima do campo numérico
- Texto de descrição/ajuda – Orientações adicionais para usuários
- Campo obrigatório – Tornar obrigatória a entrada de números
- Texto do espaço reservado – Texto de dica antes que os usuários insiram um número
Configurações de validação
- Valor mínimo permitido – Menor número aceitável
- Valor máximo permitido – Maior número aceitável
- Tamanho do passo – Incrementar valor (1, 0.5, 0.01, etc.)
- Valor inicial – Número padrão pré-preenchido
Formatação número
- Mostrar Formato
- Número simples
- Moeda (com símbolo)
- Porcentagem (%)
- Decimal (casas decimais fixas)
Símbolo de moeda – $, €, £, ¥, ₹ (quando o formato for Moeda)
Casas decimais – 0, 1, 2, 3 ou 4 dígitos (quando o formato for decimal)
Opções do controle deslizante
- Exibir como carrossel – Ativar o modo de controle deslizante interativo
- Cor do controle deslizante – Seletor de cores personalizado para identidade visual
- Exibir número ao lado do controle deslizante – Exibir valor atual
Lógica Condicional
- Ativar condicional Logic – Mostrar/ocultar com base nas condições
Tipo de lógica- Todas as condições devem ser atendidas (E)
- Qualquer condição pode ser satisfeita (OU)
- Regras de Condição
- Show / Hide – Ações a serem tomadas
- Campo – Qual campo verificar
- operador – Igual a, Diferente de, Contém, Maior que, Menor que, Está vazio, Não está vazio
- Valor – Valor de comparação
- Múltiplas Condições – Adicione regras ilimitadas
Opções avançadas
- Modo de campo oculto – Usar como campo oculto com valor predefinido
- Classes CSS personalizadas – Aplicar estilos personalizados
- Atributos de acessibilidade – Rótulos e descrições ARIA
Por que escolher nosso campo numérico?
✅ Preciso – A validação exata de mínimo/máximo impede entradas inválidas.
✅ Flexível – Vários formatos para qualquer caso de uso
✅ visual – O modo deslizante cria interações envolventes
✅ Trading Inteligente – A lógica condicional cria formulários dinâmicos
✅ Amigo do usuário – Mensagens de validação claras orientam os usuários
✅ Professional – Formatação de moeda e porcentagem integrada
✅ Otimizado para celular – Teclados numéricos perfeitos em dispositivos móveis
✅ Totalmente Integrado – Funciona perfeitamente com todos os recursos de formulário
Perguntas frequentes
P: Qual a diferença entre Mínimo/Máximo e validação?
A: As configurações de mínimo/máximo fornecem validação instantânea no nível do navegador. Os usuários não podem enviar números inválidos, tornando os formulários livres de erros e fáceis de usar.
P: Posso usar números decimais?
A: Sim! Defina o valor de "Step" para controlar as casas decimais. Use 0.01 para moedas (preços), 0.1 para uma casa decimal ou qualquer valor personalizado.
P: Como funciona o controle deslizante em dispositivos móveis?
A: Os controles deslizantes são otimizados para toque e funcionam perfeitamente em dispositivos móveis.
P: Posso coletar números negativos?
A: Com certeza! Defina um valor mínimo negativo (por exemplo, Mínimo: -100, Máximo: 100) para permitir números negativos.
P: Quais símbolos de moeda são suportados?
A: Qualquer símbolo! Digite $, €, £, ¥, ₹ ou qualquer símbolo personalizado com até 3 caracteres.
P: Posso usar lógica condicional baseada em comparações numéricas?
A: Sim! Use operadores como “Maior que”, “Menor que” e “Igual a” para criar lógica baseada em valores numéricos.
P: Como faço para criar um campo de porcentagem?
A: Selecione “Porcentagem (%)” como Formato de Exibição. O símbolo % aparece automaticamente e os usuários inserem valores de 0 a 100.
P: Posso alterar a cor do controle deslizante?
A: Sim! Quando o modo deslizante está ativado, você pode escolher qualquer cor usando o seletor de cores.
P: O que acontece se os usuários inserirem números fora do intervalo?
A: A validação do navegador interrompe o envio e exibe uma mensagem de erro como "O valor deve estar entre 1 e 100".
P: Posso usar o campo numérico para cálculos?
A: Sim! Os valores dos campos numéricos funcionam em comparações condicionais e em cálculos no processamento do seu formulário.
P: Qual o grau de precisão que os números decimais podem ter?
A: Você pode definir o número de casas decimais de 0 a 4 dígitos, e os valores de incremento podem ser tão precisos quanto necessário (por exemplo, 0.001).
