Radio Button

Der Radio Button dient zur Auswahl genau einer aus mehreren Optionen.

Overview

Intro

Der Radio Button dient zur Auswahl genau einer aus mehreren Optionen. Das Element kann also nur in Gruppen als Radio Button Group verwendet werden.

INFO

Die zugrundeliegende Vaadin Component nennt die „Radio Button Group“ nur „Radio Group “.

broken_image

Figma

Radio Button Group

Verwendung

👍 Do

👎 Don't

... wenn eine einzelne aus mehreren Optionen auswählbar sein soll.

... wenn mehrere Optionen ausgewählt werden können. Für Mehrfachauswahlen ist das Checkbox-Element die geeignete Wahl, siehe Checkbox. ... wenn aus einer sehr großen Liste von Optionen ausgewählt werden soll. Für eine Auswahl aus mehr als 9 Optionen sind Dropdowns, siehe Dropdown oder Comboboxen, siehe Combobox, zu verwenden. ... wenn nur eine ja/nein-Entscheidung abgefragt werden soll. Für ja/nein-Auswahlen ist ein einzelnes Checkbox-Element die geeignete Wahl, siehe Checkbox. ... wenn die Optionen Zahlenwerte mit festen Abständen sind. Für Wertauswahlen sind Dropdowns oder fortgeschrittene Auswahlelemente wie Schieberegler geeignet.

Guidelines

Aufbau

Ein Radio-Button-Element setzt sich aus folgenden Bestandteilen zusammen. Radiobutton und Beschriftung sind immer vorhanden; da sich Radiobuttons nur in Gruppen verwenden lassen, gehören zu jeder Auswahl außerdem die Radio Button Group und ihre Group-Überschrift. Die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Radiobutton — das Auswahlelement selbst. Es stellt die States nicht Selected und Selected dar.
• Beschriftung — benennt die einzelne Option und ist linksbündig auf der rechten Seite neben dem Radiobutton platziert. Sie gehört zur Klickfläche der Option. Das Mate Design System stellt die Beschriftung einer Option immer einzeilig dar; sie darf deshalb nicht länger sein, als in eine Zeile passt.
• Group-Überschrift — Label der Radio Button Group, das den Zweck der Auswahl benennt. Für die Barrierefreiheit erforderlich, da die Group daraus ihren Namen bezieht.
• Helper text (optional) — erscheint unterhalb der Radio Button Group. Geeignet, um die erwartete Auswahl zu erläutern. Eine Style-Variante erlaubt die Darstellung oberhalb des Feldes.
• Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben der Group-Überschrift gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Group-Überschrift, Helper text, Tooltip und Required indicator gehören zur Radio Button Group, nicht zum einzelnen Radiobutton. Placeholder, Clear button sowie Prefix und Suffix gibt es beim Radio Button nicht.

Grundsätzlich sollte darauf geachtet werden, dass die Beschriftung des Radiobuttons möglichst kurz, präzise und eindeutig gewählt wird. Durch die Wortwahl sollten möglichst klar voneinander zu unterscheidende Optionen entstehen. Auf lange Sätze als Beschriftung sollte, wenn möglich, verzichtet werden.

Im Formular wird eine Radio Button Group als ein Element in das Form Layout eingehängt. Empfohlen ist, sie nicht neben weiteren Eingabefeldern zu platzieren, sondern die volle Breite der Formularspalte dafür vorzusehen.

Info für Dev

In Web Components liegen Einzel- und Gruppenelement im selben Paket @vaadin/radio-group: <vaadin-radio-button> für die einzelne Option und <vaadin-radio-group> für die Gruppe. Das Paket ist in @mate/bundles enthalten.

In Vue kommen beide Komponenten aus dem Paket @mate-vue/radio-group: MateRadioButton und MateRadioButtonGroup.

In Flow gibt es nur die Gruppe: die Klasse RadioButtonGroup aus dem Maven-Artefakt com.vaadin:vaadin-radio-button-flow und dem Paket com.vaadin.flow.component.radiobutton. Die einzelnen Optionen entstehen über setItems.

Die volle Breite der Formularspalte ergibt sich nicht von selbst: Ein Kind des Form Layouts belegt ohne Attribut nur die halbe Breite. Damit die Group die ganze Formularspalte einnimmt, ist an ihr cols="4" zu setzen.

Anordnung & Gruppierung

Wenn mehrere Radio-Button-Groups auf der gleichen Seite platziert werden sollen, ist es wichtig, diese visuell deutlich voneinander zu trennen, sodass dem Nutzer leicht ersichtlich ist, welche Optionen sich jeweils gegenseitig ausschließen. Diese visuelle Trennung kann durch Group-Überschriften und Abstände erreicht werden, sowie durch die konsistente Anordnung der Auswahlelemente.

Group-Überschriften sollten oberhalb der Radio-Button-Group platziert sein und durch die Typografie (z.B. fett, Überschriften-Format) hervorgehoben werden. Die Überschrift sollte dem Nutzer klar machen wozu die Auswahl dient und welche Entscheidung dabei getroffen wird. In manchen Fällen kann es Sinn machen, die Überschrift als Frage zu formulieren.

Beispiel für einen Anwendungsfall mit Frage als Group-Überschrift: In einem Formular soll die Zufriedenheit des Nutzers bezüglich des Kundenservices abgefragt werden. Der Nutzer kann zwischen den Optionen "zufrieden", "mittelmäßig", "unzufrieden" und "keine Angabe" wählen. Eine schlecht geeignete Group-Überschrift wäre "Bewertung". Die Überschrift wäre zwar kurz und präzise, jedoch ist nicht klar auf was sich die Bewertung beziehen soll. In diesem Fall wäre die Überschrift "Wie zufrieden sind Sie mit unserem Kundenservice?" besser geeignet. Hier wird direkt deutlich um was es geht und der Nutzer kann schnell eine Auswahl treffen, ohne über die Bedeutung der Überschrift nachdenken zu müssen.

