# SegmentedControl

Ein SegmentedControl bietet dem User eine Einfachauswahl von 2 bis 5 kurzen Optionen. Je nach Einsatzzweck kann die Auswahl des Users den Inhalt unter dem Segmented Control verändern.

## Overview

# Playground

Verwende `<SegmentedControl />`, um ein SegmentedControl anzuzeigen.

```tsx
import {
  Label,
  Segment,
  SegmentedControl,
} from "@mittwald/flow-react-components";

<SegmentedControl defaultValue="ssh-key">
  <Label>Authentifizierungsart</Label>
  <Segment value="ssh-key">SSH-Key</Segment>
  <Segment value="passwort">Passwort</Segment>
</SegmentedControl>
```

---

# Mit Inhaltsänderung

Unterhalb des SegmentedControls kann sich der Inhalt je nach Bedarf ändern.

```tsx
import {
  ColumnLayout,
  FieldDescription,
  Label,
  Section,
  Segment,
  SegmentedControl,
  TextField,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [showContent, setShowContent] =
    useState<boolean>(false);

  return (
    <Section>
      <SegmentedControl
        defaultValue="lastschrift"
        onChange={() => setShowContent(!showContent)}
      >
        <Label>Zahlungsart</Label>
        <Segment value="lastschrift">Lastschrift</Segment>
        <Segment value="Rechnung">Rechnung</Segment>
        {showContent && (
          <FieldDescription>
            Wähle bitte eine Bankverbindung für die
            Bezahlung mit SEPA-Lastschrift aus.
          </FieldDescription>
        )}
      </SegmentedControl>
      {showContent && (
        <ColumnLayout>
          <TextField isRequired>
            <Label>Kontoinhaber</Label>
          </TextField>
          <TextField isRequired>
            <Label>IBAN</Label>
          </TextField>
        </ColumnLayout>
      )}
    </Section>
  );
}
```

---

# Mit FieldDescription

Innerhalb der `<SegmentedControl />` kann eine hilfreiche `<FieldDescription />`
eingebaut werden.

```tsx
import {
  FieldDescription,
  Label,
  Segment,
  SegmentedControl,
} from "@mittwald/flow-react-components";

<SegmentedControl defaultValue="cloud">
  <Label>Speicherplatz</Label>
  <Segment value="cloud">Cloud</Segment>
  <Segment value="lokal">Lokal</Segment>
  <FieldDescription>
    Speicherplatz kann jederzeit geändert werden
  </FieldDescription>
</SegmentedControl>
```

---

# Disbaled

Einzelne Optionen oder die gesamte SegmentedControl können über `isDisabled`
disabled werden.

```tsx
import {
  Label,
  Section,
  Segment,
  SegmentedControl,
} from "@mittwald/flow-react-components";

<Section>
  <SegmentedControl defaultValue="entwickler">
    <Label>Rolle</Label>
    <Segment value="entwickler">Entwickler</Segment>
    <Segment value="designer" isDisabled>
      Designer
    </Segment>
    <Segment value="geschäftsführer">
      Geschäftsführer
    </Segment>
    <Segment value="andere">Andere</Segment>
  </SegmentedControl>
  <SegmentedControl defaultValue="entwickler" isDisabled>
    <Label>Rolle</Label>
    <Segment value="entwickler">Entwickler</Segment>
    <Segment value="designer">Designer</Segment>
    <Segment value="geschäftsführer">
      Geschäftsführer
    </Segment>
    <Segment value="andere">Andere</Segment>
  </SegmentedControl>
</Section>
```

---

# Container Breakpoint Size

Das SegmentedControl springt in eine kompakte Variante um, sobald der Container
kleiner als der gesetzte Breakpoint ist. Im Default passiert das bei 550px, was
der `containerBreakpointSize="m"` entspricht. Über diese Property kann die Größe
mit Werten zwischen `xs` und `xl` überschrieben werden.

```tsx
import {
  ColumnLayout,
  Label,
  Segment,
  SegmentedControl,
} from "@mittwald/flow-react-components";

<ColumnLayout m={[1, 1]}>
  <SegmentedControl
    defaultValue="entwickler"
    containerBreakpointSize="xl"
  >
    <Label>Rolle</Label>
    <Segment value="entwickler">Entwickler</Segment>
    <Segment value="geschäftsführer">
      Geschäftsführer
    </Segment>
    <Segment value="andere">Andere</Segment>
  </SegmentedControl>

  <SegmentedControl
    defaultValue="entwickler"
    containerBreakpointSize="xs"
  >
    <Label>Rolle</Label>
    <Segment value="entwickler">Entwickler</Segment>
    <Segment value="geschäftsführer">
      Geschäftsführer
    </Segment>
    <Segment value="andere">Andere</Segment>
  </SegmentedControl>
</ColumnLayout>
```

---

# 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,
  Segment,
  SegmentedControl,
  Text,
} from "@mittwald/flow-react-components";

<SegmentedControl defaultValue="lastschrift">
  <Label>
    Zahlungsart
    <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>
  <Segment value="lastschrift">Lastschrift</Segment>
  <Segment value="Rechnung">Rechnung</Segment>
</SegmentedControl>
```

## React Hook Form

```tsx
import {
  Label,
  Section,
  Segment,
  SegmentedControl,
} 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<{ payment: "debit" | "invoice" }>({
    defaultValues: { payment: "debit" },
  });
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="payment"
          rules={{
            required: "Bitte wähle eine Zahlungsart aus",
          }}
        >
          <SegmentedControl>
            <Label>Zahlungsart</Label>
            <Segment value="debit">Lastschrift</Segment>
            <Segment value="invoice">Rechnung</Segment>
          </SegmentedControl>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```