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

Das SegmentedControl hat zwei verschiedene Aufgaben übernommen. Welche Component es ersetzt, entscheidet die Aufgabe an der jeweiligen Stelle:

Schaltet die Auswahl den Inhalt darunter um, ersetzen Tabs‍ das SegmentedControl.
Setzt die Auswahl einen Wert – etwa in einem Formular oder in Einstellungen – ersetzt eine RadioGroup‍ das SegmentedControl.
Migriere von Hand. Es gibt keinen Codemod: welche Component passt, hängt an der Aufgabe und ist pro Verwendung zu entscheiden. Die Diffs für beide Wege stehen in der MIGRATION.md‍.
SegmentedControl gibt zur Laufzeit eine Deprecation-Warnung aus und wird in einer zukünftigen Major-Version entfernt. Bis dahin bleibt der alte Pfad abgesichert (siehe Versionierung & Stabilität‍).

Inhalte umschalten: Tabs

Ein SegmentedControl, dessen Auswahl den Inhalt darunter austauscht, ist ein Content Switcher – und damit die Aufgabe von Tabs‍. Aus jedem <Segment /> wird ein <Tab />, dessen Titel im <TabTitle /> steht und dessen Inhalt direkt im Tab liegt. Das Label und der State für den angezeigten Inhalt entfallen.

App Content

Container Content

Werte auswählen: RadioGroup

Ein SegmentedControl, dessen Auswahl einen Wert setzt, wird zu einer RadioGroup‍. Aus jedem <Segment /> wird ein <Radio />; Label, FieldDescription, FieldError und die Anbindung an React Hook Form‍ bleiben unverändert.

Zahlungsart(optional)Die Zahlungsart kann jederzeit geändert werden

Properties

Property	Type	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>default: '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 (default) \| aria	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`	Orientationdefault: '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	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	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