# RadioGroup Eine RadioGroup ist ein Auswahlelement, das es dem User ermöglicht, genau eine Option aus einer vordefinierten Gruppe auszuwählen. ## Overview # Playground Verwende `` zusammen mit mehreren ``, um eine RadioGroup darzustellen. Über der RadioGroup kann ein beschreibendes [Label](/04-components/content/label/overview) verwendet werden. Es kann weggelassen werden, wenn die RadioGroup ohne verstanden wird oder wenn ein anderes beschreibendes Element – wie eine [Heading](/04-components/content/heading/overview) – in der Nähe platziert wird. Wenn kein Label vorhanden ist, muss ein aria-label gesetzt werden. ```tsx import { Label, Radio, RadioGroup, } from "@mittwald/flow-react-components"; Administrator Mitglied Buchhalter ``` --- # RadioButtons RadioGroups können statt mit einfachen **Radios** auch mit **RadioButtons** gefüllt werden. Ersetze dafür `` mit ``. 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. ```tsx import { Label, RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; MySQL Redis ``` ## Weiterer Inhalt Anstelle einer einfachen Bezeichnung kann der `` auch mit zusätzlichem Inhalt gefüllt werden. Verwende dazu innerhalb des `` [Text](/04-components/content/text/overview) für eine Überschrift und `` für Fließtext. ```tsx import { Content, RadioButton, RadioGroup, Text, } from "@mittwald/flow-react-components"; Domain buchen Du hast eine Wunsch-Domain? Kein Problem, wir helfen dir, die passende Domain für dich zu finden.
8,28€ jährlich Domain umziehen Du hast schon eine Domain und möchtest sie von deinem jetzigen Anbieter zu mittwald umziehen.
8,28€ jährlich Virtual Host einrichten Die Domain bleibt bei deinem bisherigen Anbieter, du kannst sie aber für deine Website in unserem mStudio verwenden.
kostenlos Subdomain anlegen Eine Subdomain von einer bereits vorhandenen Domain erstellen, um sie für dein Projekt zu verwenden.
kostenlos ``` ## Benutzerdefinierte Spalten Die RadioGroup verwendet das [ColumnLayout](/04-components/structure/column-layout/overview), 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. ```tsx import { Label, RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; Spalte 1 Spalte 2 Spalte 3 ``` --- # Mit FieldDescription Unterhalb der `` oder `` kann eine hilfreiche `` eingebaut werden. ```tsx import { FieldDescription, Label, Radio, RadioGroup, } from "@mittwald/flow-react-components"; Mehr als 9 Pflanzen 6-8 Pflanzen 3-5 9 Pflanzen 1-2 Pflanzen Keine 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**. ```tsx import { RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; Domain buchen Domain buchen Domain buchen Domain buchen ``` **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. ```tsx import { FieldError, Label, RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; MySQL Redis Bitte wähle eine Option aus ``` **Error:** Ein Error-State sollte angezeigt werden, wenn etwas schiefgelaufen ist (siehe [Fehlermeldungen](/02-foundations/03-content-guidelines/03-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](/04-components/overlays/contextual-help/overview) Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind. ```tsx import { Button, ContextualHelp, ContextualHelpTrigger, Heading, Label, Radio, RadioGroup, Text, } from "@mittwald/flow-react-components";