Botones de Selección (Radio Buttons)
Recopile selecciones individuales con claridad y estilo. Desde preguntas sencillas de sí/no hasta opciones complejas con múltiples opciones, con diseños flexibles, opciones personalizadas y funciones inteligentes, el campo "Botones de opción" garantiza que los usuarios elijan exactamente una respuesta de su lista.
Perfecto para preguntas de opción única
Perfecto para:
Funciones potentes para cada caso de uso
🎨 Opciones de diseño flexibles
Tres diseños profesionales:
- Vertical (Apiladas): Las opciones aparecen una por línea, apiladas verticalmente. El diseño más tradicional y legible para etiquetas de opciones largas.
- Horizontal (En línea): Las opciones aparecen una al lado de la otra. Ideal para etiquetas cortas y formularios compactos.
- Cuadrícula (2 columnas): Opciones organizadas en una cuadrícula de dos columnas. Ahorra espacio y facilita la lectura.
Elija en función de:
- Vertical: Etiquetas de opciones largas, opciones detalladas, formularios tradicionales
- Horizontal: 2-5 opciones cortas (Sí/No, Masculino/Femenino, etc.)
- Cuadrícula: más de 4 opciones de longitud media, diseño equilibrado
Comportamiento receptivo:
Todos los diseños se adaptan automáticamente a las pantallas móviles y se apilan verticalmente cuando es necesario para una mejor interacción táctil.
Orden aleatorio de opciones
Aleatorización según el grado de la encuesta
Reordena las opciones cada vez que se carga el formulario. Elimina el sesgo de posición en encuestas, sondeos y formularios de investigación.
¿Por qué aleatorizar?
- Previene el sesgo de orden en las encuestas
- Garantiza una distribución justa de la selección
- Metodología de investigación profesional
- Mejora la calidad de los datos
Ideal para:
- Formularios de encuesta y cuestionarios
- Pruebas A/B e investigación
- Encuestas y votaciones
- Estudios de preferencias
Comportamiento inteligente:
Las opciones especiales como “Otro” y “Ninguna de las anteriores” pueden permanecer en la parte inferior incluso cuando las opciones principales son aleatorias.
❌ Opción “Ninguna de las anteriores”
No selección explícita
Añade la opción "Ninguna de las anteriores" o "No aplicable" al final de la lista. Esto permite a los usuarios indicar claramente que no hay opciones aplicables.
¿Por qué incluir esto?
- Previene selecciones forzadas
- Mejora la precisión de los datos
- Muestra todas las bases cubiertas
- Reduce el abandono de formularios
Ideal para:
- Preguntas de preferencia opcionales
- Preguntas de estilo “Seleccione todas las que correspondan”
- Verificadores de calificación
- Selecciones de intereses
Posicionamiento inteligente:
La opción “Ninguna” siempre aparece al final, lo que proporciona una separación clara de las opciones regulares.
🔧 Fácil gestión de opciones
Control total sobre las decisiones:
- Añadir opciones: Escribe y haz clic en "Añadir opción" o pulsa Intro. Crea tu lista en segundos.
- Opciones de edición: actualice el texto mostrado (lo que ven los usuarios) y los valores (lo que se envía) de forma independiente.
- Opciones de reordenamiento: utilice las flechas arriba/abajo para organizar las opciones en el orden perfecto.
- Eliminar opciones: elimine opciones con un solo clic. Ninguna opción es permanente.
Visualización vs. Valor:
- Etiqueta: Lo que ven los usuarios (por ejemplo, “Excelente servicio”)
- Valor: lo que se almacena en la base de datos (por ejemplo, “excelente_servicio”)
Edificio a granel:
Agregue múltiples opciones rápidamente escribiendo, presionando Enter, escribiendo, presionando Enter: creación rápida de opciones para listas largas.
✅ Selección predeterminada
Preseleccionar una opción
Elija el botón de opción que se selecciona por defecto al cargar el formulario. Guía a los usuarios hacia respuestas comunes o destaca las opciones recomendadas.
Casos de uso:
Preseleccione la respuesta más común para acelerar la finalización
Resalte la opción recomendada (por ejemplo, el plan “Mejor valor”)
Establecer la opción de acuerdo predeterminada (términos aceptados)
Guiar a los usuarios hacia la opción preferida
O sin valor predeterminado:
Deja todas las opciones sin seleccionar, lo que requiere que los usuarios elijan activamente. Ideal para preguntas que requieren una selección consciente.
✏️ Opción “Otro” con entrada de texto
Colección de respuestas personalizadas
Añade la opción "Otro" que muestra una entrada de texto al seleccionarla. Los usuarios pueden especificar su propia respuesta si ninguna de las opciones predefinidas encaja.
Etiqueta personalizable:
- Cambie el texto de la etiqueta “Otro” para que coincida con sus necesidades:
- “Otro (por favor especifique)”
- "Otra cosa"
- “Respuesta personalizada”
- “No listado”
Cómo funciona:
Cuando los usuarios seleccionan "Otro", aparece instantáneamente un campo de texto para que escriban su respuesta personalizada. Se envían tanto la opción "Otro" como el texto.
Casos de uso:
- “¿Cómo se enteró de nosotros?” con fuente de referencia personalizada
- Preferencia de producto con opciones no listadas
- Categorías de comentarios con “Otras inquietudes”
- Cualquier lista que no pueda cubrir todas las posibilidades
🔀 Lógica condicional
Visibilidad dinámica de los botones de opción
Muestra u oculta los campos de los botones de opción según otros valores del formulario. Crea formularios inteligentes que se adaptan a las selecciones del usuario.
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 opciones de producto solo cuando se selecciona el tipo de producto
- Mostrar preferencias de envío cuando el método de envío sea "Express"
- Ocultar los planes de pago cuando el total del pedido sea inferior a $100
- Revelar preguntas adicionales basadas en la respuesta inicial
🎯 Experiencia de usuario mejorada
Funciones inteligentes integradas:
- Aplicación de selección única: solo se puede seleccionar una opción a la vez (comportamiento estándar del botón de opción)
- Validación requerida: haga que la selección sea obligatoria con mensajes de error claros
- Navegación con el teclado: las teclas de flecha se mueven entre las opciones para accesibilidad
- Clases CSS personalizadas: aplique un estilo personalizado que coincida con su marca
- Compatibilidad con accesibilidad: etiquetas ARIA, compatible con lectores de pantalla
- Optimizado para dispositivos móviles: compatible con pantallas táctiles con objetivos táctiles más grandes
- Retroalimentación visual: indicación clara de la opción seleccionada
- Soporte de texto de ayuda: agregue descripciones para aclarar las opciones
Configuración sencilla en 3 pasos
Prepare su campo de botones de opción en minutos
Agregar el campo Botones de opción
Arrastre y suelte el campo Botones de opción desde la sección Campos básicos a su formulario.
Añade tus opciones
Escribe las etiquetas de las opciones y haz clic en "Añadir opción" para crear tu lista. Reordena con flechas y edita las etiquetas y los valores según sea necesario.
Elija diseño y características
Seleccione el estilo de diseño (vertical, horizontal o cuadrícula), agregue opcionalmente la opción “Otro” o “Ninguna de las anteriores”, configure la selección predeterminada si lo desea.
🎉 ¡ Listo! Tus botones de radio están preparados para la selección de una sola opción.
Aplicaciones en el mundo real
Encuestas y comentarios
* Calificaciones de satisfacción (Muy satisfecho a Muy insatisfecho)
* Escalas de acuerdo (Totalmente de acuerdo a Totalmente en desacuerdo)
* Preguntas de frecuencia (Diariamente, Semanalmente, Mensualmente, Rara vez, Nunca)
* Preguntas de calificación (1-5 estrellas, excelente a malo)
Comercio Electrónico
* Selección de tamaño del producto (Pequeño, Mediano, Grande, XL)
* Preferencias de color
*Opciones de método de envío
*Opciones de envoltura de regalos
Los formularios de inscripción
* Selección de género
*Opciones de rango de edad
* Nivel de experiencia (Principiante, Intermedio, Avanzado)
* Selección del nivel de membresía
Aplicaciones empresariales
* Nivel de prioridad (Alto, Medio, Bajo)
* Selección de departamento
* Preferencia de contacto (correo electrónico, teléfono, mensaje de texto)
* Opciones de rango de presupuesto
Educación y capacitación
* Selección del nivel del curso
* Preferencia de ritmo de aprendizaje
* Disponibilidad de horario
* Tipo de certificación
Salud y Bienestar
* Selección del tipo de cita
* Elección del proveedor de seguros
* Gravedad de los síntomas (leve, moderada, grave)
*Preferencia de consulta
Opciones de campo completas
Configuración básica
- Etiqueta de campo: la pregunta o el título que se muestra sobre los botones de opción
- Descripción/Texto de ayuda: orientación adicional para los usuarios
- Campo obligatorio: hacer que la selección sea obligatoria
- Marcador de posición: no aplicable para botones de opción
Diseño y presentación
- estilo de diseño
- Vertical (apilados): uno por línea
- Horizontal (en línea) – lado a lado
- Cuadrícula (2 columnas): diseño equilibrado
Opciones de botón de opción
- Agregar opciones: crea tu lista de opciones
- Texto para mostrar: lo que ven los usuarios
- Valor – Lo que se envía con el formulario
- Reordenar – Mover opciones hacia arriba/abajo
- Eliminar – Quitar opciones
Selección predeterminada
Valor seleccionado predeterminado: seleccione previamente una opción o déjela en blanco si no hay ningún valor predeterminado
Opciones especiales
- Añadir la opción “Otro”: permitir la entrada de texto personalizado
- Etiqueta de otra opción: personalice el texto "Otro" (predeterminado: "Otro (especifique)")
- Agregar opción “Ninguna de las anteriores”: agregar una opción explícita de no selección al final
Características Avanzadas
Orden aleatorio: muestra las opciones en orden aleatorio (útil para encuestas para evitar sesgos de orden)
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
Otras Opciones
- Campo oculto: hacer que el campo sea invisible pero incluir el valor seleccionado en los envíos
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidad: etiquetas y descripciones ARIA
¿Por qué elegir nuestro campo de botones de radio?
✅ diseños flexibles – Disposiciones verticales, horizontales o en cuadrícula
✅ Funciones de la encuesta – Orden aleatorio para obtener resultados imparciales
✅ Fácil de usar – Opción “Otro” para respuestas personalizadas
✅ Control completo – Fáciles opciones para agregar, editar, reordenar y eliminar
✅ Valores predeterminados inteligentes – Preseleccionar opciones comunes o recomendadas
✅ Desarrollo profesional – “Ninguna de las anteriores” para encuestas adecuadas
✅ Móvil optimizado – Compatible con tacto con objetivos de toque perfectos
✅ Accesible – Navegación con teclado y compatibilidad con lectores de pantalla
✅ Totalmente integrado – Funciona a la perfección con todas las funciones del formulario
Preguntas frecuentes
P: ¿Cuál es la diferencia entre los botones de opción y las casillas de verificación?
Los botones de opción solo permiten una selección. Las casillas de verificación permiten múltiples selecciones. Use el botón de opción para "seleccionar una" y las casillas de verificación para "seleccionar cualquiera".
P: ¿Pueden los usuarios cambiar su selección de radio?
Sí. Al seleccionar un nuevo botón de opción se deselecciona automáticamente el anterior.
P: ¿Cuándo debo utilizar el diseño vertical u horizontal?
Utilice el diseño vertical para listas más largas o etiquetas largas, el diseño horizontal para conjuntos cortos de dos o tres opciones y el diseño de cuadrícula para grupos de opciones de tamaño mediano.
P: ¿Cómo funciona la opción “Otro”?
Al seleccionar "Otro", se abre un campo de texto donde los usuarios pueden escribir una respuesta personalizada. Se envían tanto la selección como el texto.
P: ¿Qué hace el orden aleatorio?
Cada vez que se carga el formulario, el orden de las opciones cambia para reducir el sesgo en las respuestas.
P: ¿Debo establecer una selección predeterminada?
Seleccione uno si desea acelerar la finalización o guiar a los usuarios. Déjelo en blanco si necesita que tomen una decisión intencional.
P: ¿Para qué sirve la opción “Ninguna de las anteriores”?
Permite a los usuarios indicar que no se aplica ninguna opción en la lista, lo que mejora la precisión y evita respuestas forzadas.
P: ¿Puedo tener diferentes textos de visualización y valores enviados?
Sí. El texto para mostrar se muestra a los usuarios y el valor almacenado en los envíos puede ser más claro o más estructurado.
P: ¿Cómo puedo reordenar las opciones de mis botones de opción?
Utilice las flechas hacia arriba y hacia abajo junto a cada opción para moverlas al orden que prefiera.
P: ¿Pueden ser obligatorios los botones de opción?
Sí. Habilite “Campo obligatorio” y los usuarios deberán elegir una opción antes de enviar.
P: ¿Funcionan los botones de opción en los dispositivos móviles?
Sí. Utilizan controles táctiles y se apilan automáticamente verticalmente en pantallas pequeñas.
P: ¿Puedo utilizar lógica condicional con botones de opción?
Sí. Mostrar u ocultar campos según la opción seleccionada utilizando “Igual” o condiciones similares.
