Checkbox & Radio Button – Auswahlfelder im UI-Design

Checkbox und Radio Button sind Formular-Auswahlfelder: Checkboxen erlauben die gleichzeitige Auswahl mehrerer Optionen, Radio Buttons beschränken die Auswahl auf genau eine Option aus einer Gruppe.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Kontrollkästchen, Auswahlfeld, Selection Control, Option Button (veraltet für Radio Button)

Was ist Checkbox & Radio Button?

Beide Komponenten zählen zu den Selection Controls – UI-Elemente, mit denen Nutzer aus einer Menge von Optionen wählen. Sie erscheinen klassisch in Formularen, Einstellungsmenüs, Filtersystemen und Onboarding-Flows. Der wesentliche Unterschied liegt in der Auswahllogik: Checkboxen sind unabhängig voneinander, Radio Buttons sind als Gruppe miteinander verbunden.

Erklärung

Checkbox – Mehrfachauswahl

Eine Checkbox ist ein quadratisches Element mit drei möglichen visuellen Zuständen:

• Unchecked: Leeres Kästchen
• Checked: Häkchen (✓) im Kästchen, oft mit Hintergrundfarbe
• Indeterminate: Strich (–) im Kästchen – zeigt an, dass eine Untergruppe teilweise ausgewählt ist (z. B. „Alle auswählen" wenn nur manche Unterelemente aktiviert sind)

Typische Einsatzgebiete: AGBs akzeptieren, Filterauswahl (mehrere Kategorien gleichzeitig), Aufgabenlisten, Einstellungen mit unabhängigen Optionen.

Radio Button – Einzelauswahl

Ein Radio Button ist ein kreisförmiges Element. Innerhalb einer Gruppe kann immer nur eine Option aktiv sein – die Auswahl einer neuen Option deaktiviert automatisch die vorherige.

Typische Einsatzgebiete: Zahlungsmethode wählen, Lieferoption auswählen, Geschlecht/Anrede auswählen, Bewertungsskalen.

States (Zustände) – beide Komponenten

Anatomie

Beide Komponenten bestehen aus: Control (das quadratische/runde Element), Label (Beschriftung rechts oder links), optionalem Helper Text (Zusatzinformation unter dem Label). Die klickbare Fläche sollte das gesamte Control-Label-Paar umfassen, nicht nur das kleine Symbol.

Accessibility (WCAG 2.1)

• <input type="checkbox"> und <input type="radio"> verwenden – kein Custom-Element ohne ARIA
• Radio Buttons müssen in <fieldset> mit <legend> gruppiert werden
• name-Attribut verbindet Radio Buttons zu einer Gruppe
• Klickbare Fläche: mindestens 44 × 44 px – das Label muss klickbar sein (<label for="id">)
• Fehler: aria-invalid="true" und aria-describedby auf die Fehlermeldung
• Indeterminate-State: per JavaScript element.indeterminate = true setzen

Beispiele

1. Gmail – Mehrfachauswahl: Das Kästchen links jeder E-Mail ist eine Checkbox. Aktiviert man alle Checkboxen einer Seite, zeigt die „Alle auswählen"-Checkbox oben den Indeterminate-State (–), wenn nur ein Teil ausgewählt ist.
2. Booking.com – Filter: Die Sternebewertungs-Filter bei Hotelsuchen sind Checkboxen – mehrere Sternekategorien gleichzeitig filterbar. Zahlungsmethoden hingegen sind Radio Buttons.
3. Mobile vs. Desktop: Touch-Oberflächen benötigen größere Tap-Targets. Material Design empfiehlt 48 × 48 px. iOS-Einstellungen nutzen oft Toggle Switches statt Checkboxen – kultureller Unterschied im Designsystem.
4. Accessibility Best Practice: Amazon nutzt <fieldset>/<legend> korrekt für Versandoptionen als Radio Button Gruppe – Screenreader liest „Lieferoption: Standard, Expresslieferung, Abholung" als zusammenhängende Gruppe vor.
5. Häufiger Fehler: Radio Buttons für unabhängige Optionen verwenden (z. B. „Ja" und „Nein" gleichzeitig aktivierbar sein sollen) – dafür sind Checkboxen richtig. Oder: Checkboxen statt Radio Buttons für gegenseitig ausschließende Optionen (z. B. Geschlecht) einsetzen.

In der Praxis

Figma: Checkbox und Radio Button als Komponenten mit Variants für alle States und Boolean-Property isChecked. Das Label als separaten Text-Layer im Auto Layout verbinden, damit die klickbare Fläche korrekt dargestellt wird. Indeterminate als eigene Variant anlegen.

HTML/CSS-Grundstruktur: ```html <!-- Checkbox Gruppe --> <div class="form-group"> <label><input type="checkbox" name="interests" value="design"> UX/UI Design</label> <label><input type="checkbox" name="interests" value="coding"> Webentwicklung</label> </div>

<!-- Radio Button Gruppe --> <fieldset> <legend>Bevorzugte Zahlungsmethode</legend> <label><input type="radio" name="payment" value="card"> Kreditkarte</label> <label><input type="radio" name="payment" value="paypal"> PayPal</label> <label><input type="radio" name="payment" value="invoice"> Rechnung</label> </fieldset> ```

Vergleich & Abgrenzung

Die entscheidende Frage: Können mehrere Optionen gleichzeitig gelten? Ja → Checkbox. Nein → Radio Button. Sofortige Wirkung ohne Bestätigung nötig? → Toggle Switch.

Häufige Fragen (FAQ)

Ab wie vielen Optionen sollte ich statt Radio Buttons ein Dropdown verwenden? Als Faustregel gilt: Bei 2–5 Optionen sind Radio Buttons übersichtlicher (alle Optionen sofort sichtbar). Ab 6 Optionen oder auf kleinen Screens ist ein Dropdown platzsparender. Bei nur 2 Optionen (Ja/Nein) ist oft ein Toggle Switch oder ein einzelner Checkbox die elegantere Lösung.

Wie gestalte ich Custom Checkboxen barrierefrei? Das native <input type="checkbox"> ist visuell schwer zu stylen, aber semantisch korrekt. Am besten: natives Input visuell verstecken (opacity: 0, nicht display: none) und ein Custom-Element via CSS :checked-Pseudoklasse gestalten. Das Input bleibt im DOM und ist für Screenreader und Tastaturnavigation weiterhin erreichbar.

Verwandte Einträge

• Toggle Switch
• Input Field
• Dropdown & Select
• Formular-Design

Weiterführend

• Nielsen Norman Group – „Checkboxes vs. Radio Buttons": nngroup.com/articles/checkboxes-vs-radio-buttons
• Material Design 3 – Checkboxes: m3.material.io/components/checkbox
• Apple Human Interface Guidelines – Selection Controls: developer.apple.com/design/human-interface-guidelines
• WebAIM – Accessible Form Controls: webaim.org/techniques/forms/controls