# SegmentedControl
Ein SegmentedControl bietet eine Einfachauswahl aus 2 bis 5 kurzen Optionen.
```tsx
import {
Label,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
LastschriftRechnung
```
---
# 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](/04-components/structure/tabs) das SegmentedControl.
- Setzt die Auswahl einen Wert – etwa in einem Formular oder in Einstellungen –
ersetzt eine [RadioGroup](/04-components/form-controls/radio-group) 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](https://github.com/mittwald/flow/blob/main/packages/components/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](/01-get-started/versioning)).
---
# Inhalte umschalten: Tabs
Ein SegmentedControl, dessen Auswahl den Inhalt darunter austauscht, ist ein
Content Switcher – und damit die Aufgabe von
[Tabs](/04-components/structure/tabs). Aus jedem `` wird ein
``, dessen Titel im `` steht und dessen Inhalt direkt im Tab
liegt. Das Label und der State für den angezeigten Inhalt entfallen.
```tsx
import {
Tab,
Tabs,
TabTitle,
} from "@mittwald/flow-react-components";
Mit App verbinden
App Content
Mit Container verbinden
Container Content
```
---
# Werte auswählen: RadioGroup
Ein SegmentedControl, dessen Auswahl einen Wert setzt, wird zu einer
[RadioGroup](/04-components/form-controls/radio-group). Aus jedem ``
wird ein ``; Label, FieldDescription, FieldError und die Anbindung an
[React Hook Form](/04-components/react-hook-form/form) bleiben unverändert.
```tsx
import {
FieldDescription,
Label,
Radio,
RadioGroup,
} from "@mittwald/flow-react-components";
LastschriftRechnung
Die Zahlungsart kann jederzeit geändert werden
```
---
# 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` | `'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` | - | 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 `