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

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.

Verwende ein SegmentedControl, um z. B. ...

  • eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen. - Optionen anzuzeigen, die aus 1 bis 2 Wörtern bestehen.
  • Optionen anzuzeigen, die den darunterliegenden Inhalt verändern.

Verwende eine RadioGroup, um z. B. ...

  • eine Einfachauswahl von 2 bis ungefähr 7 Optionen anzuzeigen.
  • Optionen mit unterschiedlicher Textlänge darzustellen.

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

Do

Das SegmentedControl steht über dem angepassten Inhalt.

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

Do

Das Label und die Antwortmöglichkeiten sind prägnant und verständlich.

Wähle deine Einstellungsart aus:(optional)

Don't

Kürzer ist oft besser. Versuche, so wenig Wörter wie möglich im Label und in den Optionen zu verwenden.

Verhalten

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.

Authentifizierungsart(optional)

Mobile Variante

Accessibility

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

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

Zahlungsart(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Zahlungsart

Properties

PropertyTypeDefaultDescription
classNameClassNameOrFunction<RadioGroupRenderProps>'react-aria-RadioGroup'The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
styleStyleOrFunction<TooltipRenderProps>-The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
renderDOMRenderFunction<"div", TooltipRenderProps>-Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
dirstring-
langstring-
hiddenboolean-
inertboolean-
translate"yes" | "no"-
validationBehavior"native" | "aria"'native'Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
isDisabledboolean-Whether the input is disabled.
isReadOnlyboolean-Whether the input can be selected but not changed by the user.
isRequiredboolean-Whether user input is required on the input before form submission.
isInvalidboolean-Whether the input value is invalid.
validate((value: TimeValue) => true | ValidationError)-A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
valueTimeValue-The current value (controlled).
defaultValueTimeValue-The default value (uncontrolled).
idstring-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
namestring-The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
formstring-The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
slotstring-A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
orientationOrientation'vertical'The axis the Radio Button(s) should align with.
childrenReactNode-
wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
refRef<HTMLSpanElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
keyKey-
containerBreakpointSizeContainerBreakpointSize-

Events

PropertyTypeDefaultDescription
onClickMouseEventHandler<HTMLDivElement>-
onClickCaptureMouseEventHandler<HTMLDivElement>-
onAuxClickMouseEventHandler<HTMLDivElement>-
onAuxClickCaptureMouseEventHandler<HTMLDivElement>-
onContextMenuMouseEventHandler<HTMLDivElement>-
onContextMenuCaptureMouseEventHandler<HTMLDivElement>-
onDoubleClickMouseEventHandler<HTMLDivElement>-
onDoubleClickCaptureMouseEventHandler<HTMLDivElement>-
onMouseDownMouseEventHandler<HTMLDivElement>-
onMouseDownCaptureMouseEventHandler<HTMLDivElement>-
onMouseEnterMouseEventHandler<HTMLDivElement>-
onMouseLeaveMouseEventHandler<HTMLDivElement>-
onMouseMoveMouseEventHandler<HTMLDivElement>-
onMouseMoveCaptureMouseEventHandler<HTMLDivElement>-
onMouseOutMouseEventHandler<HTMLDivElement>-
onMouseOutCaptureMouseEventHandler<HTMLDivElement>-
onMouseOverMouseEventHandler<HTMLDivElement>-
onMouseOverCaptureMouseEventHandler<HTMLDivElement>-
onMouseUpMouseEventHandler<HTMLDivElement>-
onMouseUpCaptureMouseEventHandler<HTMLDivElement>-
onTouchCancelTouchEventHandler<HTMLDivElement>-
onTouchCancelCaptureTouchEventHandler<HTMLDivElement>-
onTouchEndTouchEventHandler<HTMLDivElement>-
onTouchEndCaptureTouchEventHandler<HTMLDivElement>-
onTouchMoveTouchEventHandler<HTMLDivElement>-
onTouchMoveCaptureTouchEventHandler<HTMLDivElement>-
onTouchStartTouchEventHandler<HTMLDivElement>-
onTouchStartCaptureTouchEventHandler<HTMLDivElement>-
onPointerDownPointerEventHandler<HTMLDivElement>-
onPointerDownCapturePointerEventHandler<HTMLDivElement>-
onPointerMovePointerEventHandler<HTMLDivElement>-
onPointerMoveCapturePointerEventHandler<HTMLDivElement>-
onPointerUpPointerEventHandler<HTMLDivElement>-
onPointerUpCapturePointerEventHandler<HTMLDivElement>-
onPointerCancelPointerEventHandler<HTMLDivElement>-
onPointerCancelCapturePointerEventHandler<HTMLDivElement>-
onPointerEnterPointerEventHandler<HTMLDivElement>-
onPointerLeavePointerEventHandler<HTMLDivElement>-
onPointerOverPointerEventHandler<HTMLDivElement>-
onPointerOverCapturePointerEventHandler<HTMLDivElement>-
onPointerOutPointerEventHandler<HTMLDivElement>-
onPointerOutCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCapturePointerEventHandler<HTMLDivElement>-
onGotPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCapturePointerEventHandler<HTMLDivElement>-
onLostPointerCaptureCapturePointerEventHandler<HTMLDivElement>-
onScrollUIEventHandler<HTMLDivElement>-
onScrollCaptureUIEventHandler<HTMLDivElement>-
onWheelWheelEventHandler<HTMLDivElement>-
onWheelCaptureWheelEventHandler<HTMLDivElement>-
onAnimationStartAnimationEventHandler<HTMLDivElement>-
onAnimationStartCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationEndAnimationEventHandler<HTMLDivElement>-
onAnimationEndCaptureAnimationEventHandler<HTMLDivElement>-
onAnimationIterationAnimationEventHandler<HTMLDivElement>-
onAnimationIterationCaptureAnimationEventHandler<HTMLDivElement>-
onTransitionCancelTransitionEventHandler<HTMLDivElement>-
onTransitionCancelCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionEndTransitionEventHandler<HTMLDivElement>-
onTransitionEndCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionRunTransitionEventHandler<HTMLDivElement>-
onTransitionRunCaptureTransitionEventHandler<HTMLDivElement>-
onTransitionStartTransitionEventHandler<HTMLDivElement>-
onTransitionStartCaptureTransitionEventHandler<HTMLDivElement>-
onFocus((e: FocusEvent<Element, Element>) => void)-Handler that is called when the element receives focus.
onBlur((e: FocusEvent<Element, Element>) => void)-Handler that is called when the element loses focus.
onFocusChange((isFocused: boolean) => void)-Handler that is called when the element's focus status changes.
onChange((value: TimeValue) => void)-Handler that is called when the value changes.

Accessibility

PropertyTypeDefaultDescription
aria-labelstring-Defines a string value that labels the current element.
aria-labelledbystring-Identifies the element (or elements) that labels the current element.
aria-describedbystring-Identifies the element (or elements) that describes the object.
aria-detailsstring-Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-errormessagestring-Identifies the element that provides an error message for the object.

Auf dieser Seite