Botons de ràdio
Recopila seleccions individuals amb claredat i estil. Des de preguntes senzilles de sí/no fins a opcions complexes amb múltiples opcions amb dissenys flexibles, opcions personalitzades i funcions intel·ligents, el camp Botons d'opció garanteix que els usuaris triïn exactament una resposta de la teva llista.
Perfecte per a preguntes d'opció única
Perfecte per:
Funcions potents per a cada cas d'ús
🎨 Opcions de disseny flexibles
Tres dissenys professionals:
- Vertical (apilat): les opcions apareixen una per línia, apilades verticalment. Disseny més tradicional i llegible per a etiquetes d'opcions llargues.
- Horitzontal (en línia): les opcions apareixen una al costat de l'altra en una fila. Perfecte per a etiquetes curtes i formularis compactes.
- Graella (2 columnes): opcions disposades en una graella de dues columnes. Estalvia espai i manté la llegibilitat.
Trieu en funció de:
- Vertical: Etiquetes d'opcions llargues, opcions detallades, formularis tradicionals
- Horitzontal: 2-5 opcions curtes (Sí/No, Masculí/Femení, etc.)
- Graella: 4+ opcions de longitud mitjana, disseny equilibrat
Comportament responsiu:
Tots els dissenys s'adapten automàticament a les pantalles dels mòbils, apilant-se verticalment quan cal per a una millor interacció tàctil.
🎲 Ordre aleatori d'opcions
Aleatorització de grau d'enquesta
Barreja l'ordre de les opcions cada vegada que es carrega el formulari. Elimina el biaix de posició en enquestes, sondejos i formularis de recerca.
Per què aleatoritzar?
- Evita el biaix d'ordre en les enquestes
- Garanteix una distribució justa de la selecció
- Metodologia de recerca professional
- Millora la qualitat de les dades
Perfecte per a:
- Formularis d'enquesta i qüestionaris
- Proves A/B i recerca
- Enquestes i votacions
- Estudis de preferències
Comportament intel·ligent:
Les opcions especials com ara "Altres" i "Cap de les anteriors" poden romandre a la part inferior fins i tot quan les opcions principals són aleatòries.
❌ Opció “Cap de les anteriors”
No selecció explícita
Afegiu una opció "Cap de les anteriors" o "No aplicable" al final de la llista. Dóna als usuaris una manera clara d'indicar que no hi ha cap opció aplicable.
Per què incloure això?
- Evita les seleccions forçades
- Millora la precisió de les dades
- Mostra totes les bases cobertes
- Redueix l'abandonament de formularis
Perfecte per a:
- Preguntes de preferència opcionals
- Preguntes d'estil "Seleccioneu totes les opcions que corresponguin"
- Verificadors de qualificació
- Seleccions d'interessos
Posicionament intel·ligent:
L'opció "Cap" sempre apareix al final, cosa que proporciona una separació clara de les opcions habituals.
🔧 Gestió fàcil d'opcions
Control total sobre les opcions:
- Afegeix opcions: escriu i fes clic a "Afegeix opció" o prem Intro. Crea la teva llista en segons.
- Opcions d'edició: actualitza tant el text que es mostra (el que veuen els usuaris) com els valors (el que s'envia) de manera independent.
- Reordenar opcions: utilitzeu les fletxes amunt/avall per organitzar les opcions en l'ordre perfecte.
- Suprimeix opcions: elimina opcions amb un sol clic. Cap opció és permanent.
Display vs. Valor:
- Etiqueta: Què veuen els usuaris (per exemple, "Servei excel·lent")
- Valor: Què s'emmagatzema a la base de dades (per exemple, "excellent_service")
Construcció a granel:
Afegiu diverses opcions ràpidament escrivint, prement Retorn, escrivint, prement Retorn: creació ràpida d'opcions per a llistes llargues.
✅ Selecció predeterminada
Preselecciona una opció
Trieu quin botó d'opció es selecciona per defecte quan es carrega el formulari. Guia els usuaris cap a respostes habituals o destaca les opcions recomanades.
Casos d'ús:
Preseleccioneu la resposta més comuna per a la finalització ràpida
Ressalteu l'opció recomanada (per exemple, el pla "Millor valor")
Estableix l'opció d'acord per defecte (s'accepten les condicions)
Guiar els usuaris cap a l'opció preferida
O sense valor per defecte:
Deixeu totes les opcions sense seleccionar, cosa que obliga els usuaris a fer una elecció activa. Perfecte per a preguntes que requereixen una selecció conscient.
✏️ Opció «Altres» amb entrada de text
Col·lecció de respostes personalitzades
Afegeix una opció "Altres" que revela una entrada de text quan es selecciona. Els usuaris poden especificar la seva pròpia resposta si cap de les opcions predefinides no encaixa.
Etiqueta personalitzable:
- Canvieu el text de l'etiqueta "Altres" perquè s'adapti a les vostres necessitats:
- "Altres (especifiqueu)"
- "Alguna cosa més"
- "Resposta personalitzada"
- "No llistat"
Com funciona:
Quan els usuaris seleccionen "Altres", apareix instantàniament un camp de text perquè puguin escriure la seva resposta personalitzada. S'envien tant la selecció "Altres" com el text.
Casos d'ús:
- "Com has sentit a parlar de nosaltres?" amb una font de referència personalitzada
- Preferència de producte amb opcions no llistades
- Categories de comentaris amb "Altres preocupacions"
- Qualsevol llista que no pugui cobrir totes les possibilitats
🔀 Lògica condicional
Visibilitat dinàmica del botó d'opció
Mostra o amaga els camps dels botons d'opció en funció dels valors d'altres formularis. Crea formularis intel·ligents que s'adaptin a les seleccions de l'usuari.
Regles de lògica avançada:
- Lògica I: s'han de complir totes les condicions
- Lògica O: qualsevol condició pot desencadenar l'acció
- 8 operadors: Igual a, No igual a, Més gran que, Més petit que, Conté, És buit i més
Casos d'ús:
- Mostra les opcions del producte només quan se selecciona el tipus de producte
- Mostra les preferències d'enviament quan el mètode d'enviament és igual a "Exprés"
- Amaga els plans de pagament quan el total de la comanda és inferior a 100 $
- Revela preguntes addicionals basades en la resposta inicial
🎯 Experiència d'usuari millorada
Funcions intel·ligents integrades:
- Aplicació de selecció única: només es pot seleccionar una opció alhora (comportament estàndard del botó d'opció)
- Validació obligatòria: feu que la selecció sigui obligatòria amb missatges d'error clars
- Navegació amb el teclat: les tecles de fletxa permeten moure's entre les opcions d'accessibilitat
- Classes CSS personalitzades: apliqueu estils personalitzats que coincideixin amb la vostra marca
- Suport d'accessibilitat: etiquetes ARIA, compatible amb lectors de pantalla
- Optimitzat per a mòbils: tàctil amb objectius de toc més grans
- Retroalimentació visual: indicació clara de l'opció seleccionada
- Text d'ajuda: afegeix descripcions per aclarir les opcions
Configuració senzilla en 3 passos
Prepareu el vostre camp de botons de ràdio en qüestió de minuts
Afegiu el camp Botons d'opció
Arrossegueu i deixeu anar el camp Botons d'opció de la secció Camps bàsics al formulari.
Afegeix les teves opcions
Escriviu les etiquetes de les opcions i feu clic a "Afegeix una opció" per crear la vostra llista. Reordeneu-les amb fletxes, editeu les etiquetes i els valors segons calgui.
Trieu Disseny i característiques
Seleccioneu l'estil de disseny (vertical, horitzontal o quadrícula), afegiu opcionalment l'opció "Altres" o "Cap de les anteriors" i definiu la selecció per defecte si ho desitgeu.
🎉 Això és tot! Els botons de ràdio estan llestos per a la selecció d'una sola opció.
Aplicacions del món real
Enquestes i comentaris
* Valoracions de satisfacció (de Molt satisfet a Molt insatisfet)
* Escales d'acord (Totalment d'acord fins a Totalment en desacord)
* Preguntes de freqüència (Diàriament, Setmanalment, Mensualment, Rarament, Mai)
* Preguntes de valoració (1-5 estrelles, Excel·lent a Deficient)
E-commerce
* Selecció de la mida del producte (Petita, Mitjana, Gran, XL)
* Preferències de color
* Opcions de mètode d'enviament
* Opcions d'embolicar regals
Formularis d’inscripció
* Selecció de gènere
* Opcions de rang d'edat
* Nivell d'experiència (Principiant, Intermedi, Avançat)
* Selecció del nivell de membre
Aplicacions empresarials
* Nivell de prioritat (Alt, Mitjà, Baix)
* Selecció de departament
* Preferència de contacte (correu electrònic, telèfon, SMS)
* Opcions de rang pressupostari
Educació i formació
* Selecció del nivell del curs
* Preferència de ritme d'aprenentatge
* Disponibilitat horària
* Tipus de certificació
Salut i benestar
* Selecció del tipus de cita
* Elecció de proveïdor d'assegurances
* Gravetat dels símptomes (lleu, moderada, greu)
* Preferència de consulta
Opcions de camp completes
Configuració bàsica
- Etiqueta del camp: la pregunta o el títol que es mostra a sobre dels botons d'opció
- Descripció/Text d'ajuda: guia addicional per als usuaris
- Camp obligatori: fes que la selecció sigui obligatòria
- Marcador de posició: no aplicable per a botons de ràdio
Maquetació i presentació
- Estil de disseny
- Vertical (apilat): un per línia
- Horitzontal (en línia): costat a costat
- Graella (2 columnes) – disseny equilibrat
Opcions del botó d'opció
- Afegeix opcions: crea la teva llista d'opcions
- Text a mostrar: què veuen els usuaris
- Valor: què s'envia amb el formulari
- Reordenar: moure les opcions amunt/avall
- Suprimeix – Elimina opcions
Selecció predeterminada
Valor seleccionat per defecte: preseleccioneu una opció o deixeu-la en blanc si no hi ha cap valor per defecte.
Opcions especials
- Afegeix l'opció "Altres": permet l'entrada de text personalitzada
- Etiqueta d'altra opció: personalitzeu el text "Altres" (per defecte: "Altres (especifiqueu)")
- Afegeix l'opció "Cap de les anteriors": afegeix una opció explícita de no selecció al final.
Característiques avançades
Ordre aleatori: mostra les opcions en ordre aleatori (útil per a enquestes per evitar biaixos d'ordre)
Lògica condicional
- Habilita la lògica condicional: mostra/amaga segons les condicions
- Tipus lògic
- Cal complir totes les condicions (I)
- Es pot complir qualsevol condició (O)
- Regles de condició
- Mostra/Amaga: Acció a realitzar
- Camp: quin camp cal comprovar
- Operador – Igual a, No és igual a, Conté, Més gran que, Menor que, És buit, No és buit
- Valor – Valor de comparació
- Condicions múltiples: afegeix regles il·limitades
altres Opcions
- Camp ocult: fes que el camp sigui invisible però inclou el valor seleccionat als enviaments
- Classes CSS personalitzades: aplica estils personalitzats
- Atributs d'accessibilitat: etiquetes i descripcions ARIA
Per què escollir el nostre camp de botons de ràdio?
✅ Dissenys flexibles – Disposicions verticals, horitzontals o en quadrícula
✅ Característiques de l'enquesta – Ordre aleatori per obtenir resultats imparcials
✅ Fàcil d'usar – Opció «Altres» per a respostes personalitzades
✅ Control complet – Opcions fàcils d'afegir, editar, reordenar i eliminar
✅ Valors predeterminats intel·ligents – Preseleccioneu les opcions comunes o recomanades
✅ Professional – «Cap de les anteriors» per a enquestes adequades
✅ Optimitzat per a mòbils – Tàctil amb objectius de toc perfectes
✅ Accessible – Navegació amb teclat i compatibilitat amb lectors de pantalla
✅ Totalment integrat – Funciona perfectament amb totes les funcions del formulari
Preguntes freqüents
P: Quina diferència hi ha entre els botons de ràdio i les caselles de selecció?
Els botons d'opció només permeten una selecció. Les caselles de selecció permeten diverses seleccions. Feu servir l'opció per a "seleccionar-ne un" i les caselles de selecció per a "seleccionar qualsevol".
P: Els usuaris poden canviar la seva selecció de ràdio?
Sí. Si seleccioneu un botó d'opció nou, es desselecciona automàticament l'anterior.
P: Quan hauria d'utilitzar el disseny vertical en comptes d'horitzontal?
Feu servir el disseny vertical per a llistes més llargues o etiquetes llargues, l'horitzontal per a conjunts curts de dues o tres opcions i el disseny de quadrícula per a grups d'opcions de mida mitjana.
P: Com funciona l'opció "Altres"?
Si seleccioneu "Altres", es mostra un camp de text on els usuaris escriuen una resposta personalitzada. S'envien tant la selecció com el text.
P: Què fa l'ordre aleatori?
Cada vegada que es carrega el formulari, l'ordre de les opcions canvia per reduir el biaix en les respostes.
P: Hauria de definir una selecció predeterminada?
Defineu-ne un si voleu accelerar la finalització o guiar els usuaris. Deixeu-ho en blanc quan necessiteu que facin una decisió intencionada.
P: Per a què serveix l'opció "Cap de les anteriors"?
Permet als usuaris indicar que no s'aplica cap opció de la llista, millorant la precisió i evitant respostes forçades.
P: Puc tenir un text de visualització i valors enviats diferents?
Sí. El text que es mostra es mostra als usuaris i el valor emmagatzemat als enviaments pot ser més net o més estructurat.
P: Com puc reordenar les opcions dels botons d'opció?
Feu servir les fletxes amunt i avall que hi ha al costat de cada opció per moure-les a l'ordre que preferiu.
P: Es poden exigir botons d'opció?
Sí. Activeu el "Camp obligatori" i els usuaris han de triar una opció abans d'enviar.
P: Els botons de ràdio funcionen al mòbil?
Sí. Utilitzen controls tàctils i s'apilen verticalment automàticament en pantalles petites.
P: Puc utilitzar lògica condicional amb botons d'opció?
Sí. Mostra o amaga els camps segons l'opció seleccionada mitjançant "Igual a" o condicions similars.
