Kontrollkästchenfeld
Erfassen Sie Zustimmungen und Mehrfachauswahlen mühelos. Von einfachen Ja/Nein-Kontrollkästchen bis hin zu Mehrfachauswahllisten mit „Alle auswählen“, Min-/Max-Steuerelementen und intelligenten Layouts – das Kontrollkästchenfeld verarbeitet Einzelzustimmungen und Mehrfachauswahlfragen mit leistungsstarker Validierung und benutzerfreundlichen Optionen.
Zwei Modi für jedes Kontrollkästchen erforderlich
Perfekt für:
Leistungsstarke Funktionen für jeden Anwendungsfall
Zwei Kontrollkästchenmodi
Einzel-Kontrollkästchen-Modus:
Ein Kontrollkästchen für Ja/Nein-Fragen, Vereinbarungen oder Anmeldungen. Ideal für die Annahme von Nutzungsbedingungen, Newsletter-Abonnements und Einwilligungsformulare.
Anwendungsfälle:
- „Ich stimme den Allgemeinen Geschäftsbedingungen zu.“
- „Abonniere mich für den Newsletter“
- „Ja, ich möchte über Neuigkeiten informiert werden.“
- „Ich bestätige, dass diese Informationen korrekt sind.“
Merkmale:
- Benutzerdefinierter Text für die Kontrollkästchenbeschriftung
- Standardmäßiger Status: aktiviert/deaktiviert
- Benutzerdefinierter Wert (ja, 1, wahr usw.)
- Erforderliche Validierungsoption
Modus mit mehreren Kontrollkästchen:
Mehrere Optionen, bei denen Nutzer mehrere Antworten auswählen können. Ideal für „Mehrfachauswahl“-Fragen, die Erfassung von Präferenzen und Umfragen mit Mehrfachauswahl.
Anwendungsfälle:
- „Welche Funktionen interessieren Sie?“ (Mehrfachauswahl möglich)
- „Wählen Sie Ihre bevorzugten Kontaktmethoden aus“
- „Wählen Sie alle benötigten Dienstleistungen aus.“
- „Welche Themen interessieren Sie?“ (Mehrfachauswahl möglich)
Merkmale:
- Unbegrenzte Auswahl an Kontrollkästchen
- Drei Layoutstile
- Option „Alle auswählen“
- Mindest-/Maximalauswahlgrenzen
- „Sonstiges“ mit Texteingabe
- Exklusive Option „Keine der oben genannten“
🎨 Drei Layoutoptionen (Mehrfachmodus)
Vertikales (gestapeltes) Layout:
Die Kontrollkästchen erscheinen einzeln in einer Zeile, vertikal gestapelt. Dies ist die übersichtlichste Anordnung für längere Optionsbezeichnungen.
Eignung:
- Langer Optionstext
- 3-10 Optionen
- Mobile-First-Formulare
- Maximale Lesbarkeit
Horizontales (nebeneinander) Layout:
Die Kontrollkästchen erscheinen nebeneinander in einer Reihe. Kompaktes Layout für kurze Beschriftungen.
Eignung:
- 2-5 kurze Optionen
- Kompakte Formen
- Desktop-Layouts
- Raumeffizienz
Rasterlayout (mehrere Spalten):
Kontrollkästchen in einem zweispaltigen Raster angeordnet. Ausgewogenes Layout, das Platz spart und gleichzeitig die Lesbarkeit gewährleistet.
Eignung:
- 4-12 Optionen
- Etiketten mittlerer Länge
- Ausgewogenes Design
- Professionelles Aussehen
Reaktionsverhalten:
Alle Layouts passen sich automatisch an mobile Bildschirme an und werden bei Bedarf für eine bessere Touch-Interaktion gestapelt.
✨ Option „Alle auswählen“
Auswahl mit einem Klick:
Fügen Sie oben in Ihrer Liste ein spezielles Kontrollkästchen „Alle auswählen“ hinzu. Benutzer können so alle Optionen mit einem Klick aktivieren/deaktivieren.
Intelligentes Verhalten:
- Prüft alle regulären Optionen gleichzeitig
- Beim erneuten Anklicken werden alle Häkchen entfernt.
- Wird automatisch deaktiviert, wenn eine Option abgewählt wird.
- Zeigt einen unbestimmten Zustand an, wenn einige (nicht alle) Optionen ausgewählt sind.
- „Keine der oben genannten“ Optionen ist von der Auswahl aller Optionen ausgeschlossen.
Perfekt geeignet für:
- Lange Kontrollkästchenlisten (5+ Optionen)
- Formulare, in denen Benutzer häufig alles auswählen
- „Mehrere Antworten möglich“-Fragen
- Berechtigungs- und Funktionsauswahl
Benutzererfahrung:
Spart Zeit bei langen Listen. Benutzer können alle auswählen und dann bestimmte Ausnahmen abwählen.
✏️ Option „Sonstiges“ mit Texteingabe
Benutzerdefinierte Antwortsammlung:
Fügen Sie ein Kontrollkästchen „Sonstiges“ hinzu, das bei Auswahl ein Textfeld anzeigt. Benutzer können ihre eigene Antwort angeben, falls die voreingestellten Optionen nicht passen.
So funktioniert es:
- Das Kontrollkästchen „Sonstige“ erscheint am Ende der Liste.
- Wenn das Kontrollkästchen aktiviert ist, erscheint ein Texteingabefeld.
- Benutzer geben eine benutzerdefinierte Antwort ein
- Sowohl die Auswahl im Kontrollkästchen als auch der Text werden übermittelt.
Anwendungsfälle:
- „Bevorzugte Kontaktmethode: …Sonstige (bitte angeben)“
- „Interessen: …Andere Themen“
- „Wie haben Sie von uns erfahren? …Andere Quelle“
- Jede Liste, die nicht zusammen
Vorteile:
Erfasst unerwartete Antworten, bietet Flexibilität, verhindert erzwungene Auswahlen und verbessert die Datenqualität.
❌ Option „Keine der oben genannten“
Exklusive Nichtauswahl:
Fügen Sie eine Option „Keine der oben genannten“ hinzu, die beim Anklicken automatisch alle anderen Auswahlen deaktiviert.
Intelligente Exklusivität:
- Wenn „Keine“ ausgewählt ist, werden alle anderen Optionen automatisch deaktiviert.
- Wenn eine andere Option ausgewählt ist, wird „Keine“ automatisch deaktiviert.
- Bietet eine klare Möglichkeit anzugeben, dass keine Auswahl zutrifft.
- Verhindert widersprüchliche Auswahlen
Anwendungsfälle:
- Optionale Präferenzfragen
- „Alle Allergien auswählen: …Keine der oben genannten“
- Qualifikationsprüfer
- Interessensauswahl
Warum einbeziehen?
Verhindert das Abbrechen des Formulars, zeigt Gründlichkeit, bietet eine explizite Negativoption und verbessert die Datengenauigkeit.
📊 Min/Max-Auswahlsteuerung
Auswahlmenge steuern:
Legen Sie die Mindest- und Höchstanzahl der Kontrollkästchen fest, die ausgewählt werden müssen/können.
Mindestauswahl:
Benutzer müssen mindestens X Optionen auswählen. Das Formular wird erst abgeschickt, wenn diese Voraussetzung erfüllt ist.
Beispiele:
- „Wählen Sie mindestens 2 Interessen aus“ (Mindestanzahl: 2)
- „Wählen Sie mindestens 3 Präferenzen aus“ (Mindestanzahl: 3)
- „Wählen Sie mindestens 1 Option aus“ (Mindestanzahl: 1)
Maximale Auswahl:
Benutzer können maximal X Optionen auswählen. Die Kontrollkästchen werden deaktiviert, sobald das Limit erreicht ist.
Beispiele:
- „Wählen Sie Ihre 3 wichtigsten Funktionen“ (Maximal 3)
- „Wählen Sie bis zu 5 Dienste aus“ (Max.: 5)
- „Wählen Sie maximal 2 Optionen aus“ (Max: 2)
Klares Feedback:
Den Nutzern werden Bestätigungsmeldungen angezeigt, wie z. B. „Bitte wählen Sie mindestens 2 Optionen aus“ oder „Maximal 3 Auswahlen sind zulässig“.
🔧 Einfache Optionsverwaltung
Volle Kontrolle über die Entscheidungen:
- Optionen hinzufügen – Geben Sie den Namen ein und drücken Sie die Eingabetaste oder klicken Sie auf „Option hinzufügen“. Erstellen Sie Kontrollkästchenlisten in Sekundenschnelle.
- Bearbeitungsoptionen – Anzeigetext (was Benutzer sehen) und Werte (was übermittelt wird) unabhängig voneinander aktualisieren.
- Standardmäßig ausgewählt – Bestimmte Kontrollkästchen werden vorausgewählt, indem das Kästchen neben der jeweiligen Option markiert wird.
- Optionen zum Neuanordnen – Verwenden Sie die Auf-/Ab-Pfeile, um die Kontrollkästchen in die perfekte Reihenfolge zu bringen.
- Optionen löschen – Unerwünschte Optionen mit einem Klick entfernen.
Anzeige vs. Wert:
- Bezeichnung: Was Benutzer sehen (z. B. „E-Mail-Benachrichtigungen“)
- Wert: Was gespeichert wird (z. B. „email_updates“)
Massenbebauung:
Mehrere Optionen schnell hinzufügen durch Tippen, Drücken der Eingabetaste, Tippen, Drücken der Eingabetaste – schnelle Erstellung von Kontrollkästchenlisten.
☑️ Funktionen für einzelne Kontrollkästchen
Anpassungsoptionen:
Text der Kontrollkästchenbeschriftung:
Der Text neben dem Kontrollkästchen sollte klar und präzise sein (z. B. „Ich bin damit einverstanden, Marketing-E-Mails zu erhalten“).
Standardmäßig geprüfter Status:
Aktivieren Sie das Kontrollkästchen beim Laden des Formulars. Gehen Sie dabei sorgfältig vor – Benutzer sollten die Zustimmungsfelder bewusst ankreuzen.
Benutzerdefinierter Wert:
Legen Sie fest, welcher Wert beim Aktivieren übermittelt wird (typischerweise „ja“, „1“ oder „wahr“). Standardwert ist „ja“.
Erforderliche Validierung:
Kontrollkästchen als Pflichtfeld festlegen. Nutzer müssen es ankreuzen, um das Formular abzusenden. Ideal für erforderliche Vereinbarungen.
🔀 Bedingte Logik
Dynamische Kontrollkästchen-Sichtbarkeit:
Kontrollkästchenfelder werden abhängig von anderen Formularwerten ein- oder ausgeblendet. Optionen werden nur angezeigt, wenn sie relevant sind.
Erweiterte Logikregeln:
UND-Logik – Alle Bedingungen müssen erfüllt sein
ODER-Logik – Jede Bedingung kann die Aktion auslösen
8 Operatoren – Gleich, Ungleich, Größer als, Kleiner als, Enthält, Ist leer und mehr
Anwendungsfälle:
Die Kontrollkästchen für die „Versandpräferenzen“ werden nur angezeigt, wenn „Versand erforderlich“ ausgewählt ist.
„Newsletter-Themen“ anzeigen, wenn das Kontrollkästchen für das Abonnement aktiviert ist
„Zusätzliche Services“ anzeigen, wenn der Servicetyp „Premium“ entspricht.
„Rabattoptionen“ ausblenden, wenn der Bestellwert unter 50 $ liegt.
🎯 Verbesserte Benutzererfahrung
Intelligente Funktionen integriert:
- Visuelle Indikatoren – Deutliche Kontrollkästchen mit ausreichendem Abstand
- Tastaturnavigation – Einfach mit der Tabulatortaste durch die Optionen navigieren
- Touchscreen-freundlich – Große Tippflächen für Mobilgeräte
- Standardauswahl – Bestimmte Optionen vorauswählen
- Benutzerdefinierte CSS-Klassen – Formatierung auf Kontrollkästchengruppen anwenden
- Unterstützung für Barrierefreiheit – ARIA-Labels, kompatibel mit Bildschirmleseprogrammen
- Für Mobilgeräte optimiert – Perfekte Checkbox-Größen für Touch-Bedienung
- Klare Beschriftungen – Gut lesbarer Text mit korrekter Ausrichtung
- Erforderliche Validierung – Klare Fehlermeldungen
- Hilfetext – Beschreibungen für komplexe Kontrollkästchengruppen hinzufügen
Einfache Einrichtung in 3 Schritten
Bereiten Sie Ihr Kontrollkästchenfeld in wenigen Minuten vor.
Kontrollkästchenfeld hinzufügen
Ziehen Sie das Kontrollkästchenfeld aus dem Abschnitt „Basisfelder“ per Drag & Drop in Ihr Formular.
Wähle Modus
Wählen Sie „Einzelnes Kontrollkästchen“ für Ja/Nein-Fragen oder „Mehrere Kontrollkästchen“ für Mehrfachauswahloptionen.
Optionen konfigurieren
Für einzelne Kontrollkästchen: Beschriftung und Wert festlegen. Für mehrere Kontrollkästchen: Optionen hinzufügen, Layout auswählen, optional „Alle auswählen“ oder „Andere“ aktivieren und Mindest-/Maximalauswahl festlegen.
:-) Das war's! Ihr Kontrollkästchenfeld ist mit intelligenter Validierung einsatzbereit.
Anwendungen aus der realen Welt
Vereinbarungen und Zustimmung
* Annahme der Allgemeinen Geschäftsbedingungen
* Datenschutzrichtlinienvereinbarungen
* E-Mail-Einwilligungserklärungen
* Newsletter-Abonnements
Umfragen & Feedback
* Fragen „Mehrfachauswahl möglich“
* Mehrfache Zinsauswahl
* Sammlung von Funktionspräferenzen
* Themenauswahlmöglichkeiten
E-Commerce
* Auswahl der Produktmerkmale
* Service-Add-ons
* Versandoptionen
* Benachrichtigungseinstellungen
Anmeldeformulare
* Kommunikationspräferenzen
* Interessenkategorien
* Berechtigungseinstellungen
* Auswahl des Funktionszugriffs
Anwendungen
* Qualifikationsprüfer
* Auswahl der Fähigkeiten
* Interessengebiete
* Verfügbarkeitsoptionen
Einstellungen und Präferenzen
* Kontoeinstellungen
* Datenschutzoptionen
* Benachrichtigungsoptionen
* Funktionsumschaltung
Feldoptionen ausfüllen
Grundlegende Einstellung
- Feldbezeichnung – Die Frage oder der Titel, der über den Kontrollkästchen angezeigt wird
- Beschreibung/Hilfetext – Zusätzliche Hinweise für Benutzer
- Pflichtfeld – Kontrollkästchen als Pflichtfeld festlegen
- Platzhalter – Nicht anwendbar für Kontrollkästchen
Kontrollkästchen-Modus
Modus auswählen:
- Einzelnes Kontrollkästchen – Ja/Nein-Frage, Zustimmung oder Opt-in (ein Kontrollkästchen)
- Mehrere Kontrollkästchen – Mehrfachauswahloptionen (mehrere Kontrollkästchen)
Optionen mit einzelnen Kontrollkästchen
- Text neben dem Kontrollkästchen – Beschriftung neben dem Kontrollkästchen (z. B. „Ich stimme den Bedingungen zu“)
- Start Checked – Kontrollkästchen ist beim Laden des Formulars vorausgewählt.
- Wert bei Auswahl – Gespeicherter Datenwert, wenn die Option ausgewählt ist (Standard: „ja“)
Mehrere Kontrollkästchen-Optionen
Layoutstil:
- Gestapelt (eines pro Zeile) – Vertikale Anordnung
- Nebeneinander (in einer Reihe) – Horizontale Anordnung
- Raster (mehrere Spalten) – 2-spaltiges Rasterlayout
Kontrollkästchenoptionen:
Erstellen Sie Ihre Auswahlliste:
- Anzeigetext – Was Benutzer sehen (z. B. „E-Mail“)
- Wert – Was übermittelt wird (z. B. „E-Mail“)
- Standardmäßig ausgewählt – Bestimmte Optionen vorauswählen
- Neu anordnen – Optionen nach oben/unten verschieben
- Löschen – Optionen entfernen
Sonderoptionen:
- Option „Alle auswählen“ hinzufügen – Fügt oben ein Kontrollkästchen hinzu, mit dem alle Optionen ausgewählt/abgewählt werden können.
- Option „Sonstiges“ mit Textfeld hinzufügen – Fügt die Option „Sonstiges“ mit einem Textfeld für benutzerdefinierte Antworten hinzu
- Option „Keine der oben genannten“ hinzufügen – Fügt eine exklusive Option hinzu, die bei Auswahl alle anderen Optionen deaktiviert.
Auswahlgrenzen:
- Mindestanzahl erforderlicher Auswahlen – Mindestanzahl der Kontrollkästchen, die ausgewählt werden müssen (z. B. 2)
- Maximal zulässige Auswahlen – Die maximale Anzahl an Kontrollkästchen, die ausgewählt werden können (z. B. 5).
Bedingte Logik
- Bedingte Logik aktivieren – Ein-/Ausblenden basierend auf Bedingungen
- Logiktyp
- Alle Bedingungen müssen erfüllt sein (UND)
- Jede Bedingung kann erfüllt sein (ODER)
- Bedingungsregeln
- Anzeigen/Ausblenden – Zu ergreifende Maßnahmen
- Feld – Welches Feld soll geprüft werden?
- Operator – Gleich, Ungleich, Enthält, Größer als, Kleiner als, Ist leer, Ist nicht leer
- Wert – Vergleichswert
- Mehrere Bedingungen – Unbegrenzt viele Regeln hinzufügen
Erweiterte Optionen
- Verstecktes Feld – Feld unsichtbar machen (nicht empfohlen für Kontrollkästchen)
- Benutzerdefinierte CSS-Klassen – Benutzerdefiniertes Styling anwenden
- Barrierefreiheitsattribute – ARIA-Bezeichnungen für Bildschirmlesegeräte
Warum sollten Sie sich für unser Kontrollkästchenfeld entscheiden?
✅ Zwei Modi – Einzelnes Kontrollkästchen oder mehrere Kontrollkästchen in einem Feldtyp
✅ Flexible Layouts – Vertikale, horizontale oder Rasteranordnungen
✅ Alle auswählen – Auswahl mit einem Klick für mehr Komfort
✅ Andere Option – Texteingabe für benutzerdefinierte Antworten
✅ Keine Option – Exklusive Nichtauswahl
✅ Min./Max.-Grenzen – Auswahlmenge steuern
✅ Einfaches Management – Optionen mühelos hinzufügen, bearbeiten, neu anordnen und löschen
✅ Anwenderfreundlich – Klare Beschriftungen, ausreichender Abstand, berührungsfreundlich
✅ Voll Integriert – Funktioniert nahtlos mit allen Formularfunktionen
Häufig gestellte Fragen
F: Worin besteht der Unterschied zwischen dem Einzel- und dem Mehrfach-Kontrollkästchenmodus?
Im Einzelmodus wird ein Kontrollkästchen für Ja/Nein-Entscheidungen angezeigt. Im Mehrfachmodus werden mehrere Kontrollkästchen angezeigt, in denen Benutzer mehr als eine Option auswählen können.
F: Können Benutzer alle Kontrollkästchen gleichzeitig auswählen?
Ja. Aktivieren Sie die Option „Alle auswählen“, um ein Kontrollkästchen hinzuzufügen, mit dem Sie alle Optionen mit einem Klick auswählen oder abwählen können.
F: Wie funktionieren Min-/Max-Auswahlen?
Die Option „Minimum“ stellt sicher, dass Benutzer mindestens eine bestimmte Anzahl an Optionen auswählen. Die Option „Maximum“ begrenzt die Anzahl der auswählbaren Kontrollkästchen.
F: Was bewirkt die Option „Sonstiges“?
Es fügt ein zusätzliches Kontrollkästchen mit der Bezeichnung „Sonstiges“ hinzu. Nach Auswahl dieses Kontrollkästchens erscheint ein Textfeld, in dem Benutzer eine individuelle Antwort eingeben können.
F: Wie funktioniert „Keine der oben genannten Optionen“?
Diese Option dient als exklusive Auswahlmöglichkeit. Wenn sie ausgewählt ist, werden alle anderen Kontrollkästchen deaktiviert. Wenn eine andere Option ausgewählt ist, wird die Option „Keine“ automatisch deaktiviert.
F: Kann ich bestimmte Kontrollkästchen vorauswählen?
Ja. Im Einzelmodus aktivieren Sie „Ausgewählte Optionen starten“. Im Mehrfachmodus markieren Sie die kleinen Kontrollkästchen neben den Optionen, die standardmäßig ausgewählt sein sollen.
F: Soll ich die Kästchen für die Vereinbarung vorab ankreuzen?
Nein. Bei Richtlinien, Bedingungen und Einwilligungserklärungen müssen die Nutzer die entsprechenden Kästchen aktiv selbst ankreuzen.
F: Kann ich die Reihenfolge der Kontrollkästchen ändern?
Ja. Verwenden Sie die Auf- und Abwärtspfeile neben jeder Option, um diese nach Belieben neu anzuordnen.
F: Worin besteht der Unterschied zwischen Anzeigetext und Wert?
Der Anzeigetext ist das, was die Benutzer sehen. Die Werte hingegen werden in Ihrer Datenbank gespeichert, um saubere und konsistente Daten zu gewährleisten.
F: Kann ich bedingte Logik mit Kontrollkästchen verwenden?
Ja. Andere Felder können basierend auf den Auswahlen mithilfe von Operatoren wie „Gleich“, „Ist leer“ oder „Ist nicht leer“ ausgelöst werden.
F: Wie erstelle ich ein Pflichtfeld?
Aktivieren Sie „Pflichtfeld“. Im Einzelmodus muss das Kontrollkästchen aktiviert sein. Im Mehrfachmodus müssen Benutzer mindestens eine Option auswählen oder Ihre Mindestanforderung erfüllen.
F: Können Benutzer ihre Auswahl nach dem Prüfen noch ändern?
Ja. Sie können vor dem Absenden des Formulars beliebige Optionen auswählen oder abwählen. Die Option „Alle auswählen“ kann jederzeit deaktiviert oder deaktiviert werden.
