Playground

Verwende <RadioGroup variant="segmented" />, um ein SegmentedControl anzuzeigen.

import {
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components/RadioGroup";
import { Label } from "@mittwald/flow-react-components/Label";

<RadioGroup variant="segmented" defaultValue="ssh-key">
  <Label>Authentifizierungsart</Label>
  <Radio value="ssh-key">SSH-Key</Radio>
  <Radio value="passwort">Passwort</Radio>
</RadioGroup>

Mit Inhaltsänderung

Unterhalb des SegmentedControls kann sich der Inhalt je nach Bedarf ändern. Verwende dafür ...<RadioGroup variant="segmented" />

import {
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components/RadioGroup";
import { Label } from "@mittwald/flow-react-components/Label";
import { useState } from "react";
import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";
import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
import { TextField } from "@mittwald/flow-react-components/TextField";
import { Section } from "@mittwald/flow-react-components/Section";

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

  return (
    <Section>
      <RadioGroup
        variant="segmented"
        defaultValue="lastschrift"
        s={[1, 1]}
        onChange={() => setShowContent(!showContent)}
      >
        <Label>Zahlungsart</Label>
        <Radio value="lastschrift">Lastschrift</Radio>
        <Radio value="Rechnung">Rechnung</Radio>
        {showContent && (
          <FieldDescription>
            Wähle bitte eine Bankverbindung für die
            Bezahlung mit SEPA-Lastschrift aus.
          </FieldDescription>
        )}
      </RadioGroup>
      {showContent && (
        <ColumnLayout>
          <TextField isRequired>
            <Label>Kontoinhaber</Label>
          </TextField>
          <TextField isRequired>
            <Label>IBAN</Label>
          </TextField>
        </ColumnLayout>
      )}
    </Section>
  );
}

Kombiniere mit...

FieldDescription

Unterhalb der <RadioGroup variant="segmented" /> kann eine hilfreiche <FieldDescription /> eingebaut werden.

import {
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components/RadioGroup";
import { Label } from "@mittwald/flow-react-components/Label";
import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";

<RadioGroup variant="segmented" defaultValue="cloud">
  <Label>Speicherplatz</Label>
  <Radio value="cloud">Cloud</Radio>
  <Radio value="lokal">Lokal</Radio>
  <FieldDescription>
    Speicherplatz kann jederzeit geändert werden
  </FieldDescription>
</RadioGroup>

States

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

import {
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components/RadioGroup";
import { Label } from "@mittwald/flow-react-components/Label";
import { Section } from "@mittwald/flow-react-components/Section";

<Section>
  <RadioGroup variant="segmented" defaultValue="dev">
    <Label>Rolle</Label>
    <Radio value="entwickler">Entwickler</Radio>
    <Radio value="designer">Designer</Radio>
    <Radio value="geschäftsführer">Geschäftsführer</Radio>
    <Radio value="andere">Andere</Radio>
  </RadioGroup>
  <RadioGroup
    variant="segmented"
    defaultValue="dev"
    isDisabled
  >
    <Label>Rolle</Label>
    <Radio value="entwickler">Entwickler</Radio>
    <Radio value="designer">Designer</Radio>
    <Radio value="geschäftsführer">Geschäftsführer</Radio>
    <Radio value="andere">Andere</Radio>
  </RadioGroup>
</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.

import {
  Radio,
  RadioGroup,
} from "@mittwald/flow-react-components/RadioGroup";
import { Label } from "@mittwald/flow-react-components/Label";
import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";

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

Grundlagen

Best practices

Achte bei der Verwendung eines SegmentedControl darauf, dass...

• maximal 5 Optionen angezeigt werden.
• die Optionen so kurz wie möglich benannt werden. 1 bis 3 Wörter sollten ausreichen.
• ein Label verwendet wird, falls die Optionen im Zusammenhang nicht verstanden werden. Falls kein Label verwendet wird, muss ein AriaLabel gesetzt werden.
• eine logische Reihenfolge gewählt wird. Häufig sollte die wichtigste Option an erster Stelle stehen.

Verwendung

Verwende einen SegmentedControl, um...

• eine platzsparende Einfachauswahlmöglichkeit anzubieten.
• einen Teil des Contents unterhalb zu ändern oder zu filtern. Ein SegmentedControl ist kein Ersatz für Tabs, welche den gesamten Content einer Seite ändern.

SegmentedControl vs. RadioGroup

Flow bietet verschiedene Auswahl-Components an. Das SegmentedControl und die RadioGroup haben viele Gemeinsamkeiten. Die Cards unter dem Text geben hilfreiche Anhaltspunkte zur Unterscheidung.

Anwendung

Position

Das SegmentedControl wird häufig in Formularen oder als Ansichtsfilter verwendet. Bei der Positionierung ist Folgendes zu beachten:

• In der Regel nimmt das SegmentedControl die gesamte Breite des Content-Bereiches ein. In Ausnahmefällen kann das SegmentedControl auch schmaler dargestellt werden, z. B. wenn es nicht in Formularen, sondern nur als Ansichtsfilter über Diagrammen verwendet wird.
• Wenn Inhalte mithilfe des SegmentedControls geändert werden sollen, muss das SegmentedControl direkt über dem zu ändernden Inhaltsbereich stehen.

Hierarchie

Ein SegmentedControl darf maximal 5 Optionen enthalten. Bei der Reihenfolge der Optionen ist folgendes zu beachten:

• Die wichtigste Option sollte an erster Stelle stehen und wird automatisch vorselektiert.
• Nicht nur das gesamte SegmentedControl kann disabled sein, sondern auch einzelne Optionen. Wenn eine Option disabled ist, sollte es von der Ausgangssituation für den User logisch sein, warum er diese Option nicht auswählen kann.

Feedback

Der selektierte Zustand einer Option ist an der geänderten Farbe und dem Häkchensymbol zu erkennen. Aus diesem Grund sollte das Icon nicht verändert werden. In der aktuellen Version des SegmentedControls sind keine dekorativen oder alleinstehenden Icons vorgesehen.

Writing guidelines

Text

Das SegmentedControl hat Text in den Optionen und im Label. Dabei ist Folgendes zu beachten:

• Wenn ein Label verwendet wird, sollte es so kurz wie möglich ausformuliert sein. Der Text des Labels sollte nie mehr als 1-3 Wörter umfassen. Ein Label kann ausgelassen werden, wenn die Optionen auch ohne Label ausreichend verständlich sind.
• Im besten Fall sollte eine Option aus einem selbsterklärenden Wort bestehen. Wenn nötig, können auch 2-3 Wörter verwendet werden. Es ist jedoch darauf zu achten, dass der Text nicht zweizeilig wird und zusammen mit dem Icon genügend Platz zur Verfügung steht.

Behavior

Responsive layout

Sobald die Breite des Containers kleiner als 551px ist, werden alle Optionen im SegmentedControl untereinander dargestellt. Dieser Wert kann mit containerBreakpointSize angepasst werden. Auch bei schmaleren Containerns sollte vermieden werden, dass der Text zweizeilig wird oder nicht mehr lesbar ist.

Accessibility

Falls SegmentedControl ohne Label verwendet wird, muss ein AriaLabel gepflegt werden.