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(optional)

Playground

Verwende <SegmentedControl />, um ein SegmentedControl anzuzeigen.

Authentifizierungsart(optional)
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(optional)

Mit FieldDescription

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

Speicherplatz(optional)Speicherplatz kann jederzeit geändert werden

Disbaled

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

Rolle(optional)
Rolle(optional)

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(optional)
Rolle(optional)

Kombiniere mit ...

ContextualHelp

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

Zahlungsart(optional)

React Hook Form

Zahlungsart

Overview