Campo numérico
Recolle números con precisión e estilo. Desde entradas numéricas sinxelas ata controis deslizantes interactivos con formato de moeda, o campo Número ofrece validación, formato e unha fermosa experiencia de usuario.
Recollida de números intelixentes con validación integrada
Perfecto para:
Funcións potentes para cada caso de uso
🎯 Control de validación preciso
Límites mínimos/máximos
Define os valores permitidos, tanto o mínimo como o máximo. Evita entradas non válidas antes do envío coa validación integrada do navegador.
Control do tamaño do paso
Definir valores de incremento: números enteiros (1), semipasos (0.5) ou decimais precisos (0.01) para a moeda.
Exemplos:
- Campo de idade: Mín. 18, Máx. 100, Paso 1
- Campo de prezo: Mín. 0, Máx. 10000, Paso 0.01
- Clasificación: Mín. 1, Máx. 5, Paso 0.5
💰 Formato intelixente de números
Varias opcións de formato:
- Número simple: entrada numérica simple (123)
- Moeda – Diñeiro con símbolos (123.00 $, 123.00 €, 123.00 £)
- Porcentaxe: símbolo de % engadido automaticamente (85 %)
- Decimal – Decimais fixos (123.45)
Símbolos de moeda personalizados
Admite calquera moeda: $, €, £, ¥, ₹ e moitas máis; perfecto para formularios internacionais.
Precisión decimal
Controla os decimais de 0 a 4 díxitos para realizar cálculos exactos.
Modo deslizante interactivo
Selección visual de números
Transforma as entradas numéricas en fermosos controis deslizantes. Os usuarios deslizan para seleccionar valores: perfecto para cualificacións, rangos e preferencias.
Aspecto personalizable
- Escolle a cor do control deslizante para que coincida coa túa marca
- Mostrar/ocultar a visualización do valor actual
- Animacións e transicións suaves
Ideal para:
- Valoracións de satisfacción (1-10)
- Rangos de orzamento (0 $ - 5000 $)
- Selectores de idade
- Niveis de prioridade
- Calquera selección de rango
🔀 Lóxica condicional
Visibilidade intelixente no campo
Mostra ou oculta este campo numérico segundo os valores doutros campos. Crea formularios dinámicos que se adapten á entrada do usuario.
Regras de lóxica avanzada:
- Lóxica E: deben cumprirse todas as condicións
- OU Lóxica: calquera condición pode desencadear a acción
- 8 operadores: Igual a, Non igual a, Maior que, Menor que, Contén, Está baleiro e máis
Casos de uso:
- Mostrar "Número de convidados" só cando a caixa de verificación "Traer convidados?" estea marcada
- Mostrar "Rango de orzamento" cando o tipo de servizo sexa igual a "Premium"
- Ocultar o "código de desconto" cando o total do pedido sexa inferior a 50 $
- Mostrar opcións con restrición de idade cando a idade é superior a 1 ano
🎨 Personalización completa
- Clases CSS personalizadas
- Modo de campo oculto
- Entradas optimizadas para móbiles
- Soporte de accesibilidade
- Integración con todas as funcionalidades do formulario
- Tamaño do paso, valor inicial
- Valor permitido máis baixo/máis alto
- Campo oculto, valor oculto
⚙️ Configuración intelixente
Valores predeterminados
Preenche os campos con números iniciais para guiar os usuarios ou acelerar a finalización.
Texto do marcador de posición
Mostrar suxestións útiles como "Introducir cantidade" ou "A túa idade" antes de que os usuarios escriban.
Texto de axuda
Engade descricións para aclarar que números introducir.
Configuración sinxela en 3 pasos
Ten listo o teu campo despregable en minutos
Engadir o campo numérico
Arrastra e solta o campo Número da sección Campos básicos no formulario.
Definir regras de validación
Configura os valores mínimos/máximos, o tamaño do paso e o valor inicial para controlar os números que poden introducir os usuarios.
Escolle formato e estilo
Selecciona o formato simple, monetario, porcentual ou decimal. Opcionalmente, activa o modo deslizante para a selección visual.
🎉 Iso é todo! O teu campo numérico está listo con validación e formato intelixentes.
Aplicacións do mundo real
Comercio electrónico e pedidos
- Selectores de cantidade de produto
- Filtros de rango de prezos
- Entradas de porcentaxe de desconto
- Número de elementos e totais
Enquisas e cualificacións
- Puntuacións de satisfacción (1-10)
- Clasificación por estrelas
- Clasificacións de prioridade
- Escalas de probabilidade
Fitness e Saúde
- Seguimento do peso
- Medidas de altura
- Repeticións de exercicios
- Calculadoras de IMC
Reservas e reservas
- Número de convidados/asistentes
- Cantidade de habitación
- Duración en horas/días
- Tamaño do grupo
Formularios de solicitude
- Verificación da idade
- Anos de experiencia
- Expectativas salariais
- Rangos de orzamento
Negocios e finanzas
- Entradas de ingresos
- Importes de investimento
- Porcentaxes de retorno do investimento
- Taxas de comisións
Opcións de campo completas
Configuración básica
- Etiqueta de campo – O título que se mostra enriba do campo numérico
- Descrición/Texto de axuda – Guía adicional para os usuarios
- Campo obrigatorio – Facer obrigatoria a introdución do número
- Texto do marcador de posición – Texto de pista antes de que os usuarios introduzan un número
Configuración de validación
- Valor máis baixo permitido (mín.) – Número mínimo aceptable
- Valor máximo permitido (máx.) – Número máximo aceptable
- Tamaño do paso – Valor de incremento (1, 0.5, 0.01, etc.)
- Valor inicial – Número predeterminado preenchido
Formato de números
- Formato de visualización
- Número simple
- Moeda (con símbolo)
- Porcentaxe (%)
- Decimal (cifras fixas)
Símbolo de moeda – $, €, £, ¥, ₹ (cando o formato é Moeda)
Decimais – 0, 1, 2, 3 ou 4 díxitos (cando o formato é Decimal)
Opcións do control deslizante
- Mostrar como control deslizante – Activar o modo deslizante interactivo
- Cor do control deslizante – Selector de cores personalizado para a marca
- Mostrar o número xunto ao control deslizante – Mostrar o valor actual
Lóxica condicional
- Activar a lóxica condicional – Mostrar/ocultar segundo as condicións
Tipo lóxico- Débense cumprir todas as condicións (E)
- Calquera condición pódese cumprir (OU)
- Regras de condición
- Mostrar / Ocultar – Medidas a tomar
- Campo – Que campo comprobar
- Operador – Igual a, Non é igual a, Contén, Maior que, Menor que, Está baleiro, Non está baleiro
- Valor – Valor de comparación
- Condicións múltiples – Engadir regras ilimitadas
Opcións avanzadas
- Modo de campo oculto – Usar como campo oculto cun valor predefinido
- Clases CSS personalizadas - Aplicar estilos personalizados
- Atributos de accesibilidade – Etiquetas e descricións ARIA
Por que elixir o noso campo numérico?
✅ que – A validación exacta de mínimos/máximos evita entradas non válidas
✅ Flexible – Múltiples formatos para calquera caso de uso
✅ Visual – O modo deslizante crea interaccións atractivas
✅ Intelixente – A lóxica condicional crea formas dinámicas
✅ Amigable – Mensaxes de validación claras que guían aos usuarios
✅ Profesional – Formato de moeda e porcentaxe integrado
✅ Optimizado para móbiles – Teclados de números perfectos en dispositivos móbiles
✅ Totalmente integrado – Funciona perfectamente con todas as funcionalidades do formulario
Preguntas máis frecuentes
P: Cal é a diferenza entre Mín./Máx. e validación?
R: A configuración de mínimos/máximos proporciona unha validación instantánea a nivel de navegador. Os usuarios non poden enviar números non válidos, polo que os formularios están libres de erros e son fáciles de usar.
P: Podo usar números decimais?
R: Si! Define o valor do Paso para controlar os decimais. Usa 0.01 para a moeda (prezos), 0.1 para un decimal ou calquera paso personalizado.
P: Como funciona o control deslizante no móbil?
R: Os controis deslizantes están optimizados para o tacto e funcionan sen problemas en dispositivos móbiles.
P: Podo recoller números negativos?
R: Absolutamente! Define un valor mínimo negativo (por exemplo, Mín: -100, Máx: 100) para permitir números negativos.
P: Que símbolos de moeda son compatibles?
R: Calquera símbolo! Introduza $, €, £, ¥, ₹ ou calquera símbolo personalizado de ata 3 caracteres.
P: Podo usar a lóxica condicional baseada en comparacións de números?
R: Si! Usa operadores como "Maior que", "Menor que" e "Igual a" para crear lóxica baseada en valores numéricos.
P: Como creo un campo de porcentaxe?
R: Seleccione “Porcentaxe (%)” como Formato de visualización. O símbolo % aparece automaticamente e os usuarios introducen valores de 0 a 100.
P: Podo cambiar a cor do control deslizante?
R: Si! Cando o modo deslizante está activado, podes escoller calquera cor usando o selector de cores.
P: Que ocorre se os usuarios introducen números fóra do intervalo?
R: A validación do navegador detén o envío e mostra unha mensaxe de erro como "O valor debe estar entre 1 e 100".
P: Podo usar o campo numérico para os cálculos?
R: Si! Os valores dos campos numéricos funcionan en comparacións condicionais e en cálculos no procesamento de formularios.
P: Que precisión poden ter os números decimais?
R: Podes definir decimais de 0 a 4 díxitos e os valores dos pasos poden ser tan precisos como sexa necesario (por exemplo, 0.001).
