# RadioGroup

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

## Overview

# Playground

Verwende `<RadioGroup />` zusammen mit mehreren `<Radio />`, 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";

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

```tsx
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](/04-components/content/text/overview) für eine
Überschrift und `<Content />` für Fließtext.

```tsx
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](/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";

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

```tsx
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**.

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

```tsx
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](/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";

<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

```tsx
import {
  Label,
  Radio,
  RadioGroup,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-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>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```