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
`children`	ReactNode
`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.
`containerBreakpointSize`	s \| xs \| m \| l \| xl	The breakpoint at which the element switches to its compact layout. Evaluated as a container query against the surrounding container, not against the viewport.
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`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).
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`isDisabled`	boolean	Whether the input is disabled.
`isInvalid`	boolean	Whether the input value is invalid.
`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.
`lang`	string
`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).
`orientation`	horizontal \| vertical (default)	The axis the Radio Button(s) should align with.
`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.
`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.
`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.
`translate`	yes \| no
`validate`	((value: TimeValue) => true \| ValidationError \| null)	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.
`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.
`value`	TimeValue	The current value (controlled).
`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.

Events

Property	Type	Description
`onBlur`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element loses focus.
`onChange`	((value: TimeValue \| null) => void)	Handler that is called when the value changes.
`onClick`	MouseEventHandler<HTMLDivElement>
`onFocus`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the element receives focus.
`onFocusChange`	((isFocused: boolean) => void)	Handler that is called when the element's focus status changes.

Accessibility

Property	Type	Description
`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.
`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.

Components

Integrations