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 “.

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 besteht aus dem eigentlichen Auswahlelement (Radiobutton) und einer Beschriftung (Label). Das Label ist linksbündig auf der rechten Seite neben dem Radiobutton platziert.

Bei langen Beschriftungen kann der Text mehrzeilig werden, wobei der Radiobutton jedoch immer seine Position auf Höhe der ersten Textzeile beibehält.

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.

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 vier bis sechs 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.

	vertikale Radio Button Group (Standard)
	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.

States

Auswählbar (Enabled)

Ein auswählbarer Radiobutton kann vom Nutzer angeklickt werden und wechselt durch Klick in den gewählten Zustand.

auswählbarer Radio Button

Gewählt (Selected)

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

ausgewählter Radio Button

Fehler

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.

Radio Button Group mit Fehler

Die Darstellung der States Inaktiv, Gesperrt, Hover und Fokus 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.

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-radiobutton--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fradio-button-group

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-radio-button-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.radiobutton.RadioGroupVariant;

Variants

Default

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Option wählen");
radioButtonGroup.setItems("Option 1", "Option 2", "Option 3");

Required

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Pflichtfeld");
radioButtonGroup.setItems("Option 1", "Option 2", "Option 3");
radioButtonGroup.setRequired(true);

Disabled

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Inaktiv");
radioButtonGroup.setItems("Option 1", "Option 2", "Option 3");
radioButtonGroup.setEnabled(false);

Invalid

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Fehler");
radioButtonGroup.setItems("Option 1", "Option 2", "Option 3");
radioButtonGroup.setInvalid(true);
radioButtonGroup.setErrorMessage("Bitte wählen Sie eine Option.");

Vertical

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Vertikal");
radioButtonGroup.setItems("Option 1", "Option 2", "Option 3", "Option 4");
radioButtonGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);