1. Radiobutton
2. Text Label
3. Gruppentitel

Bei Radion Buttons mit Grafik, ist die Grafik linksbündig unter dem Textlabel zu platzieren.

1. Radiobutton
2. Text Label
3. Gruppentitel
4. Grafik

Radio Buttons ermöglichen immer nur die Auswahl eines Elements einer Gruppe gleichzeitig. Wird eine andere Option ausgewählt, so wird die vorherige wieder inaktiv.

Standardmäßig sind Radio-Button-Gruppen initial mit einem vom Teilprojekt zu definierenden Wert vorbefüllt (in der Regel ist dies der erste Wert in der Gruppe). Falls keine Vorbefüllung vorhanden sein soll, ist dies in den Userstories zu definieren.
Nach dem ersten Aktivieren einer der Einträge kann nur über den Undo-Button zum Zustand “alle unbefüllt” zurückgekehrt werden.

Radiobuttons können neben dem Textlabel auch zusätzlich eine Grafik enthalten. Diese muss als Layoutgrafik definiert werden. Der Inhalt der Grafik muss aus dem Textlabel hervorgehen. (Aufbau und Verhalten siehe Radio Button Grafik)

Ein Radio-Button kann durch Klicken auf das Icon, das Label und, falls vorhanden, der Grafik aktiviert werden.

Ein Radio-Button kann nicht ohne sichtbares Textlabel verwendet werden. Die Klickfläche hat eine minimal Seitenlänge von 40px.

Mehrere Radio-Buttons werden zu einer Gruppe kombiniert, die mit einem sichtbaren Label definiert sein muss. Es handelt sich visuell um eine Überschrift des Typs “Label” in der Farbe Schwarz. Der Abstand zu anderen Elementen neben der Gruppe muss ausreichend sein, dass die Gruppe klar als solche zu erkennen ist (mind 24px).

Lange Gruppen können auch zweispaltig dargestellt werden.

Pflicht-Radiobutton-Gruppen sind mit “*” (Sternchen”) nach dem TextLabel (Gruppenlabel) markiert.

Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Radio-Button-Gruppen werden im Read-Only-Zustand als ein Read-Only Eingabefeld dargestellt (Aufbau siehe Eingabefeld). Die Feldbezeichnung des Eingabefelds entspricht dem Radio-Button-Gruppen-Titel. Das Textlabel des aktiven Eintrags der Gruppe wird im Read-Only Eingabefeld ausgegeben. Inaktive Einträge werden im Read-Only-Zustand ausgeblendet und nicht im Eingabefeld angezeigt.

Im Fehlerfall (Ablauf siehe Formulare: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Die Standardfehlermeldung bei einer unbefüllten Pflicht-Radiobuttongruppe lautet: “Eine Selektion erforderlich” (siehe Meldungskonzept: Formular-Validierungsfehler - Standard-Meldungen)

Radiobuttons mit langem Titel können mehrzeilig dargestellt werden.

Radiobuttongruppen können ein-(288-439px), zwei- (440-760px), drei- (ab 761px) oder vierspaltig (über 1424px Inhaltsbreite bzw. 1600 Formularbreite) dargestellt werden. Dies richtet sich nach dem verfügbaren Platz in der Breite. Die Elementen füllen die Spalten von oben nach unten und dann weiter am Beginn der nächsten Spalte. Solange höchstens vier Elemente enthalten werden sie immer einspaltig dargestellt.

Die Darstellungsart und Umbruchpunkte der Radiobuttongruppen mit Grafik gleicht die der normalen Radiobuttongruppen (siehe oben Responsives Verhalten Radiobutton).

Das Seitenverhältnis der Grafik wird immer beibehalten und ist 5:3

Bei einer Inhaltsbreite unter 1424 Pixeln gilt:

• Breite der Grafik beträgt 4 Spalten. Es können also bis zu 3 Felder nebeneinander platziert werden. /

Ab einer Inhaltsbreite unterhalb 761 Pixeln gilt:

• Breite der Grafik beträgt 6 Spalten. Es können also bis zu 2 Felder nebeneinander platziert werden.

Ab einer Inhaltsbreite unter 440 Pixeln gilt:

• Breite der Grafik beträgt 1 Spalten. Es können also keine Felder nebeneinander platziert werden.

Ausrufezeichen-Icons müssen als Layoutgrafik deklariert werden.

• Bei einer Gruppe mit einer bereits ausgewählten Option wird mit Tab immer der aktive Radio-Button fokussiert. Ist in einer Radiobuttongruppe mit auswählbaren Werten noch keine Option ausgewählt, dann sind die einzelnen Optionen der Gruppe entsprechend des jeweiligen Browserstandardverhaltens mit der Tastatur erreichbar.
• Leertaste aktiviert den fokussierten Radiobutton.
• Die Pfeiltasten nach oben oder unten wechseln sowohl den Fokus als auch den Aktiv-Status.
• Tab wechselt zum nächsten interaktiven Element außerhalb der Radiobuttongruppe.
• Im Read-only-Status wird mit Tab nur der aktivierte Radiobutton fokussiert.

• Klick mit linker Maustaste aktiviert den jeweiligen Radiobutton.