Verwendung
Elemente vom input type="radio" dienen der Auswahl eines Wertes aus einer Wertemenge, wo die Nutzenden sich zwischen zwei oder mehr Werten entscheiden sollen. Radio Buttons sollen genutzt werden, wenn alle zur Verfügung stehenden Optionen sichtbar angezeigt werden müssen.
Ein Radiobutton kann nur in einer Gruppe von mindestens zwei Radiobuttons stehen; in einer Gruppe von Radiobuttons kann nur ein Element ausgewählt werden. Wenn mehrere Werte aus einer Menge ausgewählt werden können, so müssen hierfür Checkboxen verwendet werden.
Falls keiner der Werte aus der Wertemenge eine valide Option ist, dann muss als Letztes ein weiterer Radiobutton mit dem Wert „Keine der Optionen“ oder einer vergleichbaren Beschriftung eingesetzt werden. Grund hierfür ist, dass man prinzipiell einmal ausgewählte Radiobuttons nicht mehr komplett abwählen kann, ohne die Seite neu zu laden. Aus diesem Grund sollten Radiobuttons auch nicht vorausgewählt sein wenn die Seite lädt. Nutzende laufen hierdurch Gefahr, diese Formularelemente zu übersehen oder falsche Angaben abzuschicken.
Abgrenzung
Das Design System gibt bewusst keinen Schwellenwert vor, ab dem ein Dropdown vom Typ Select oder Combobox statt einer Gruppe von Radiobuttons verwendet werden soll, da oftmals die benötigte Textmenge der Labels den zur Verfügung stehenden Platz in einem Dropdown überschreiten würde.
Bei einer geringen Anzahl Optionen mit kurzen Label-Texten wird die Verwendung von Radiobuttons empfohlen (z. B. Herr / Frau), bei einer längeren Liste von Optionen mit kurzen Labeltexten (z. B. einer Länderauswahl) werden Select oder Combobox als geeigneteres UI-Element empfohlen.
Radiobuttons können ebenso verwendet werden, um weitere Optionen ein- oder auszuschalten.
Beschriftung
Felder vom input type="radio" benötigen zwingend eine Beschriftung, in welcher der Zweck und ggf. auch das erwartete Format beschrieben wird. Dies wird über ein implizit oder explizit verknüpftes <label> erreicht.
Labels von Radiobuttons stehen, wie bei Checkboxen, grundsätzlich rechts neben dem Formularelement.
Wenn kein ausreichender Platz für ein sichtbares Label zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.
Innerhalb einer Gruppe von Radiobuttons muss auf eine konsistente und einheitliche Beschriftung geachtet werden: Die Labels sollen entweder ein vollständiger Satz, oder eine Phrase, oder ein einzelnes Wort mit einheitlicher Groß- und Kleinschreibung sein. Mischformen sind nicht erwünscht.
Tooltips
Radiobuttons können ein zugeordnetes Tooltip erhalten, das entweder an einzelnen Radiobuttons oder an der Gruppe der Elemente steht.
Inaktive Elemente
Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Vorauswahlen.
Readonly-Radiobuttons sind nicht vorgesehen und per HTML-Spezifikation nicht erlaubt.
Do’s and Dont’s
So:
- Sich gegenseitig ausschließende entweder-oder-Auswahlen
- Geringe Menge von möglichen Auswahlen, idealerweise bis zu drei Möglichkeiten
- Sinnbildende Beschriftung in Form von fieldset & legend verwenden, wenn die Optionen isoliert betrachtet nicht selbsterklärend sind
- Wenn keine fachlichen oder inhaltlichen Gründe dagegen sprechen, dann sollten Radiobuttons alphabetisch sortiert sein.
So nicht:
- Verwendung für Mehrfachauswahlen
- Auswahl darf keine weitere Aktion auslösen, hierzu muss zwingend ein Button angeboten werden
- Mehr als 3 Optionen, darüber sollte Select verwendet werden
