mittwald Flow Logo

Components

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

Playground

Verwende <SegmentedControl />, um ein SegmentedControl anzuzeigen.

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

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

Speicherplatz
Speicherplatz kann jederzeit geändert werden
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>

States

Eine SegmentedControl hat 2 States: Default und Disabled. Die Optionen verfügen über die States Default, Hover, Pressed, Disabled, Focused und Selected.

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

<Section>
  <SegmentedControl defaultValue="dev">
    <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>
  <SegmentedControl defaultValue="dev" 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>

  • Selected: Wird eine Option vom User ausgewählt, so erhält er den Zustand Selected. Es kann immer nur eine Option diesen Status haben. Zu Beginn ist immer die erste Option vorausgewählt.

  • Disabled: Einzelne Optionen oder die gesamte SegmentedControl können den State Disabled haben. Wenn die SegmentedControl den State Disabled erhält, erhalten automatisch auch alle Optionen ebenfalls diesen State, sodass sie vom User nicht ausgewählt werden können.

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.

Rolle
Rolle
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 Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

Zahlungsart
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

Zahlungsart
import {
  Button,
  Label,
  Section,
  Segment,
  SegmentedControl,
} 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<{ 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>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview