Camp de casella de selecció
Recopila acords i seleccions múltiples amb facilitat. Des de simples caselles de selecció de sí/no fins a llistes de selecció múltiple amb "Selecciona-ho tot", controls mínims/màxims i dissenys intel·ligents, el camp Casella de selecció gestiona acords individuals i preguntes de selecció múltiple amb una validació potent i opcions fàcils d'utilitzar.
Dos modes per a cada necessitat de casella de selecció
Perfecte per:
Funcions potents per a cada cas d'ús
Dos modes de casella de selecció
Mode de casella de selecció única:
Una casella de selecció per a preguntes de sí/no, acords o opció d'inscripció. Perfecte per a l'acceptació de termes, subscripcions a butlletins i formularis de consentiment.
Casos d'ús:
- "Accepto els termes i condicions"
- "Subscriu-me al butlletí"
- "Sí, vull rebre actualitzacions"
- "Confirmo que aquesta informació és correcta"
Característiques:
- Text de l'etiqueta de la casella de selecció personalitzada
- Estat marcat/no marcat per defecte
- Valor enviat personalitzat (sí, 1, cert, etc.)
- Opció de validació obligatòria
Mode de caselles de selecció múltiples:
Múltiples opcions on els usuaris poden seleccionar diverses opcions. Perfecte per a preguntes de "Selecciona totes les que corresponguin", recopilació de preferències i enquestes de selecció múltiple.
Casos d'ús:
- «Quines característiques t'interessen?» (seleccions múltiples)
- "Seleccioneu els vostres mètodes de contacte preferits"
- "Tria tots els serveis que necessitis"
- "Quins temes t'interessen?" (marca diverses opcions)
Característiques:
- Opcions de casella de selecció il·limitades
- Tres estils de disseny
- Opció "Selecciona-ho tot"
- Límits de selecció mínims/màxims
- «Altres» amb entrada de text
- Opció exclusiva "Cap de les anteriors"
🎨 Tres opcions de disseny (mode múltiple)
Disseny vertical (apilat):
Les caselles de selecció apareixen una per línia, apilades verticalment. Disseny més llegible per a etiquetes d'opció més llargues.
El millor per:
- Text d'opció llarg
- 3-10 opcions
- Formularis orientats a mòbils
- Màxima llegibilitat
Disseny horitzontal (un al costat de l'altre):
Les caselles de selecció apareixen en una fila, una al costat de l'altra. Disseny compacte per a etiquetes curtes.
El millor per:
- 2-5 opcions curtes
- Formes compactes
- Dissenys d'escriptori
- Eficiència espacial
Disseny de quadrícula (diverses columnes):
Caselles de selecció disposades en una quadrícula de 2 columnes. Disseny equilibrat que estalvia espai alhora que manté la llegibilitat.
El millor per:
- 4-12 opcions
- Etiquetes de longitud mitjana
- Disseny equilibrat
- Aspecte professional
Comportament responsiu:
Tots els dissenys s'adapten automàticament a les pantalles dels mòbils, apilant-se quan cal per a una millor interacció tàctil.
✨ Opció “Selecciona-ho tot”
Selecció amb un sol clic:
Afegiu una casella de selecció especial "Selecciona-ho tot" a la part superior de la llista. Els usuaris poden marcar/desmarcar totes les opcions amb un sol clic.
Comportament intel·ligent:
- Comprova totes les opcions habituals simultàniament
- Desmarca tot quan es torna a fer clic
- Desmarca automàticament si alguna opció està desseleccionada
- Mostra un estat indeterminat quan algunes opcions (no totes) estan seleccionades
- Exclou "Cap de les anteriors" de seleccionar-ho tot
Perfecte per a:
- Llistes de caselles de selecció llargues (més de 5 opcions)
- Formularis on els usuaris sovint ho seleccionen tot
- Preguntes que diguin "Marqueu totes les que corresponguin"
- Permisos i selecció de funcions
Experiència d'usuari:
Estalvia temps en llistes llargues. Els usuaris poden seleccionar-ho tot i després desmarcar excepcions específiques.
✏️ Opció «Altres» amb entrada de text
Recopilació de respostes personalitzades:
Afegeix una casella de selecció "Altres" que revela un camp de text quan es selecciona. Els usuaris poden especificar la seva pròpia resposta si les opcions predefinides no encaixen.
Com funciona:
- La casella de selecció "Altres" apareix a la part inferior de la llista
- Quan està marcat, apareixerà el camp d'entrada de text
- Els usuaris escriuen una resposta personalitzada
- S'envien tant la selecció de la casella de selecció com el text
Casos d'ús:
- "Mètode de contacte preferit: ...Altres (especifiqueu)"
- "Interessos: ...Altres temes"
- "Com has sentit a parlar de nosaltres: ...Altra font"
- Qualsevol llista que no pugui co
Beneficis:
Captura respostes inesperades, proporciona flexibilitat, evita seleccions d'"ajust forçat" i millora la qualitat de les dades.
❌ Opció “Cap de les anteriors”
No selecció exclusiva:
Afegeix una opció "Cap de les anteriors" que desmarqui automàticament totes les altres seleccions en fer-hi clic.
Exclusivitat intel·ligent:
- Quan es marca "Cap", totes les altres opcions es desmarquen automàticament.
- Quan es marca qualsevol altra opció, "Cap" es desmarca automàticament.
- Proporciona una manera clara d'indicar que no s'apliquen seleccions.
- Evita seleccions contradictòries
Casos d'ús:
- Preguntes de preferència opcionals
- "Seleccioneu totes les al·lèrgies: ...Cap de les anteriors"
- Verificadors de qualificació
- Seleccions d'interessos
Per què incloure:
Evita l'abandonament del formulari, mostra exhaustivitat, proporciona una opció negativa explícita i millora la precisió de les dades.
📊 Controls de selecció mínims/màxims
Quantitat de selecció de control:
Estableix el nombre mínim i màxim de caselles de selecció que s'han de/es poden seleccionar.
Seleccions mínimes:
Requereix que els usuaris seleccionin com a mínim X opcions. El formulari no s'enviarà fins que no es compleixi el requisit.
Exemples:
- "Selecciona almenys 2 interessos" (Mín: 2)
- "Tria un mínim de 3 preferències" (Mín: 3)
- "Tria almenys 1 opció" (Mín: 1)
Seleccions màximes:
Limita els usuaris a seleccionar un màxim de X opcions. Les caselles de selecció es desactiven un cop s'ha arribat al límit.
Exemples:
- "Tria les 3 característiques principals" (Màxim: 3)
- "Seleccioneu fins a 5 serveis" (Màxim: 5)
- "No trieu més de 2 opcions" (Màxim: 2)
Comentaris clars:
Els usuaris veuen missatges de validació com ara "Seleccioneu almenys 2 opcions" o "Es permeten 3 seleccions com a màxim".
🔧 Gestió fàcil d'opcions
Control total sobre les opcions:
- Afegeix opcions: escriu i prem Intro o fes clic a "Afegeix opció". Crea llistes de caselles de selecció en segons.
- Opcions d'edició: actualitza el text que es mostra (el que veuen els usuaris) i els valors (el que s'envia) de manera independent.
- Marcat per defecte: preseleccioneu caselles de selecció específiques marcant la casella que hi ha al costat de cada opció.
- Opcions de reordenació: utilitzeu les fletxes amunt/avall per organitzar les caselles de selecció en perfecte ordre.
- Suprimeix opcions: elimina les opcions no desitjades amb un sol clic.
Display vs. Valor:
- Etiqueta: Què veuen els usuaris (per exemple, "Actualitzacions per correu electrònic")
- Valor: Què s'emmagatzema (per exemple, "actualitzacions_per_correu_electrònic")
Construcció a granel:
Afegiu diverses opcions ràpidament escrivint, prement Retorn, escrivint, prement Retorn: creació ràpida de llistes de caselles de selecció.
☑️ Funcions de casella de selecció única
Opcions de personalització:
Text de l'etiqueta de la casella de selecció:
El text que es mostra al costat de la casella de selecció. Feu-lo clar i específic (per exemple, "Accepto rebre correus electrònics de màrqueting").
Estat comprovat per defecte:
Marqueu prèviament la casella quan es carregui el formulari. Utilitzeu-ho amb precaució: els usuaris han de marcar conscientment les caselles d'acord.
Valor enviat personalitzat:
Defineix quin valor s'envia quan es marca (normalment "sí", "1" o "cert"). El valor per defecte és "sí".
Validació requerida:
Fes que la casella de selecció sigui obligatòria. Els usuaris l'han de marcar per enviar el formulari. Perfecte per als acords obligatoris.
🔀 Lògica condicional
Visibilitat de la casella de selecció dinàmica:
Mostra o amaga els camps de la casella de selecció en funció d'altres valors del formulari. Mostra les opcions només quan siguin rellevants.
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 caselles de selecció de "Preferències d'enviament" només quan "Requereix enviament" estigui marcat
Mostrar "Temes del butlletí" quan la casella de selecció de subscripció estigui marcada
Mostra "Serveis addicionals" quan el tipus de servei sigui igual a "Premium"
Amaga les "Opcions de descompte" quan el total de la comanda és inferior a 50 $
🎯 Experiència d'usuari millorada
Funcions intel·ligents integrades:
- Indicadors visuals: marqueu les caselles de selecció amb l'espaiat adequat
- Navegació amb teclat: canvieu fàcilment d'opcions mitjançant la tabulació
- Tàctil: grans objectius de toc per a mòbils
- Seleccions predeterminades: comproveu prèviament les opcions específiques
- Classes CSS personalitzades: apliqueu estils als grups de caselles de selecció
- Suport d'accessibilitat: etiquetes ARIA, compatible amb lectors de pantalla
- Optimitzat per a mòbils: mides de caselles de selecció perfectes per a tàctils
- Etiquetes clares: text llegible amb l'alineació correcta
- Validació obligatòria: esborra els missatges d'error
- Text d'ajuda: afegeix descripcions per a grups de caselles de selecció complexos
Configuració senzilla en 3 passos
Prepareu el vostre camp de casella de selecció en qüestió de minuts
Afegeix un camp de casella de selecció
Arrossegueu i deixeu anar el camp Casella de selecció de la secció Camps bàsics al formulari.
Trieu Mode
Seleccioneu "Casella de selecció única" per a preguntes de sí/no o "Caselles de selecció múltiples" per a opcions de selecció múltiple.
Configura Opcions
Per a un sol objecte: definiu l'etiqueta i el valor de la casella de selecció. Per a diversos objecte: afegiu opcions, trieu el disseny, activeu opcionalment les opcions "Selecciona-ho tot" o "Altres" i definiu les seleccions mínimes/màximes.
🎉 Això és tot! El camp de la casella de selecció està a punt amb la validació intel·ligent.
Aplicacions del món real
Acords i consentiment
* Acceptació dels termes i condicions
* Acords de política de privacitat
* Consentiment per correu electrònic
* Subscripcions a butlletins informatius
Enquestes i comentaris
* Preguntes que diuen "Seleccioneu totes les que corresponguin"
* Selecció de múltiples interessos
* Recopilació de preferències de funcions
* Opcions d'interès temàtic
E-commerce
* Selecció de característiques del producte
* Complements de servei
* Opcions d'enviament
* Preferències de notificació
Formularis d’inscripció
* Preferències de comunicació
* Categories d'interès
* Configuració de permisos
* Selecció d'accés a funcions
Aplicacions
* Verificadors de qualificació
* Seleccions d'habilitats
* Àrees d'interès
* Opcions de disponibilitat
Configuració i preferències
* Configuració del compte
* Opcions de privadesa
* Opcions de notificació
* Activa/desactiva les funcions
Opcions de camp completes
Configuració bàsica
- Etiqueta del camp: la pregunta o el títol que es mostra a sobre de les caselles de selecció.
- Descripció/Text d'ajuda: guia addicional per als usuaris
- Camp obligatori: marca la casella de selecció obligatòriament
- Marcador de posició: no aplicable per a caselles de selecció
Mode de casella de selecció
Trieu el tipus de mode:
- Casella de selecció única: pregunta de sí/no, acord o opció (una casella de selecció)
- Caselles de selecció múltiples: opcions de selecció múltiple (caselles de selecció múltiples)
Opcions de casella de selecció individual
- Text al costat de la casella de selecció: etiqueta que es mostra al costat de la casella de selecció (per exemple, "Accepto els termes")
- Inici marcat: casella de selecció prèviament marcada quan es carrega el formulari
- Valor quan està marcat: el valor de les dades s'emmagatzema quan està marcat (per defecte: "sí")
Opcions de caselles de selecció múltiples
Estil de disseny:
- Apilat (un per línia) – Disposició vertical
- Un al costat de l'altre (en fila) – Disposició horitzontal
- Graella (diverses columnes): disseny de graella de 2 columnes
Opcions de la casella de selecció:
Crea la teva llista d'opcions:
- Text a mostrar: el que veuen els usuaris (per exemple, "Correu electrònic")
- Valor: què s'envia (per exemple, "correu electrònic")
- Marcat per defecte: preselecciona opcions específiques
- Reordenar: moure les opcions amunt/avall
- Suprimeix – Elimina opcions
Opcions especials:
- Afegeix l'opció "Selecciona-ho tot": afegeix una casella de selecció a la part superior que selecciona/desselecciona totes les opcions.
- Afegeix l'opció "Altres" amb un quadre de text: afegeix l'opció "Altres" amb un camp de text per a respostes personalitzades.
- Afegeix l'opció "Cap de les anteriors": afegeix una opció exclusiva que desmarca totes les altres quan es selecciona.
Límits de selecció:
- Seleccions mínimes requerides: el nombre mínim de caselles de selecció que s'han de marcar (per exemple, 2)
- Seleccions màximes permeses: la majoria de caselles de selecció que es poden seleccionar (per exemple, 5)
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
Opcions avançades
- Camp ocult: fes que el camp sigui invisible (no recomanat per a caselles de selecció)
- Classes CSS personalitzades: aplica estils personalitzats
- Atributs d'accessibilitat: etiquetes ARIA per a lectors de pantalla
Per què escollir el nostre camp de casella de selecció?
✅ Dos modes – Una sola casella de selecció o diverses caselles de selecció en un tipus de camp
✅ Dissenys flexibles – Disposicions verticals, horitzontals o en quadrícula
✅ Selecciona tot – Selecció amb un sol clic per a més comoditat
✅ Una altra opció – Entrada de text per a respostes personalitzades
✅ Cap opció – Elecció exclusiva sense selecció
✅ Límits mínims/màxims – Quantitat de selecció de control
✅ Fàcil gestió – Afegir, editar, reordenar i eliminar opcions sense esforç
✅ Fàcil d'usar – Etiquetes clares, espaiament adequat, fàcils de tocar
✅ Totalment integrat – Funciona perfectament amb totes les funcions del formulari
Preguntes freqüents
P: Quina diferència hi ha entre els modes de casella de selecció única i múltiple?
El mode únic mostra una casella de selecció per a decisions de sí/no. El mode múltiple mostra diverses caselles de selecció on els usuaris poden seleccionar més d'una opció.
P: Els usuaris poden seleccionar totes les caselles de selecció alhora?
Sí. Activeu l'opció "Selecciona-ho tot" per afegir una casella de selecció que marqui o desmarqui totes les opcions amb un sol clic.
P: Com funcionen les seleccions mínimes/màximes?
El mínim garanteix que els usuaris seleccionin com a mínim un cert nombre d'opcions. El màxim limita quantes caselles de selecció poden triar.
P: Què fa l'opció "Altres"?
Afegeix una casella de selecció addicional anomenada "Altres". Quan es selecciona, apareix un camp de text perquè els usuaris puguin introduir una resposta personalitzada.
P: Com funciona "Cap de les anteriors"?
Actua com una opció exclusiva. Si es selecciona, totes les altres caselles de selecció es desactiven. Si es marca qualsevol altra opció, l'opció "Cap" es desactiva automàticament.
P: Puc preseleccionar certes caselles de selecció?
Sí. Per al mode únic, activeu "Inicia marcat". Per al mode múltiple, marqueu la casella de selecció petita que hi ha al costat de cada opció que voleu que estigui seleccionada per defecte.
P: Hauria de marcar prèviament les caselles de l'acord?
No. Per a les polítiques, els termes i el consentiment, els usuaris han de marcar la casella ells mateixos.
P: Puc canviar l'ordre de les caselles de selecció?
Sí. Feu servir les fletxes amunt i avall que hi ha al costat de cada opció per reordenar-les com vulgueu.
P: Quina diferència hi ha entre el text que es mostra i el valor?
El text que es mostra és el que veuen els usuaris. El valor és el que s'emmagatzema a la base de dades per obtenir dades netes i coherents.
P: Puc utilitzar lògica condicional amb caselles de selecció?
Sí. Activeu altres camps en funció de les seleccions mitjançant operadors com ara "Igual a", "Està buit" o "No està buit".
P: Com puc crear una casella de selecció obligatòria?
Activeu "Camp obligatori". Per al mode únic, cal marcar la casella. Per al mode múltiple, els usuaris han de seleccionar com a mínim una opció o complir el requisit mínim.
P: Els usuaris poden canviar les seleccions després de comprovar-ho?
Sí. Poden marcar o desmarcar qualsevol opció lliurement abans d'enviar el formulari. També es pot activar "Selecciona-ho tot" en qualsevol moment.
