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 from "@mittwald/flow-react-components/Label";
import RadioGroup, {
  Radio,
} from "@mittwald/flow-react-components/RadioGroup";

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

Kombiniere mit...

RadioButton

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.

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

<RadioGroup defaultValue="mysql">
  <Label>Datenbank-Typ</Label>
  <RadioButton value="mysql">MySQL</RadioButton>
  <RadioButton value="redis">Redis</RadioButton>
</RadioGroup>

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

import RadioGroup, {
  RadioButton,
} from "@mittwald/flow-react-components/RadioGroup";
import Text from "@mittwald/flow-react-components/Text";
import Content from "@mittwald/flow-react-components/Content";

<RadioGroup
  defaultValue="bookDomain"
  aria-label="Domain"
  l={[1, 1]}
>
  <RadioButton value="bookDomain">
    <Text>Domain buchen</Text>
    <Content>
      Du hast eine Wunsch-Domain? Kein Problem, wir helfen
      dir, die passende Domain für dich zu finden.
      <br />
      <strong>
        <small>8,28€ jährlich</small>
      </strong>
    </Content>
  </RadioButton>
  <RadioButton value="moveDomain">
    <Text>Domain umziehen</Text>
    <Content>
      Du hast schon eine Domain und möchtest sie von deinem
      jetzigen Anbieter zu mittwald umziehen.
      <br />
      <strong>
        <small>8,28€ jährlich</small>
      </strong>
    </Content>
  </RadioButton>
  <RadioButton value="virtualHost">
    <Text>Virtual Host einrichten</Text>
    <Content>
      Die Domain bleibt bei deinem bisherigen Anbieter, du
      kannst sie aber für deine Website in unserem mStudio
      verwenden.
      <br />
      <strong>
        <small>kostenlos</small>
      </strong>
    </Content>
  </RadioButton>
  <RadioButton value="subdomain">
    <Text>Subdomain anlegen</Text>
    <Content>
      Eine Subdomain von einer bereits vorhandenen Domain
      erstellen, um sie für dein Projekt zu verwenden.
      <br />
      <strong>
        <small>kostenlos</small>
      </strong>
    </Content>
  </RadioButton>
</RadioGroup>

FieldDescription

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

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

<RadioGroup defaultValue="more">
  <Heading level={4}>
    Wie viele Pflanzen besitzt du?
  </Heading>
  <Radio value="more">Mehr als 9 Pflanzen</Radio>
  <Radio value="6-8">6-8 Pflanzen</Radio>
  <Radio value="3-5">3-5 9 Pflanzen</Radio>
  <Radio value="1-2">1-2 Pflanzen</Radio>
  <Radio value="none">Keine</Radio>
  <FieldDescription>
    Mehrere identische Pflanzen in einem Topf gelten als
    eine Pflanze.
  </FieldDescription>
</RadioGroup>

Mit benutzerdefinierten Spalten

Die RadioGroup verwendet das ColumnLayout, um eine Anpassung der Spalten zu ermöglichen.

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

<RadioGroup
  defaultValue="one"
  s={[1, 1]}
  m={[1, 1, 1]}
  l={[1, 1, 1, 1]}
>
  <Label>Benutzerdefinierte Spalten</Label>
  <RadioButton value="one">Spalte 1</RadioButton>
  <RadioButton value="two">Spalte 2</RadioButton>
  <RadioButton value="three">Spalte 3</RadioButton>
</RadioGroup>

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.

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

<RadioGroup
  defaultValue="selected"
  l={[1, 1]}
  aria-label="states"
>
  <RadioButton value="default">Domain buchen</RadioButton>
  <RadioButton value="selected">Domain buchen</RadioButton>
  <RadioButton isDisabled value="default">
    Domain buchen
  </RadioButton>
  <RadioButton isDisabled value="selected">
    Domain buchen
  </RadioButton>
</RadioGroup>

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.

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

<RadioGroup isInvalid>
  <Label>Datenbank-Typ</Label>
  <RadioButton value="mysql">MySQL</RadioButton>
  <RadioButton value="redis">Redis</RadioButton>
  <FieldError>Bitte wähle eine Option aus</FieldError>
</RadioGroup>

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.

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.