Botóns de radio
Recolle seleccións individuais con claridade e estilo. Desde preguntas sinxelas de si/non ata complexas opcións múltiples con deseños flexibles, opcións personalizadas e funcións intelixentes, o campo Botóns de opción garante que os usuarios escollan só unha resposta da túa lista.
Perfecto para preguntas de opción única
Perfecto para:
Funcións potentes para cada caso de uso
🎨 Opcións de deseño flexibles
Tres deseños profesionais:
- Vertical (apiladas): as opcións aparecen unha por liña, apiladas verticalmente. É o deseño máis tradicional e lexible para etiquetas de opcións longas.
- Horizontal (en liña): as opcións aparecen unha ao lado da outra nunha fila. Perfecto para etiquetas curtas e formularios compactos.
- Grella (2 columnas): as opcións están dispostas nunha grella de dúas columnas. Aforra espazo e mantén a lexibilidade.
Escolle en función de:
- Vertical: Etiquetas de opcións longas, opcións detalladas, formularios tradicionais
- Horizontal: 2-5 opcións curtas (Si/Non, Home/Muller, etc.)
- Grella: 4+ opcións de lonxitude media, deseño equilibrado
Comportamento de resposta:
Todos os deseños adáptanse automaticamente ás pantallas dos móbiles, apilándoos verticalmente cando é necesario para unha mellor interacción táctil.
🎲 Orde de opcións aleatorias
Aleatorización por grao da enquisa
Baralla a orde das opcións cada vez que se carga o formulario. Elimina o sesgo de posición en enquisas, sondaxes e formularios de investigación.
Por que aleatorizar?
- Evita o sesgo de orde nas enquisas
- Garante unha distribución xusta da selección
- Metodoloxía de investigación profesional
- Mellora a calidade dos datos
Perfecto para:
- Formularios de enquisas e cuestionarios
- Probas A/B e investigación
- Enquisas e votacións
- Estudos de preferencias
Comportamento intelixente:
As opcións especiais como "Outras" e "Ningunha das anteriores" poden permanecer na parte inferior mesmo cando as opcións principais sexan aleatorias.
❌ Opción "Ningunha das anteriores"
Non selección explícita
Engade unha opción "Ningunha das anteriores" ou "Non aplicable" ao final da lista. Isto ofrece aos usuarios unha forma clara de indicar que non se aplica ningunha opción.
Por que incluír isto?
- Impide as seleccións forzadas
- Mellora a precisión dos datos
- Mostra todas as bases cubertas
- Reduce o abandono de formularios
Perfecto para:
- Preguntas de preferencia opcionais
- Preguntas de estilo "Seleccionar todas as que correspondan"
- Verificadores de cualificacións
- seleccións de intereses
Posicionamento intelixente:
A opción "Ningunha" sempre aparece ao final, o que proporciona unha separación clara das opcións habituais.
🔧 Xestión de opcións sinxelas
Control total sobre as opcións:
- Engadir opcións: escribe e fai clic en "Engadir opción" ou preme Intro. Crea a túa lista en segundos.
- Opcións de edición: actualiza tanto o texto para mostrar (o que ven os usuarios) como os valores (o que se envía) de forma independente.
- Reordenar opcións: usa as frechas arriba/abaixo para organizar as opcións na orde perfecta.
- Eliminar opcións: elimina as opcións cun só clic. Ningunha opción é permanente.
Mostrar vs. Valor:
- Etiqueta: O que ven os usuarios (por exemplo, "Servizo excelente")
- Valor: O que se almacena na base de datos (por exemplo, “excelente_servizo”)
Edificio a granel:
Engade varias opcións rapidamente escribindo, premendo Intro, escribindo, premendo Intro: creación rápida de opcións para listas longas.
✅ Selección predeterminada
Preseleccionar unha opción
Escolle que botón de opción se selecciona por defecto cando se carga o formulario. Guía aos usuarios cara a respostas comúns ou destaca as opcións recomendadas.
Casos de uso:
Preselecciona a resposta máis común para completar rapidamente
Resaltar a opción recomendada (por exemplo, o plan "Mellor valor")
Definir a opción de acordo predeterminada (termos aceptados)
Guiar aos usuarios cara á opción preferida
Ou sen predeterminado:
Deixar todas as opcións sen seleccionar, o que esixe que os usuarios tomen unha decisión activamente. Perfecto para preguntas que requiren unha selección consciente.
✏️ Opción "Outra" con entrada de texto
Colección de respostas personalizadas
Engade unha opción "Outra" que revela unha entrada de texto ao seleccionala. Os usuarios poden especificar a súa propia resposta se ningunha das opcións predefinidas se axusta.
Etiqueta personalizable:
- Cambia o texto da etiqueta "Outro" para que se axuste ás túas necesidades:
- "Outro (especifique)"
- "Algo máis"
- "Resposta personalizada"
- "Non listado"
Como funciona:
Cando os usuarios seleccionan "Outro", aparece instantaneamente un campo de texto para que escriban a súa resposta personalizada. Envíanse tanto a selección de "Outro" como o seu texto.
Casos de uso:
- "Como soubo de nós?" cunha fonte de referencia personalizada
- Preferencia de produto con opcións non listadas
- Categorías de comentarios con "Outras preocupacións"
- Calquera lista que non poida abarcar todas as posibilidades
🔀 Lóxica condicional
Visibilidade dinámica do botón de opción
Mostrar ou ocultar os campos dos botóns de opción segundo os valores doutros formularios. Crear formularios intelixentes que se adapten ás seleccións 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 as opcións do produto só cando se seleccione o tipo de produto
- Mostrar as preferencias de envío cando o método de envío sexa igual a "Exprés"
- Ocultar os plans de pagamento cando o total do pedido sexa inferior a 100 $
- Revelar preguntas adicionais baseadas na resposta inicial
🎯 Experiencia de usuario mellorada
Funcións intelixentes integradas:
- Aplicación de selección única: só se pode seleccionar unha opción á vez (comportamento estándar do botón de opción)
- Validación requirida: fai que a selección sexa obrigatoria con mensaxes de erro claras
- Navegación do teclado: as teclas de frecha percorren as opcións de accesibilidade
- Clases CSS personalizadas: aplica estilos personalizados para que coincidan coa túa marca
- Compatibilidade con accesibilidade: etiquetas ARIA, compatible con lectores de pantalla
- Optimizado para móbiles: compatible co tacto e con obxectivos de toque máis grandes
- Retroalimentación visual: indicación clara da opción seleccionada
- Axuda de texto: engadir descricións para aclarar as opcións
Configuración sinxela en 3 pasos
Ten listo o teu campo de botóns de radio en minutos
Engadir o campo Botóns de radio
Arrastra e solta o campo Botóns de opción da sección Campos básicos no teu formulario.
Engade as túas opcións
Escribe as etiquetas das opcións e fai clic en "Engadir opción" para crear a túa lista. Reordena con frechas, edita as etiquetas e os valores segundo sexa necesario.
Escolle deseño e características
Selecciona o estilo de deseño (vertical, horizontal ou cuadrícula), engade opcionalmente a opción "Outro" ou "Ningún dos anteriores" e define a selección predeterminada se o desexas.
🎉 Iso é todo! Os teus botóns de opción están listos para a selección dunha soa opción.
Aplicacións do mundo real
Enquisas e comentarios
* Valoracións de satisfacción (Moi satisfeito a Moi insatisfeito)
* Escalas de acordo (Totalmente de acordo a Totalmente en desacordo)
* Preguntas de frecuencia (diaria, semanal, mensual, raramente, nunca)
* Preguntas de valoración (1-5 estrelas, de excelente a deficiente)
E-Commerce
* Selección do tamaño do produto (Pequeno, Mediano, Grande, XL)
* Preferencias de cor
* Opcións de método de envío
* Opcións de envoltorio para agasallos
Formularios de rexistro
* Selección de xénero
* Opcións de rango de idade
*Nivel de experiencia (Principiante, Intermedio, Avanzado)
* Selección do nivel de membro
Aplicacións comerciais
* Nivel de prioridade (Alto, Medio, Baixo)
* Selección de departamento
* Preferencias de contacto (correo electrónico, teléfono, mensaxe de texto)
* Opcións de rango orzamentario
Educación e Formación
* Selección do nivel do curso
* Preferencia de ritmo de aprendizaxe
* Dispoñibilidade de horarios
* Tipo de certificación
Saúde e benestar
* Selección do tipo de cita
* Elección do provedor de seguros
* Gravidade dos síntomas (leve, moderada, grave)
* Preferencia de consulta
Opcións de campo completas
Configuración básica
- Etiqueta do campo: a pregunta ou o título que se mostra enriba dos botóns de opción
- Descrición/Texto de axuda: guía adicional para os usuarios
- Campo obrigatorio: facer que a selección sexa obrigatoria
- Marcador de posición: non aplicable para botóns de opción
Maquetación e presentación
- Estilo de deseño
- Verticais (apilados): un por liña
- Horizontal (en liña): lado a lado
- Grella (2 columnas): deseño equilibrado
Opcións do botón de radio
- Engadir opcións: crea a túa lista de opcións
- Texto para mostrar: o que ven os usuarios
- Valor: o que se envía co formulario
- Reordenar: mover as opcións cara arriba/abaixo
- Eliminar – Eliminar opcións
Selección predeterminada
Valor seleccionado predeterminado: preseleccione unha opción ou déixea en branco se non ten ningún valor predeterminado.
Opcións especiais
- Engadir a opción "Outra": Permitir a entrada de texto personalizada
- Outra etiqueta de opción: personaliza o texto "Outro" (predeterminado: "Outro (especifica)")
- Engadir a opción "Ningunha das anteriores": engadir unha opción explícita de non selección ao final
Características avanzadas
Orde aleatoria: mostra as opcións en orde aleatoria (útil para enquisas para evitar sesgos de orde)
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: acción a realizar
- 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: engade regras ilimitadas
outras opcións
- Campo oculto: fai que o campo sexa invisible pero inclúe o valor seleccionado nos envíos
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidade: etiquetas e descricións de ARIA
Por que elixir o noso campo de botóns de radio?
✅ Disposicións flexibles – Disposicións verticais, horizontais ou en cuadrícula
✅ Características da enquisa – Orde aleatoria para obter resultados imparciais
✅ Amigable – Opción «Outra» para respostas personalizadas
✅ Control completo - Opcións fáciles de engadir, editar, reordenar e eliminar
✅ Predeterminados intelixentes – Preseleccionar opcións comúns ou recomendadas
✅ Profesional – «Ningunha das anteriores» para enquisas axeitadas
✅ Optimizado para móbiles – Táctil con obxectivos de toque perfectos
✅ Accesible – Navegación con teclado e compatibilidade co lector de pantalla
✅ Totalmente integrado – Funciona perfectamente con todas as funcionalidades do formulario
Preguntas máis frecuentes
P: Cal é a diferenza entre os botóns de opción e as caixas de verificación?
Os botóns de opción só permiten unha selección. As caixas de verificación permiten varias seleccións. Usa a opción para "escoller un" e as caixas de verificación para "escoller calquera".
P: Os usuarios poden cambiar a súa selección de radio?
Si. Ao seleccionar un novo botón de opción, o anterior deséleccionase automaticamente.
P: Cando debería usar o deseño vertical fronte ao horizontal?
Usa o deseño vertical para listas ou etiquetas longas, o horizontal para conxuntos curtos de dúas ou tres opcións e o deseño en cuadrícula para grupos de opcións de tamaño medio.
P: Como funciona a opción "Outra"?
Ao seleccionar "Outro", móstrase un campo de texto onde os usuarios escriben unha resposta personalizada. Envíanse tanto a selección como o texto.
P: Que fai a orde aleatoria?
Cada vez que se carga o formulario, a orde das opcións cambia para reducir o sesgo nas respostas.
P: Debería definir unha selección predeterminada?
Define un se queres acelerar a finalización ou guiar aos usuarios. Déixao en branco cando precises que tomen unha decisión intencionada.
P: Para que serve a opción "Ningunha das anteriores"?
Permite aos usuarios indicar que non se aplica ningunha opción da lista, mellorando a precisión e evitando respostas forzadas.
P: Podo ter texto para mostrar e valores enviados diferentes?
Si. O texto para mostrar móstrase aos usuarios e o valor almacenado nos envíos pode ser máis limpo ou máis estruturado.
P: Como podo reordenar as opcións dos botóns de opción?
Usa as frechas arriba e abaixo xunto a cada opción para movelas na orde que prefires.
P: Pódense esixir botóns de opción?
Si. Activa "Campo obrigatorio" e os usuarios deben escoller unha opción antes de enviar.
P: Funcionan os botóns de radio nos móbiles?
Si. Usan controis táctiles e apílanse verticalmente automaticamente en pantallas pequenas.
P: Podo usar a lóxica condicional cos botóns de opción?
Si. Mostrar ou ocultar campos segundo a opción seleccionada mediante "Igual a" ou condicións similares.
