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