Innerhalb einer Group können die Radio-Button-Elemente horizontal oder vertikal angeordnet werden. Eine horizontale Anordnung empfiehlt sich jedoch nur, wenn die Beschriftungen der einzelnen Optionen kurz gehalten sind und es innerhalb einer Group nicht mehr als 4 bis 6 Optionen gibt.

In allen anderen Fällen sollten die Optionen untereinander (vertikal) angeordnet werden. Dies erhöht die Lesbarkeit für den Nutzer und lässt außerdem schnell erkennen, ob und welche Auswahl getroffen wurde.

broken_image Figma	vertikale Radio Button Group (Standard)
broken_image Figma	horizontale Radio Button Group (kurze Auswahloptionen)

Verhalten

Innerhalb einer Group von Auswahlelementen kann jeweils nur eine Option gewählt sein. Standardmäßig ist keine Option gewählt. Wenn der Nutzer eine Option anklickt (Radiobutton oder Label), wird diese ausgewählt. Das heißt, dass auch bei einem Klick auf die Beschriftung der Radiobutton betätigt wird. Bei Klick auf eine andere Option der gleichen Group, wird die Auswahl neu gesetzt. Die Auswahl kann nicht aufgehoben werden. Nachdem der Nutzer einmal eine Option in einer Radiobutton-Group gewählt hat, muss also immer mindestens eine Option der Group im gewählten Zustand sein.

Wenn es mehrere Radiobutton-Groups gibt, kann in jeder Group eine Option gewählt werden.

Bei bestimmten Anwendungsfällen kann es Sinn machen eine Option in einer Radiobutton-Group standardmäßig vorzuwählen. Dies sollte jedoch nur verwendet werden, wenn es dem Nutzer die Arbeit erleichtert und für den spezifischen Anwendungsfall sinnvoll ist.

Validierung

Die Validierung erfolgt, sobald der Nutzer eine Option auswählt. Spätestens beim Verlassen der Group wird geprüft, auch wenn keine Option gewählt wurde. Ist das Ergebnis ungültig, werden die Optionen der Group farblich hervorgehoben und die Fehlermeldung erscheint unterhalb aller Optionen der Group.

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Als Constraint steht ausschließlich Required zur Verfügung: Eine Radio-Button-Group mit Required ist ungültig, solange keine ihrer Optionen ausgewählt ist. Da sich die Auswahl nach dem ersten Klick nicht mehr aufheben lässt, tritt dieser Fall nur auf, solange der Nutzer noch gar keine Option gewählt hat. Weitere Constraints bringt die Komponente nicht mit.

States

Enabled

Ein Radiobutton im State Enabled kann vom Nutzer angeklickt werden und wechselt durch Klick in den State Selected.

broken_image

Figma

Radio Button im State Enabled

Selected

Ein Radiobutton im State Selected hebt sich visuell von den anderen Radiobuttons der gleichen Group ab und zeigt, dass die Option gewählt wurde. Ein Radiobutton im State Selected geht in den State Enabled über, wenn ein anderer Radiobutton der gleichen Group gewählt wird.

broken_image

Figma

Radio Button im State Selected

Error

Bei der Validierung von Optionen werden eventuelle Fehlermeldungen jeweils für die Group unterhalb aller Optionen der Group angezeigt. Die Optionen der Group, in der der Fehler aufgetreten ist, werden zusätzlich farblich hervorgehoben.

broken_image

Figma

Radio Button Group im State Error

INFO

Die Darstellung der States Disabled, Read Only, Hover und Focus entspricht der Standarddarstellung. Siehe States.

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lässt sich zwischen den Radiobutton-Groups springen und es wird jeweils die ausgewählte Option einer Group fokussiert. Mit den Pfeiltasten ist es möglich den Fokus und damit gleichzeitig die Auswahl auf andere Optionen innerhalb der Group zu setzen. Ist initial keine Option ausgewählt, wird die erste Option fokussiert und kann mit Leertaste ausgewählt werden.

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit der Radio-Button-Group, die Verknüpfung der Beschriftungen mit den einzelnen Radiobuttons, die Kennzeichnung von Pflichtfeldern über aria\-required und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

• Die Radio-Button-Group ist für Screenreader als Gruppe sich gegenseitig ausschließender Optionen erkennbar und trägt die Group-Überschrift als eigenen Namen. Die Beschriftungen der einzelnen Optionen sind jeweils nur mit ihrem Radiobutton verknüpft. Die Group-Überschrift ist deshalb als Label der Radio-Button-Group zu setzen und nicht als freistehender Text davor — sonst fehlt den Optionen der gemeinsame Bezug.
• Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
• Read Only wirkt bei der Radio-Button-Group anders als bei einem Eingabefeld: Der native Radiobutton kennt keinen State Read Only, deshalb bleibt nur die Option im State Selected fokussierbar, alle übrigen werden auf Disabled gesetzt und sind für Screenreader nicht mehr wahrnehmbar. Zur reinen Anzeige einer getroffenen Auswahl ist die Radio-Button-Group deshalb ungeeignet — dafür sind Name-Wert-Facetten vorgesehen. Eine Group, die im Laufe des Prozesses wieder bedienbar werden kann, wird auf Disabled gesetzt. Siehe States .
• Fehlermeldung: Die Verknüpfung mit der Radio-Button-Group stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Eine Option auswählen" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
• Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .