Campo de casilla de verificación
Recopile acuerdos y selecciones múltiples fácilmente. Desde simples casillas de verificación de sí/no hasta listas de selección múltiple con "Seleccionar todo", controles de mínimo/máximo y diseños inteligentes, el campo Casilla de verificación gestiona acuerdos individuales y preguntas de opción múltiple con una potente validación y opciones intuitivas.
Dos modos para cada necesidad de casilla de verificación
Perfecto para:
Funciones potentes para cada caso de uso
Dos modos de casilla de verificación
Modo de casilla de verificación única:
Una casilla para preguntas de sí/no, acuerdos o suscripciones. Ideal para aceptar términos, suscripciones a boletines y formularios de consentimiento.
Casos de uso:
- “Acepto los términos y condiciones”
- “Suscríbeme a la newsletter”
- “Sí, quiero recibir actualizaciones”
- “Confirmo que esta información es precisa”
Características:
- Texto de etiqueta de casilla de verificación personalizado
- Estado predeterminado marcado/desmarcado
- Valor enviado personalizado (sí, 1, verdadero, etc.)
- Opción de validación requerida
Modo de casillas de verificación múltiples:
Múltiples opciones donde los usuarios pueden seleccionar varias opciones. Ideal para preguntas de "Seleccionar todas las que correspondan", recopilación de preferencias y encuestas de selección múltiple.
Casos de uso:
- “¿Qué características te interesan?” (selección múltiple)
- “Seleccione sus métodos de contacto preferidos”
- “Elige todos los servicios que necesitas”
- “¿Qué temas te interesan?” (marca varias opciones)
Características:
- Opciones de casillas de verificación ilimitadas
- Tres estilos de diseño
- Opción “Seleccionar todo”
- Límites de selección mínimos y máximos
- “Otro” con entrada de texto
- Opción exclusiva “Ninguna de las anteriores”
🎨 Tres opciones de diseño (modo múltiple)
Disposición vertical (apilada):
Las casillas de verificación aparecen una por línea, apiladas verticalmente. Diseño más legible para etiquetas de opción más largas.
Mejor para:
- Texto de opción largo
- 3-10 opciones
- Formularios para dispositivos móviles
- Máxima legibilidad
Disposición horizontal (una al lado de la otra):
Las casillas de verificación aparecen en fila, una al lado de la otra. Diseño compacto para etiquetas cortas.
Mejor para:
- 2-5 opciones cortas
- Formas compactas
- Diseños de escritorio
- Espacio eficiente
Diseño de cuadrícula (varias columnas):
Casillas de verificación dispuestas en una cuadrícula de dos columnas. Diseño equilibrado que ahorra espacio y facilita la lectura.
Mejor para:
- 4-12 opciones
- Etiquetas de longitud media
- Diseño equilibrado
- Apariencia profesional
Comportamiento receptivo:
Todos los diseños se adaptan automáticamente a las pantallas móviles y se apilan cuando es necesario para una mejor interacción táctil.
✨ Opción “Seleccionar todo”
Selección con un clic:
Añade una casilla especial "Seleccionar todo" en la parte superior de tu lista. Los usuarios pueden marcar o desmarcar todas las opciones con un solo clic.
Comportamiento inteligente:
- Comprueba todas las opciones regulares simultáneamente
- Desmarca todo al hacer clic nuevamente
- Se desmarca automáticamente si alguna opción está deseleccionada
- Muestra un estado indeterminado cuando se seleccionan algunas opciones (no todas)
- Excluye “Ninguna de las anteriores” de la selección completa
Ideal para:
- Listas largas de casillas de verificación (más de 5 opciones)
- Formularios donde los usuarios a menudo seleccionan todo
- Preguntas del tipo “Marque todas las que correspondan”
- Permiso y selección de funciones
Experiencia de usuario:
Ahorra tiempo en listas largas. Los usuarios pueden seleccionar todo y luego desmarcar excepciones específicas.
✏️ Opción “Otro” con entrada de texto
Recopilación de respuestas personalizadas:
Añade una casilla de verificación "Otro" que muestra un campo de texto al seleccionarla. Los usuarios pueden especificar su propia respuesta si las opciones predefinidas no encajan.
Cómo funciona:
- La casilla de verificación “Otro” aparece en la parte inferior de la lista
- Cuando está marcada, aparece el campo de entrada de texto.
- Los usuarios escriben una respuesta personalizada
- Se envían tanto la selección de la casilla de verificación como el texto.
Casos de uso:
- Método de contacto preferido: …Otro (especifique)
- Intereses: …Otros temas
- ¿Cómo se enteró de nosotros? Otra fuente
- Cualquier lista que no pueda co
Beneficios:
Captura respuestas inesperadas, proporciona flexibilidad, evita selecciones de “ajuste forzado” y mejora la calidad de los datos.
❌ Opción “Ninguna de las anteriores”
No selección exclusiva:
Agregue una opción “Ninguna de las anteriores” que desmarque automáticamente todas las demás selecciones al hacer clic.
Exclusividad inteligente:
- Cuando se marca “Ninguno”, todas las demás opciones se desmarcan automáticamente
- Cuando se marca cualquier otra opción, “Ninguno” se desmarca automáticamente
- Proporciona una forma clara de indicar que no se aplican selecciones
- Previene selecciones contradictorias
Casos de uso:
- Preguntas de preferencia opcionales
- Seleccione todas las alergias: …Ninguna de las anteriores
- Verificadores de calificación
- Selecciones de intereses
¿Por qué incluir?
Evita el abandono del formulario, muestra minuciosidad, proporciona una opción negativa explícita y mejora la precisión de los datos.
📊 Controles de selección mín./máx.
Cantidad de selección de control:
Establezca el número mínimo y máximo de casillas de verificación que deben/pueden seleccionarse.
Selecciones mínimas:
Requerir que los usuarios seleccionen al menos X opciones. El formulario no se enviará hasta que se cumpla el requisito.
Ejemplos:
- “Seleccione al menos 2 intereses” (Mín: 2)
- “Elija un mínimo de 3 preferencias” (Mín: 3)
- “Elige al menos 1 opción” (Mín: 1)
Selecciones máximas:
Limitar a los usuarios a seleccionar no más de X opciones. Las casillas de verificación se deshabilitan una vez alcanzado el límite.
Ejemplos:
- “Elige tus 3 características principales” (Máx.: 3)
- “Selecciona hasta 5 servicios” (Máx.: 5)
- “No elija más de 2 opciones” (Máx.: 2)
Comentarios claros:
Los usuarios ven mensajes de validación como "Seleccione al menos 2 opciones" o "Se permiten un máximo de 3 selecciones".
🔧 Fácil gestión de opciones
Control total sobre las decisiones:
- Agregar opciones: escriba y presione Entrar o haga clic en “Agregar opción”. Cree listas de casillas de verificación en segundos.
- Opciones de edición: actualice el texto que se muestra (lo que ven los usuarios) y los valores (lo que se envía) de forma independiente.
- Marcado predeterminado: seleccione previamente casillas de verificación específicas marcando la casilla junto a cada opción.
- Opciones de reordenamiento: utilice las flechas arriba/abajo para organizar las casillas de verificación en el orden perfecto.
- Eliminar opciones: elimine las opciones no deseadas con un solo clic.
Visualización vs. Valor:
- Etiqueta: Lo que ven los usuarios (por ejemplo, "Actualizaciones por correo electrónico")
- Valor: lo que se almacena (por ejemplo, “email_updates”)
Edificio a granel:
Agregue múltiples opciones rápidamente escribiendo, presionando Enter, escribiendo, presionando Enter: creación rápida de listas de casillas de verificación.
☑️ Funciones de casilla de verificación única
Opciones de personalización:
Texto de la etiqueta de la casilla de verificación:
El texto que se muestra junto a la casilla de verificación. Debe ser claro y específico (p. ej., "Acepto recibir correos electrónicos de marketing").
Estado marcado predeterminado:
Marque la casilla al cargar el formulario. Úselo con cuidado: los usuarios deben marcar las casillas de aceptación con atención.
Valor enviado personalizado:
Establezca el valor que se envía al marcar (normalmente "sí", "1" o "verdadero"). El valor predeterminado es "sí".
Validación requerida:
Hacer que la casilla de verificación sea obligatoria. Los usuarios deben marcarla para enviar el formulario. Ideal para acuerdos obligatorios.
🔀 Lógica condicional
Visibilidad de casillas de verificación dinámicas:
Mostrar u ocultar campos de casilla de verificación según otros valores del formulario. Mostrar opciones solo cuando corresponda.
Reglas de lógica avanzada:
Lógica AND: Se deben cumplir todas las condiciones
Lógica OR: cualquier condición puede desencadenar la acción
8 operadores: igual a, no igual a, mayor que, menor que, contiene, está vacío y más
Casos de uso:
Mostrar las casillas de verificación de “Preferencias de envío” solo cuando “Requiere envío” esté marcado
Mostrar “Temas del boletín informativo” cuando la casilla de suscripción esté marcada
Mostrar “Servicios adicionales” cuando el tipo de servicio sea “Premium”
Ocultar las “Opciones de descuento” cuando el total del pedido sea inferior a $50
🎯 Experiencia de usuario mejorada
Funciones inteligentes integradas:
- Indicadores visuales: casillas de verificación claras con el espaciado adecuado
- Navegación con el teclado: navegue fácilmente por las opciones
- Compatible con dispositivos táctiles: grandes objetivos táctiles para dispositivos móviles
- Selecciones predeterminadas: comprobar previamente opciones específicas
- Clases CSS personalizadas: aplicar estilos a grupos de casillas de verificación
- Compatibilidad con accesibilidad: etiquetas ARIA, compatible con lectores de pantalla
- Optimizado para dispositivos móviles: tamaños de casillas de verificación perfectos para el tacto
- Etiquetas claras: texto legible con alineación adecuada
- Validación requerida: Borrar mensajes de error
- Texto de ayuda: agregar descripciones para grupos de casillas de verificación complejos
Configuración sencilla en 3 pasos
Prepare su campo de casilla de verificación en minutos
Agregar campo de casilla de verificación
Arrastre y suelte el campo Casilla de verificación desde la sección Campos básicos a su formulario.
Elija modo
Seleccione “Casilla de verificación única” para preguntas de sí/no o “Casillas de verificación múltiples” para opciones de selección múltiple.
Configurar opciones
Para una sola casilla: establezca la etiqueta y el valor. Para varias: agregue opciones, elija el diseño, active las opciones "Seleccionar todo" u "Otros" y establezca las selecciones mínimas y máximas.
🎉 ¡Listo! Tu casilla de verificación ya está lista con validación inteligente.
Aplicaciones en el mundo real
Acuerdos y consentimiento
* Aceptación de términos y condiciones
* Acuerdos de política de privacidad
* Suscripciones de consentimiento por correo electrónico
* Suscripciones a boletines informativos
Encuestas y comentarios
* Preguntas del tipo “Seleccione todas las que correspondan”
* Selección de intereses múltiples
* Colección de preferencias de funciones
*Opciones de interés sobre temas
Comercio electrónico
* Selección de características del producto
* Complementos de servicio
*Opciones de envío
* Preferencias de notificación
Los formularios de inscripción
* Preferencias de comunicación
* Categorías de interés
*Configuración de permisos
* Selección de acceso a funciones
Aplicaciones
* Verificadores de calificación
* Selección de habilidades
*Áreas de interés
*Opciones de disponibilidad
Configuración y preferencias
* Configuraciones de la cuenta
*Opciones de privacidad
*Opciones de notificación
* Conmutadores de funciones
Opciones de campo completas
Configuración básica
- Etiqueta de campo: la pregunta o el título que se muestra encima de las casillas de verificación
- Descripción/Texto de ayuda: orientación adicional para los usuarios
- Campo obligatorio: hacer que las casillas de verificación sean obligatorias
- Marcador de posición: no aplicable para casillas de verificación
Modo de casilla de verificación
Elija el tipo de modo:
- Casilla de verificación única: pregunta de sí/no, acuerdo o aceptación (una casilla de verificación)
- Varias casillas de verificación: opciones de selección múltiple (varias casillas de verificación)
Opciones de casilla de verificación única
- Texto junto a la casilla de verificación: etiqueta que se muestra junto a la casilla de verificación (por ejemplo, "Acepto los términos")
- Inicio marcado: casilla de verificación marcada previamente al cargar el formulario
- Valor al marcar: valor de los datos almacenado al marcar (predeterminado: “sí”)
Opciones de casillas de verificación múltiples
Estilo de diseño:
- Apilados (uno por línea) – Disposición vertical
- Lado a lado (en fila) – Disposición horizontal
- Cuadrícula (varias columnas): diseño de cuadrícula de 2 columnas
Opciones de casilla de verificación:
Construye tu lista de opciones:
- Texto para mostrar: lo que ven los usuarios (por ejemplo, "Correo electrónico")
- Valor: lo que se envía (por ejemplo, "correo electrónico")
- Marcado predeterminado: preseleccionar opciones específicas
- Reordenar – Mover opciones hacia arriba/abajo
- Eliminar – Quitar opciones
Opciones especiales:
- Agregar opción “Seleccionar todo”: agrega una casilla de verificación en la parte superior que selecciona o deselecciona todas las opciones
- Agregar opción “Otro” con cuadro de texto: agrega la opción “Otro” con campo de texto para respuestas personalizadas
- Agregar opción “Ninguna de las anteriores”: agrega una opción exclusiva que desmarca todas las demás cuando se selecciona
Límites de selección:
- Selecciones mínimas requeridas: menor número de casillas de verificación que deben seleccionarse (por ejemplo, 2)
- Selecciones máximas permitidas: la mayoría de las casillas de verificación que se pueden seleccionar (por ejemplo, 5)
La lógica condicional
- Habilitar lógica condicional: mostrar u ocultar según condiciones
- Tipo de lógica
- Se deben cumplir todas las condiciones (Y)
- Cualquier condición se puede cumplir (O)
- Reglas de condición
- Mostrar/Ocultar – Acción a tomar
- Campo – ¿Qué campo comprobar?
- Operador – Igual, No igual, Contiene, Mayor que, Menor que, Está vacío, No está vacío
- Valor – Valor de comparación
- Condiciones múltiples: agregue reglas ilimitadas
Opciones Avanzadas
- Campo oculto: hacer que el campo sea invisible (no recomendado para casillas de verificación)
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidad: etiquetas ARIA para lectores de pantalla
¿Por qué elegir nuestro campo de casilla de verificación?
✅ Dos modos – Casilla de verificación única o varias casillas de verificación en un tipo de campo
✅ diseños flexibles – Disposiciones verticales, horizontales o en cuadrícula
✅ Seleccionar todo – Selección con un solo clic para mayor comodidad
✅ Otra opción – Entrada de texto para respuestas personalizadas
✅ Ninguna opción – Elección exclusiva sin selección
✅ Límites mínimos y máximos – Control de cantidad de selección
✅ Manejo Sencillo – Agregue, edite, reordene y elimine opciones sin esfuerzo
✅ Fácil de usar – Etiquetas claras, espaciado adecuado, fácil de usar al tacto
✅ Totalmente integrado – Funciona a la perfección con todas las funciones del formulario
Preguntas frecuentes
P: ¿Cuál es la diferencia entre los modos de casilla de verificación única y múltiple?
El modo simple muestra una casilla de verificación para decisiones de sí/no. El modo múltiple muestra varias casillas de verificación donde los usuarios pueden seleccionar más de una opción.
P: ¿Pueden los usuarios seleccionar todas las casillas de verificación a la vez?
Sí. Habilite la opción “Seleccionar todo” para agregar una casilla de verificación que marque o desmarque todas las opciones con un solo clic.
P: ¿Cómo funcionan las selecciones mínimas y máximas?
El mínimo garantiza que los usuarios seleccionen al menos un número determinado de opciones. El máximo limita el número de casillas de verificación que pueden seleccionar.
P: ¿Qué hace la opción “Otro”?
Añade una casilla de verificación adicional llamada "Otro". Al seleccionarla, aparece un campo de texto para que los usuarios puedan introducir una respuesta personalizada.
P: ¿Cómo funciona “Ninguna de las anteriores”?
Actúa como una opción exclusiva. Si se selecciona, se desmarcan todas las demás casillas. Si se marca cualquier otra opción, la opción "Ninguno" se desmarca automáticamente.
P: ¿Puedo preseleccionar determinadas casillas de verificación?
Sí. Para el modo individual, active "Inicio marcado". Para el modo múltiple, marque la casilla junto a cada opción que desee seleccionar por defecto.
P: ¿Debo marcar previamente las casillas del acuerdo?
No. Para conocer las políticas, los términos y el consentimiento, los usuarios deben marcar la casilla activamente por sí mismos.
P: ¿Puedo cambiar el orden de las casillas de verificación?
Sí. Utilice las flechas hacia arriba y hacia abajo junto a cada opción para reordenarlas como desee.
P: ¿Cuál es la diferencia entre el texto y el valor que se muestra?
El texto mostrado es lo que ven los usuarios. El valor es lo que se almacena en la base de datos para obtener datos limpios y consistentes.
P: ¿Puedo utilizar lógica condicional con casillas de verificación?
Sí. Active otros campos según las selecciones utilizando operadores como "Igual a", "Está vacío" o "No está vacío".
P: ¿Cómo creo una casilla de verificación obligatoria?
Habilite "Campo obligatorio". Para el modo individual, la casilla debe estar marcada. Para el modo múltiple, los usuarios deben seleccionar al menos una opción o cumplir con el requisito mínimo.
P: ¿Pueden los usuarios cambiar las selecciones después de verificar?
Sí. Pueden marcar o desmarcar cualquier opción libremente antes de enviar el formulario. También pueden activar o desactivar la opción "Seleccionar todo" en cualquier momento.
