RadioGroup

Grundlagen

Eine RadioGroup enthält mehrere Radios oder RadioButtons als Optionsmöglichkeiten, von denen jeweils nur eine vom User ausgewählt werden kann. Die ausgewählte Option wird durch einen ausgefüllten Kreis gekennzeichnet. Zu Beginn ist häufig eine sinnvolle Option vorausgewählt.

Best Practices

Achte bei der Verwendung einer RadioGroup darauf, dass ...

• ein Label verwendet wird, wenn der User die RadioGroup sonst nicht selbstständig verstehen kann. Ein anderes beschreibendes Element in Nähe der RadioGroup, kann das Label ersetzen, z. B. eine Heading.
• die Reihenfolge der Optionen gut gewählt ist. In den meisten Fällen ist es sinnvoll, die wichtigsten Optionen an den Anfang zu stellen. Wenn die RadioGroup in Umfragen verwendet wird, kann es stattdessen sinnvoll sein, die Optionen zufällig zu mischen.
• die Optionen für den User leicht zu unterscheiden sind, um Unsicherheit über die richtige Wahl zu vermeiden.
• es nicht zu viele Optionen sind. Idealerweise sind es 2-7 Optionen. Bei mehr Optionen oder wenn die Optionen nicht sofort sichtbar sein sollen, ist ein Select die bessere Wahl.
• die Auswahl durch das Anklicken eines Speicher-Buttons bestätigt werden muss.
• es oft ratsam ist, zu Beginn eine Option vorzuselektieren, um Fehlermeldungen zu vermeiden.

Verwendung

Verwende eine RadioGroup, um ...

• dem User eine Einfachauswahl mit ungefähr 2-7 direkt sichtbaren Optionen anzubieten.
• als Einfachauswahl-Components in Umfragen verwendet zu werden.
• Einstellungen vorzunehmen, bei denen immer genau eine Option ausgewählt werden muss.

RadioGroup vs. SegmentedControl

Flow bietet verschiedene Auswahl-Components an. RadioGroup und SegmentedControl ähneln sich sehr. In den Cards unter dem Text sind hilfreiche Anhaltspunkte für eine Abgrenzung.

Anwendung

Position

RadioGroups werden häufig in Formularen verwendet.

• Radios dürfen nur untereinander und linksbündig dargestellt werden.
• RadioButtons dürfen untereinander und nebeneinander verwendet werden.

Hierarchie

Da RadioGroups aus mehreren Optionen bestehen, müssen diese in eine logische Reihenfolge gebracht werden. Folgende Punkte können dabei interessant sein:

• In den meisten Fällen sollte die wichtigste Option an erster Stelle stehen. Die wichtigste Option kann z. B. diejenige sein, die am häufigsten vom User gewählt wird.
• Eine Option, die ein hohes Risiko für den User darstellt, sollte weiter unten in der Liste erscheinen und niemals vorselektiert sein.
• Da eine RadioGroup in der Regel bereits über eine vorselektierte Option verfügt, wird die RadioGroup automatisch für den User zur Pflicht. Daher muss es immer eine Option geben, die der tatsächlichen Auswahl des Users entspricht. Dies bedeutet zum Beispiel, dass in einer Liste von Optionen am Ende eine Option mit der Bezeichnung „Andere“ oder „Keine“ angeboten wird.

Inhalt

Radio

Ein Radio besteht aus zwei Bestandteilen: Einem Kreis, der anzeigt, ob eine Option ausgewählt ist oder nicht, und einem kurzen beschreibenden Text. Radios werden immer untereinander angeordnet und werden häufig in Umfragen verwendet.

RadioButton

Auf Benutzeroberflächen sind häufiger RadioButtons anstelle von Radios zu finden. RadioButtons haben den Vorteil, dass ...

• mehr Inhalt dargestellt werden kann. RadioButtons können auch eine Headline, Fließtext und einen Subtext besitzen. Dabei sollte der Fließtext, jedoch nicht länger als 2-3 Zeilen Text sein.
• die Klickfläche durch die Umrandung deutlicher wird und dadurch schneller dem User ins Auge springt.
• sie durch das ColumnLayout und die visuelle Umrandung auch nebeneinander dargestellt werden können.

Writing Guidelines

Label

Ein Label soll dem User helfen herauszufinden, worum es sich bei der RadioGroup handelt:

