UI-Justiz

Radiobutton

Radio-Buttons sind Eingabesteuerungen, die es Nutzenden ermöglichen, genau eine Optionen aus einer Reihe von Möglichkeiten auszuwählen.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#2681

überblickspezifikationentwicklung

Aufbau

Aufbau Radiobutton

Grafik, die den Aufbau einer Radiobutton-Gruppe erklärt. Die darauffolgende Liste bezieht sich auf, die in der besagten Grafik, markierten Bestandteile dieser Komponente.
  1. Radiobutton
  2. Text Label
  3. Gruppentitel

Aufbau Radiobutton mit Grafik

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

Grafik, die den Aufbau einer Radiobutton-Gruppe mit Grafik erklärt. Die darauffolgende Liste bezieht sich auf, die in der besagten Grafik, markierten Bestandteile dieser Komponente.
  1. Radiobutton
  2. Text Label
  3. Gruppentitel
  4. Grafik

Verhalten

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.

Gruppierung
Eine Radiobutton-Gruppe mit Titel.
Zweispaltige Gruppe
Eine, aus zwei Reihen bestehende, Radiobutton-Gruppe mit langem Titel.

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

Radiobutton-gruppen mit Pflichtfeldkennzeichnung
Radiobutton-Gruppen mit Pflichtfeldkennzeichnung und Radiobutton-Gruppen mit Pflichtfeldkennzeichnung und Fehlermeldung.

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.

Fehlerfälle / Validierung

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)

Radio-button Gruppe mit Fehlermeldung
Fehlerhafte Radiobutton-Gruppe mit Fehlermeldung.

Responsives Verhalten

Responsives Verhalten Radiobutton

Radiobuttons mit langem Titel können mehrzeilig dargestellt werden.

Mehrzeiliger Titel
Radio-Button mit zweizeiligem Label.

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.

Radiobutton-Gruppe mit vier Spalten
Radiobutton-Gruppe mit vier Spalten auf einer Fläche von 1424 Pixeln.
Radiobutton-gruppe mit drei Spalten
Radiobutton-Gruppe mit drei Spalten auf einer Fläche von 761 Pixeln.
Radiobutton-gruppe mit zwei Spalten
Radiobutton-Gruppe mit zwei Spalten auf einer Fläche von 760 Pixeln.
Radiobutton-gruppe mit einer Spalte
Radiobutton-Gruppe mit einer Spalte auf einer Fläche von 439 Pixeln.

Responsives Verhalten Radiobutton mit Grafik

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

Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite von 1424 und höher
Radiobutton-Gruppe mit Grafik auf einer Inhaltsbreite von 1424 Pixeln und höher.

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. /
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 1424 Pixeln
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 1424 Pixeln.

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.
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 761 Pixeln
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 761 Pixeln.

Ab einer Inhaltsbreite unter 440 Pixeln gilt:

  • Breite der Grafik beträgt 1 Spalten. Es können also keine Felder nebeneinander platziert werden.
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 440 Pixeln
Radiobutton-Gruppe mit Grafik ab einer Inhaltsbreite unter 440 Pixeln.

Zustände

Radiobuttons einzeilig und zweizeilig
Aktive, inaktive und zweizeilig Radiobuttons in den Zuständen “Default”, “Disabled”, “Hover”, “Mouse Down / Armed”, “Focus”, “Focus + Hover” und “Read-Only”.
Radiobutton mit Fehler
Aktive und inaktive Radiobuttons mit Fehler in den Zuständen “Default”, “Disabled”, “Hover”, “Mouse Down / Armed”, “Focus”, “Focus + Hover” und “Read-Only”.
Zustände Radiobuttons mit Grafik
Aktive und inaktive und Radiobuttons mit Grafik in den Zuständen “Default”, “Disabled”, “Hover”, “Mouse Down / Armed”, “Focus”, “Read-Only” und “Focus + Read-Only”.
Zustände Radiobuttons mit Grafik und fehlerhaftem Eintrag
Aktive und inaktive Radiobuttons mit Grafik und fehlerhaftem Eintrag in den Zuständen “Default”, “Hover”, “Mouse Down / Armed”, “Focus”.

Barrierefreiheit

Ausrufezeichen-Icons müssen als Layoutgrafik deklariert werden.

Bedienung

Tastaturbedienung

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

Mausbedienung

  • Klick mit linker Maustaste aktiviert den jeweiligen Radiobutton.

Weitere Themen:

cover

Checkbox

Checkboxen sind Eingabesteuerungen, die es Nutzenden ermöglichen, eine oder mehrere Optionen aus einer Reihe von Möglichkeiten auszuwählen.

cover

Tabelle

Tabellen sind geordnete Darstellungen von Informationen und Daten, die in Zeilen und Spalten aufgeteilt werden.