SegmentedControl
Zahlungsart(optional)
<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. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel. |
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. |
Design Tokens
Größen & Stile
| Token | Wert |
|---|---|
--form-control--label-to-control-spacing | 0.25rem |
--form-control--control-to-info-spacing | 0.25rem |
--form-control--spacing-x | 0.5rem |
--form-control--spacing-y | 0.25rem |
--form-control--padding-x | 16px |
--form-control--padding-y | 8px |
--form-control--corner-radius | 8px |
--form-control--border-width | 1px |
--form-control--border-style | solid |
Farben
| Token | Light | Dark |
|---|---|---|
--form-control--placeholder-color--default | #5E6C7A | #DCE9F7 |
--form-control--placeholder-color--disabled | #B7C9DB | #8FA1B4 |
--form-control--border-color--default | #5E6C7A | #DCE9F7 |
--form-control--border-color--disabled | #DCE9F7 | #5E6C7A |
--form-control--border-color--invalid | #E1244C | #F2A2B3 |
--form-control--border-color--focused | #0054F5 | #85AFFF |
--form-control--border-color--selected | #5E6C7A | #DCE9F7 |
--form-control--background-color--default | #F4F8FC | #292F37 |
--form-control--background-color--disabled | #F4F8FC | #292F37 |
--form-control--background-color--hover | #E5EFF8 | #3A434E |
--form-control--background-color--focused | #F4F8FC | #292F37 |
--form-control--background-color--invalid | #FDF0F3 | #540B1B |
--form-control--background-color--selected | #DCE9F7 | #5E6C7A |
--form-control--content-color--default | #1B1F24 | #FFFFFF |
--form-control--content-color--disabled | #B7C9DB | #8FA1B4 |
--form-control--content-color--selected | #1B1F24 | #FFFFFF |