• Labels sind platzsparender und unauffälliger. Sie werden verwendet, wenn 1-3 Wörter ausreichen, um die Optionen der RadioGroup zu beschreiben. Wenn mehr Wörter benötigt werden, kann z. B. eine Heading in der Nähe der RadioGroup platziert werden.
• Achte darauf, dass die Wortwahl verständlich ist und keinen Interpretationsspielraum lässt.

Optionen

Radios und RadioButtons unterscheiden sich in einigen Punkten, die folgenden Punkte sollten jedoch bei beiden berücksichtigt werden:

• Beginne eine Option immer mit einem Großbuchstaben.
• Versuche die Option so kurz wie möglich zu beschreiben. In einem RadioButton können mehrere Sätze in der Mitte stehen, versuche aber nicht mehr als 3 Sätze zu schreiben.
• Wenn die Optionen Zahlen enthalten, sollten sich diese nicht überlappen oder zwischendrin Zahlen ausgelassen werden.

Accessibility

Achte bei der RadioGroup darauf, dass ...

• wenn kein Label verwendet wird ein passendes AriaLabel für den Screenreader gesetzt wird, zum Beispiel bei einer Heading muss eine aria-labelledby verwendet werden.
• nie eine Option mit hohem Risiko zum Start vorausgewählt ist, damit diese nicht versehentlich ausgewählt wird. Zum Beispiel sollte darauf geachtet werden, wenn es um Bezahlung geht.
• die Auswahl durch einen Button bestätigt werden muss.

Playground

Verwende <RadioGroup /> zusammen mit mehreren <Radio />, um eine RadioGroup darzustellen. Über der RadioGroup kann ein beschreibendes Label verwendet werden. Es kann weggelassen werden, wenn die RadioGroup ohne verstanden wird oder wenn ein anderes beschreibendes Element – wie eine Heading – in der Nähe platziert wird. Wenn kein Label vorhanden ist, muss ein aria-label gesetzt werden.

import {
  Label,
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components";

<RadioGroup defaultValue="admin">
  <Label>Rolle</Label>
  <Radio value="admin">Administrator</Radio>
  <Radio value="member">Mitglied</Radio>
  <Radio value="accountant">Buchhalter</Radio>
</RadioGroup>

RadioButtons

RadioGroups können statt mit einfachen Radios auch mit RadioButtons gefüllt werden. Ersetze dafür <Radio /> mit <RadioButton />. Anders als einfache Radios können RadioButtons mehr Inhalt – wie z. B. eine Überschrift mit Text und Subtext – darstellen und dürfen auch nebeneinander gesetzt werden.

Weiterer Inhalt

Anstelle einer einfachen Bezeichnung kann der <RadioButton /> auch mit zusätzlichem Inhalt gefüllt werden. Verwende dazu innerhalb des <RadioButtons /> Text für eine Überschrift und <Content /> für Fließtext.

Benutzerdefinierte Spalten

Die RadioGroup verwendet das ColumnLayout, um eine Anpassung der Spalten zu ermöglichen. Bei der Verwendung von RadioButtons entspricht der Default dem des ColumnLayouts, während Radios im Default untereinander angezeigt werden.

Mit FieldDescription

Unterhalb der <Radio /> oder <RadioButton /> kann eine hilfreiche <FieldDescription /> eingebaut werden.

States

Eine RadioGroup hat 3 States: Default, Disabled und Error. Radios und RadioButtons verfügen über die States Default, Hover, Pressed, Disabled, Focused und Selected.

Selected: Wenn ein Radio/RadioButton vom User ausgewählt wird, erhält er den State Selected. In einer RadioGroup kann sich immer nur ein Radio/RadioButton in diesem State befinden. In den meisten Fällen ist es sinnvoll, zu Beginn eine Option vorzuselektieren.

Disabled: Wenn die RadioGroup den State Disabled hat, erhalten alle Radios/RadioButtons automatisch ebenfalls diesen State, sodass sie vom User nicht ausgewählt werden können. Es ist auch möglich, einzelne Radios/RadioButtons auf Disabled zu setzen.

Error: Ein Error-State sollte angezeigt werden, wenn etwas schiefgelaufen ist (siehe Fehlermeldungen). Da häufig eine Option in der RadioGroup vorselektiert ist, wird das obige Beispiel nur selten benötigt.

Kombiniere mit ...

ContextualHelp

Benutze die ContextualHelp Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Properties

Events

Accessibility