mittwald Flow Logo

Components

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

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

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

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.

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

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

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

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

Mit FieldDescription

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

Wie viele Pflanzen besitzt du?
Mehrere identische Pflanzen in einem Topf gelten als eine Pflanze.
import {
  FieldDescription,
  Label,
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components";

<RadioGroup defaultValue="more">
  <Label>Wie viele Pflanzen besitzt du?</Label>
  <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>

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

Datenbank-Typ
Bitte wähle eine Option aus
import {
  FieldError,
  Label,
  RadioButton,
  RadioGroup,
} from "@mittwald/flow-react-components";

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

Kombiniere mit ...

ContextualHelp

Benutze die ContextualHelp Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

Täglicher Kaffeekonsum
import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  Radio,
  RadioGroup,
  Text,
} from "@mittwald/flow-react-components";

<RadioGroup defaultValue="more">
  <Label>
    Täglicher Kaffeekonsum
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
  <Radio value="more">Mehr als 6 Tassen</Radio>
  <Radio value="5-6">5-6 Tassen</Radio>
  <Radio value="3-4">3-4 Tassen</Radio>
  <Radio value="1-2">1-2 Tassen</Radio>
  <Radio value="none">Trinke keinen Kaffee</Radio>
</RadioGroup>

React Hook Form

Täglicher Kaffeekonsum
import {
  Button,
  Label,
  Radio,
  RadioGroup,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-components/actions/action/examples/lib";

export default () => {
  const form = useForm<{ coffee: string }>({
    defaultValues: { coffee: "more" },
  });
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="coffee"
          rules={{
            required: "Bitte gib deinen Kaffeekonsum an",
          }}
        >
          <RadioGroup>
            <Label>Täglicher Kaffeekonsum</Label>
            <Radio value="more">Mehr als 6 Tassen</Radio>
            <Radio value="5-6">5-6 Tassen</Radio>
            <Radio value="3-4">3-4 Tassen</Radio>
            <Radio value="1-2">1-2 Tassen</Radio>
            <Radio value="none">Trinke keinen Kaffee</Radio>
          </RadioGroup>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview