SegmentedControl

Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen.

Zahlungsart(optional)

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

<SegmentedControl defaultValue="lastschrift">
  <Label>Zahlungsart</Label>
  <Segment value="lastschrift">Lastschrift</Segment>
  <Segment value="Rechnung">Rechnung</Segment>
</SegmentedControl>

Best Practices

Zeige höchstens fünf kurze Optionen an. Ideal ist ein selbsterklärendes Wort, höchstens ein bis drei Wörter, ohne dass der Text zweizeilig wird.
Stelle die wichtigste Option zuerst. Sie wird automatisch vorselektiert.
Beschreibe die Optionen mit einem Label, falls sie im Zusammenhang nicht verständlich sind. Fehlt das Label, setze ein aria-label.

SegmentedControl vs. RadioGroup

SegmentedControl und RadioGroup haben viele Gemeinsamkeiten.

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

eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen.
Optionen anzuzeigen, die aus 1 bis 2 Wörtern bestehen.

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

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

Mit Inhaltsänderung

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

Zahlungsart(optional)

FieldDescription

Für eine kurze Hilfestellung zu den Optionen kann innerhalb des <SegmentedControl /> eine <FieldDescription /> eingebaut werden.

Speicherplatz(optional)Speicherplatz kann jederzeit geändert werden

Container Breakpoint Size

Sobald der Container schmaler als der gesetzte Breakpoint ist, stellt das SegmentedControl seine Optionen untereinander dar. Im Default passiert das bei 550 px (containerBreakpointSize="m"); über die Property lässt sich die Größe mit Werten zwischen xs und xl überschreiben. Achte darauf, dass der Text auch dann nicht zweizeilig oder unlesbar wird.

Rolle(optional)

Disabled

Einzelne Optionen oder das gesamte SegmentedControl können über isDisabled deaktiviert werden. Achte darauf, dass aus dem Kontext klar wird, warum eine Option gerade nicht auswählbar ist.

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

Properties

Property	Type	Default	Description
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`translate`	`"yes" \| "no"`	-
`className`	`ClassNameOrFunction<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.
`style`	`StyleOrFunction<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.
`render`	`DOMRenderFunction<"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.
`dir`	`string`	-
`lang`	`string`	-
`hidden`	`boolean`	-
`inert`	`boolean`	-
`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.
`isDisabled`	`boolean`	-	Whether the input is disabled.
`isReadOnly`	`boolean`	-	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean`	-	Whether user input is required on the input before form submission.
`isInvalid`	`boolean`	-	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.
`value`	`TimeValue`	-	The current value (controlled).
`defaultValue`	`TimeValue`	-	The default value (uncontrolled).
`name`	`string`	-	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).
`form`	`string`	-	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).
`slot`	`string`	-	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.
`orientation`	`Orientation`	'vertical'	The axis the Radio Button(s) should align with.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`ref`	`Ref<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
`key`	`Key`	-
`containerBreakpointSize`	`ContainerBreakpointSize`	-	The breakpoint at which the element switches to its compact layout. Evaluated as a container query against the surrounding container, not against the viewport.

Events

Property	Type	Default	Description
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClick`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDown`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onTouchCancel`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture`	`UIEventHandler<HTMLDivElement>`	-
`onWheel`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture`	`TransitionEventHandler<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

Property	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-errormessage`	`string`	-	Identifies the element that provides an error message for the object.

Components

Integrations

SegmentedControl

Best Practices

SegmentedControl vs. RadioGroup

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

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

Mit Inhaltsänderung

FieldDescription

Container Breakpoint Size

Disabled

Kombiniere mit …

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite