# RadioGroup Eine RadioGroup ermöglicht die Auswahl genau einer Option aus einer Gruppe. ```tsx import { Label, Radio, RadioGroup, } from "@mittwald/flow-react-components"; Mehr als 6 Tassen 5-6 Tassen 3-4 Tassen 1-2 Tassen Trinke keinen Kaffee ``` --- # Best Practices - Beschrifte die RadioGroup mit einem [Label](/04-components/content/label). Übernimmt ein nahes Element wie eine [Heading](/04-components/content/heading) diese Rolle, setze stattdessen `aria-label` bzw. `aria-labelledby`. - Nutze bei vielen Optionen ein [Select](/04-components/form-controls/select), um die Oberfläche aufgeräumt zu halten. Als Faustregel ab etwa sieben Optionen. - Wähle zu Beginn eine sinnvolle Option vor. Das vermeidet unnötige Fehlermeldungen. - Ordne die Optionen nach Wichtigkeit. Die wichtigste steht oben; eine Option mit weitreichenden Folgen gehört nach unten und ist nie vorausgewählt. - Formuliere die Optionen klar unterscheidbar. So erkennt der User die passende Wahl auf einen Blick. - Folge in einem Formular dem [Form-Pattern](/03-patterns/01-patterns/forms). Dort sind Aufbau, Validierung und Fehlerbehandlung geregelt. --- # States In einer RadioGroup sollte immer eine sinnvolle Option vorausgewählt (**Selected**) sein. ## Disabled Um Optionen in der RadioGroup zu deaktivieren, lässt sich der Disabled-State für die gesamte RadioGroup oder gezielt für einzelne Radios bzw. RadioButtons setzen. ```tsx import { RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; Domain buchen Domain buchen Domain buchen Domain buchen ``` ## Error Ein Error-State wird angezeigt, wenn etwas schiefgelaufen ist (siehe [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen)). Da meist eine Option vorselektiert ist, wird er nur selten benötigt. ```tsx import { FieldError, Label, RadioButton, RadioGroup, } from "@mittwald/flow-react-components"; MySQL Redis Bitte wähle eine Option aus ``` --- # RadioButtons Um Inhalte stärker hervorzuheben und die Klickfläche zu vergrößern, lassen sich statt `` auch `` nutzen. ```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) 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), 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 ``` --- # FieldDescription Für eine kurze Hilfestellung zu den Optionen kann unterhalb der `` oder `` eine `` 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. ``` --- # Kombiniere mit … ## ContextualHelp Benutze die [ContextualHelp](/04-components/overlays/contextual-help) Component, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind. ```tsx import { Button, ContextualHelp, ContextualHelpTrigger, Label, Radio, RadioGroup, Text, } from "@mittwald/flow-react-components";