# RadioGroup

Eine RadioGroup ist ein Auswahlelement, das es dem User ermöglicht, genau eine Option aus einer vordefinierten Gruppe auszuwählen.

## Guidelines

# 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](/04-components/content/label/overview) 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](/04-components/content/heading/overview).
- 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](/04-components/form-controls/select/overview) 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.

  

**ℹ️ Info**

- eine Einfachauswahl von 2 bis ungefähr 7 Optionen anzuzeigen.

    - Optionen mit unterschiedlicher Textlänge darzustellen.

  

**ℹ️ Info**

- eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen.

    - Optionen anzuzeigen, die aus 1 bis 2 Wörtern bestehen.

    - Optionen anzuzeigen, die den darunterliegenden Inhalt verändern.

---

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

  

**✅ Do**

Der User kann hier den letzten Punkt auswählen, wenn die anderen Optionen
    nicht zutreffen.

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

<div style={{ display: "flex", justifyContent: "center" }}>
  <RadioGroup defaultValue="espelkamp">
    <Label>Wohnort</Label>
    <Radio value="espelkamp">Espelkamp</Radio>
    <Radio value="minden">Minden</Radio>
    <Radio value="rahden">Rahden</Radio>
    <Radio value="others">Andere</Radio>
  </RadioGroup>
</div>
```

  

**⛔️ Don't**

Wenn der User woanders wohnt, kann er hier keine richtige Wahl treffen.

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

<div style={{ display: "flex", justifyContent: "center" }}>
  <RadioGroup defaultValue="espelkamp">
    <Label>Wohnort</Label>
    <Radio value="espelkamp">Espelkamp</Radio>
    <Radio value="minden">Minden</Radio>
    <Radio value="rahden">Rahden</Radio>
    <Radio value="luebbecke">Lübbecke</Radio>
  </RadioGroup>
</div>
```

---

# 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](/04-components/content/label/overview) 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](/04-components/content/heading/overview) in der Nähe der RadioGroup
  platziert werden.
- Achte darauf, dass die Wortwahl verständlich ist und keinen
  Interpretationsspielraum lässt.

  

**✅ Do**

**⛔️ Don't**

```tsx
import { Label } from "@mittwald/flow-react-components";

<div
  style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  }}
>
  <Label>
    Wähle hier die passende Filtermöglichkeit aus:
  </Label>
  <Label>Wie möchtest du den Vorgang bezahlen?</Label>
</div>
```

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

    Die Auswahl ist eindeutig, da sich kein Alter überschneidet.

```tsx
import { Label } from "@mittwald/flow-react-components";

<div
  style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  }}
>
  <Label>Filter</Label>
  <Label>Zahlungsmethode</Label>
</div>
```

  

**⛔️ Don't**

Die Optionen überschneiden sich hier, sodass einige User zwei Optionen
    auswählen müssten.

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

<div style={{ display: "flex", justifyContent: "center" }}>
  <RadioGroup defaultValue="0-10">
    <Label>Alter</Label>
    <Radio value="0-10">0-10 Jahre</Radio>
    <Radio value="10-20">11-20 Jahre</Radio>
    <Radio value="20-30">21-30 Jahre</Radio>
    <Radio value="30-40">31-40 Jahre</Radio>
    <Radio value="40+">40+ Jahre</Radio>
  </RadioGroup>
</div>
```

---

# Accessibility

Achte bei der RadioGroup darauf, dass ...

- wenn kein [Label](/04-components/content/label/overview) verwendet wird ein
  passendes AriaLabel für den Screenreader gesetzt wird, zum Beispiel bei einer
  [Heading](/04-components/content/heading/overview) 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.