RadioGroup

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

Täglicher Kaffeekonsum(optional)

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.

Rolle(optional)

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.

Datenbank-Typ(optional)

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.

Benutzerdefinierte Spalten(optional)

Mit FieldDescription

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

Wie viele Pflanzen besitzt du?(optional)Mehrere identische Pflanzen in einem Topf gelten als eine Pflanze.

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.

Datenbank-Typ(optional)Bitte wähle eine Option aus

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 Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.