# React Segmented Control: iOS-Thumb, Drag, wann es passt

> Ein React Segmented Control mit ziehbarem iOS-Thumb, 44px Touch-Zielen und Radio-Semantik. Dazu: wann Tabs, Toggle Group oder Radio Cards besser passen.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 9. Okt. 2026
- Kategorie: [Mobile UI mit React](https://wingo-ui.com/de/blog/category/mobile-ui)
- Lesezeit: 8 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-segmented-control
- Englische Fassung: https://wingo-ui.com/blog/react-segmented-control

## Kurz gesagt

Ein React Segmented Control ist eine Radio-Gruppe, dargestellt als Reihe aus 2 bis 5 Segmenten mit einem erhabenen Thumb auf dem ausgewählten: ein Tab-Stopp, Pfeiltasten, die bewegen und auswählen, und 44px Höhe auf Touchscreens. Nimm es, wenn die Auswahl den Inhalt ändert, der schon auf dem Screen ist (ein Zeitraum, eine Ansicht, Einheiten); nimm Tabs, wenn ein anderes Panel erscheint, eine Toggle Group, wenn mehrere Optionen an sein können, und Radio Cards, wenn jede Option eine Beschreibung braucht. Das kostenlose Segmented Control von Wingo UI ergänzt die iOS-Details: einen federnden Thumb, den du mit dem Finger seitwärts ziehst, während ein vertikaler Swipe weiter die Seite scrollt.

Ein React Segmented Control ist die Reihe aus zwei bis fünf Optionen mit einem erhabenen Thumb unter der ausgewählten, das Control, mit dem du in der Health-App auf iOS den Zeitraum der Diagramme wählst. Wer nach einem iOS Segmented Control Web-Component sucht, findet vor allem Pakete für React Native, und shadcn/ui liefert im Oktober 2026 keins. Dieser Guide zeigt, was die Web-Version richtig machen muss (Thumb, Touch, Tastatur und Radio-Semantik), und dann die wichtigere Entscheidung: wann Tabs, eine Toggle Group oder Radio Cards das bessere Control sind. Die Beispiele nutzen das kostenlose [Segmented Control](https://wingo-ui.com/components/segmented-control) von Wingo UI, der Bibliothek, die wir bauen. Wir sind also nicht neutral; Fakten von außen verlinken auf ihre Quellen.

## Was ist ein Segmented Control im Web?

Eine Radio-Gruppe mit anderem Aussehen. Jedes Segment ist eine Option, genau eine ist ausgewählt, und die Auswahl gilt sofort, ohne Absende-Button. Apples [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) beschreiben es als Weg, eng verwandte Optionen anzubieten, die ein Objekt, einen Zustand oder eine Ansicht beeinflussen. Material Design 3 hat einen nahen Verwandten, den [Segmented Button](https://m3.material.io/components/segmented-buttons/overview). Deshalb wird das Control auch als React Segmented Button gesucht.

Damit ist die Umsetzung klar: Das Markup ist eine `radiogroup` mit `radio`-Items, das [WAI-ARIA Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) legt die Tastatur fest, und ein `name` sorgt dafür, dass es wie native Radios abgeschickt wird. Thumb, Spring-Animation und Drag kommen obendrauf.

## Wie fügst du ein Segmented Control in React ein?

Installier es, übergib `options` und lass es seinen Wert selbst verwalten oder steuere ihn von außen:

```bash
npx wingo-ui@latest add segmented-control
```

```tsx
"use client";

import { useState } from "react";
import { SegmentedControl, type SegmentedControlOption } from "@/components/ui/segmented-control";

const periods: SegmentedControlOption[] = [
  { value: "day", label: "Tag" },
  { value: "week", label: "Woche" },
  { value: "month", label: "Monat" },
  { value: "year", label: "Jahr" },
];

export function SalesPeriod() {
  const [period, setPeriod] = useState("week");

  return (
    <SegmentedControl
      aria-label="Zeitraum"
      options={periods}
      value={period}
      onValueChange={setPeriod}
      fullWidth
    />
  );
}
```

Jede Option nimmt `value`, `label` und optional `icon`, `badge` (eine Zahl zeigt einen Zähler, der bei 0 verschwindet), `tooltip` und `disabled`. Die Props für das Aussehen sind `size` (`sm`, `md` oder `lg`, eine Leiste von 32, 40 oder 48px), `radius`, `tone` (Standard `neutral`, ein weißer Thumb wie auf iOS, der im Dark Mode zu einem angehobenen Grau wird) oder eine beliebige CSS-`color`, und `dividers`, die feinen Linien zwischen nicht ausgewählten Segmenten. Lässt du `defaultValue` weg, startet es auf der ersten aktivierten Option.

> Live-Demo (Segmented Control): Tipp oder klick auf Month, dann drück auf den Thumb und schieb ihn seitwärts: Der Wert folgt deinem Finger und die Umsatzsumme aktualisiert sich. Mit der Tastatur springst du per Tab hinein und nutzt die Pfeiltasten. Probier sie unter [Segmented Control](https://wingo-ui.com/components/segmented-control) aus und installier sie mit `npx wingo-ui@latest add segmented-control`.

Falls du ein React Segmented Control Tailwind-Rezept suchst: Das ganze Aussehen besteht aus Tailwind-v4-Utilities auf Design Tokens, und jeder innere Teil nimmt Klassen über `classNames` (`item`, `thumb`, `icon`, `label`, `badge`, `divider`). App-weite Standardwerte laufen über den kostenlosen [UIProvider](https://wingo-ui.com/components/ui-config): `<UIProvider defaults={{ "segmented-control": { radius: "full" } }}>` macht jedes Segmented Control in der App komplett rund.

## Warum fühlt es sich wie das iOS-Control an?

Drei Details: Der Thumb bewegt sich mit Spring-Physik statt mit einem linearen Tween, er folgt dem Finger, und er blockiert nie das Scrollen.

**Der Thumb animiert nur transform.** Er wird im ausgewählten Segment gerendert, also gibt ihm CSS im Ruhezustand die Größe. Ändert sich der Wert, misst er die Box, die er verlässt, springt per transform dorthin und federt mit der `snappy`-Spring aus `lib/motion` (stiffness 500, damping 32) zurück auf null Versatz. `left` und `width` zu animieren würde in jedem Frame das Layout neu berechnen; ein transform bleibt auf dem Compositor. Sein Eckenradius wird durch die aktuelle Skalierung geteilt, damit behält ein Thumb, der sich zwischen einem kurzen und einem langen Label streckt, runde Ecken. Eine Änderung mitten in der Bewegung startet dort, wo der Thumb gerade auf dem Screen ist, und behält seine Geschwindigkeit.

**Er reagiert auf den Finger.** Drückst du auf den Thumb, schrumpft er auf 96%. Hältst du weiter und schiebst seitwärts, folgt der Wert dem Segment unter deinem Finger und bleibt dort, wo du loslässt. Die feinen Linien neben dem Thumb blenden aus, wie auf iOS.

**Ein vertikaler Swipe scrollt weiter die Seite.** Die Leiste setzt `touch-action: pan-y`, damit der Browser das vertikale Scrollen behält, und der Code wartet 8px Bewegung ab, bevor er entscheidet, was die Geste ist. Diesen Teil solltest du übernehmen, wenn du ein eigenes baust. Gekürzt aus der Komponente:

```tsx
// Leiste: className="touch-pan-y"; drag.current wird bei pointerdown auf dem Thumb gesetzt, SLOP ist 8
function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
  const state = drag.current;
  if (!state || state.id !== event.pointerId) return;
  if (!state.active) {
    const dx = Math.abs(event.clientX - state.x);
    const dy = Math.abs(event.clientY - state.y);
    // zuerst vertikal: ein Seiten-Scroll, den bekommt der Browser
    if (dy > SLOP && dy > dx) return endPress();
    if (dx <= SLOP) return;
    state.active = true;
    event.currentTarget.setPointerCapture(event.pointerId);
  }
  // das Segment unter clientX aus den bei pointerdown gemessenen Rects wählen
}
```

`touch-action: none` auf der Leiste würde den Drag einfacher machen und jeden festhalten, der auf dem Control zu scrollen beginnt. Nach einem Drag landet der folgende Klick auf dem Segment, wo der Drag begann. Die Komponente verschluckt ihn deshalb, sonst springt der Wert zurück.

Ist „Bewegung reduzieren“ aktiv, springt der Thumb direkt an seinen neuen Platz, und das Schrumpfen beim Drücken ist aus.

## Ist ein Segmented Control barrierefrei?

Ja, wenn die Semantik eine Radio-Gruppe ist, und die bekommst du von Radix fast geschenkt. Das Segmented Control baut auf `@radix-ui/react-radio-group` auf: Die Leiste ist eine `radiogroup`, jedes Segment ein `radio` mit `aria-checked`, und das ganze Control ist ein einziger Tab-Stopp. Links und Rechts (auch Hoch und Runter) bewegen den Fokus und wählen aus, passend zur APG-Regel für eine Radio-Gruppe außerhalb einer Toolbar. Wir haben Pos1 und Ende ergänzt, deaktivierte Segmente werden übersprungen, und `loop={false}` stoppt die Pfeile an den Enden. Mantine geht denselben Weg: Laut der [SegmentedControl-Doku](https://mantine.dev/core/segmented-control/) (v9.7.1, Oktober 2026) arbeiten darunter Radio-Inputs.

Vier Dinge liegen bei dir:

- **Ein Name.** Übergib `aria-label` oder `aria-labelledby`, das auf eine sichtbare Überschrift zeigt; beide landen auf der radiogroup.
- **Text für Icons.** Gib Icon-Optionen trotzdem ein `label`. Mit `iconOnly` wird es zum `aria-label` des Segments und zu seinem Tooltip, der beim Hover, beim Tastaturfokus und bei langem Druck auf Touchscreens erscheint.
- **Ein Formularname.** Übergib `name`, dann wird der ausgewählte Wert in einem `<form>` wie bei nativen Radios mitgeschickt.
- **Ein Weg ohne Drag.** [WCAG 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) (Stufe AA) verlangt, dass alles, was per Drag geht, auch mit einem einzelnen Zeiger ohne Ziehen funktioniert. Das Tippen auf ein Segment ist dieser Weg, also behalte es. Mach den Drag nie zum einzigen Weg.

Eine Falle, wenn du selbst auf Radix baust: Radix wählt das nächste Radio nur aus, wenn die Pfeiltaste noch gedrückt ist, sobald der verzögerte Fokus ankommt. Ein sehr schneller Druck (ein Screenreader, eine Fernbedienung, Automatisierung) kann also den Fokus bewegen, ohne etwas auszuwählen. Die Komponente wählt bei jedem Fokus aus, der auf eine Pfeiltaste folgt, so ändert auch ein schneller Druck den Wert.

## Wie sollte sich ein Segmented Control auf dem Smartphone verhalten?

Es sollte auf Touch 44px hoch sein, die Breite teilen und beim Tippen nie grau aufblitzen. Die Größe `md` ist mit Maus eine Leiste von 40px und wächst auf Geräten mit grobem Zeiger auf 44px (`pointer-coarse:h-11`). Die Größe `sm` behält ihren 32px-Look und bekommt eine unsichtbare Trefferfläche, die 44px erreicht; `lg` ist überall 48px. Warum 44px, und welche Tailwind-Varianten das nur auf Touch anwenden, steht im Guide zur [minimalen Touch-Target-Größe in React und Tailwind](https://wingo-ui.com/de/blog/minimum-touch-target-size-react-tailwind).

`fullWidth` gibt jedem Segment einen gleichen Anteil am Container, das übliche Layout unter einem Header auf dem Smartphone. Ein Segment mit langem Label behält seine natürliche Breite, statt abgeschnitten zu werden, und die anderen teilen sich den Rest. Jedes Segment trägt `touch-manipulation` und eine transparente `-webkit-tap-highlight-color`. Ein schneller zweiter Tipp zoomt also nie die Seite, und iOS zeigt kein graues Aufblitzen. Setz `dir="rtl"`, dann spiegeln sich Layout, Pfeiltasten und Drag.

Die übrigen Regeln (Sheets statt Popover, Safe Areas, Alternativen zu Hover) stehen im Pillar-Artikel zu [Mobile-first React-Komponenten](https://wingo-ui.com/de/blog/mobile-first-react-components), und die Kategorie [Mobile UI in React](https://wingo-ui.com/de/blog/category/mobile-ui) sammelt jeden Guide zum Thema.

## Segmented Control, Tabs, Toggle Group oder Radio Cards: Was passt wann?

Entscheide danach, was die Auswahl ändert. Das Aussehen sagt wenig, denn die Tabs von Wingo UI haben eine `segmented`-Variante mit demselben erhabenen Thumb. Der Unterschied liegt in der Semantik und damit darin, was eine Person mit Screenreader als Nächstes erwartet.

| Die Auswahl | Nimm | Was assistive Technik erhält | Wingo UI |
|---|---|---|---|
| Ändert den Inhalt, der schon auf dem Screen ist: Zeitraum, Ansicht, Einheiten; 2 bis 5 kurze Optionen | [Segmented Control](https://wingo-ui.com/components/segmented-control) | `radiogroup` aus `radio`; Pfeile bewegen und wählen aus | Kostenlos |
| Zeigt ein anderes Panel mit Inhalt | [Tabs](https://wingo-ui.com/components/tabs), `variant="segmented"` für diesen Look | `tablist`, `tab`, `tabpanel`, verknüpft über `aria-controls` | Kostenlos |
| Ändert die URL | [Nav Tabs](https://wingo-ui.com/components/nav-tabs) | Links in einem `nav`, der aktuelle mit `aria-current="page"` | Pro |
| Mehrere Optionen können gleichzeitig an sein (fett und kursiv, Ausstattung) | [Toggle Group](https://wingo-ui.com/components/toggle-group) `type="multiple"` | Buttons mit `aria-pressed` | Pro |
| Jede Option braucht eine Beschreibung oder einen Preis | [Radio Group](https://wingo-ui.com/components/radio-group) `variant="card"` | `radiogroup` aus `radio` | Kostenlos |
| Mehr als fünf Optionen oder lange Labels | [Select](https://wingo-ui.com/components/select) | eine `combobox`, die eine `listbox` öffnet (auf Smartphones ein Bottom Sheet) | Kostenlos |

Apple zieht auf iOS eine ähnliche Grenze: Für den Wechsel zwischen völlig getrennten Bereichen einer App empfehlen die [Richtlinien](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) stattdessen eine Tab Bar. Hier dieselben Segmente als Tabs, jedes mit eigenem Panel:

```tsx
import { Tabs } from "@/components/ui/tabs";
// ProfileForm und BillingForm sind deine eigenen Komponenten

export function AccountTabs() {
  return (
    <Tabs
      variant="segmented"
      fullWidth
      aria-label="Konto"
      options={[
        { value: "profile", label: "Profil", content: <ProfileForm /> },
        { value: "billing", label: "Abrechnung", content: <BillingForm /> },
      ]}
    />
  );
}
```

> Live-Demo (Tabs): Derselbe Thumb wie beim Segmented Control, aber jedes Segment öffnet sein eigenes Panel: Wechsle von Active zu Sold, und die Liste gleitet von der Seite herein, in deren Richtung du dich bewegt hast. Probier sie unter [Tabs](https://wingo-ui.com/components/tabs) aus und installier sie mit `npx wingo-ui@latest add tabs`.

Die Toggle Group braucht noch eine Anmerkung. Im Single-Modus rendert Radix sie ebenfalls als `radiogroup`, aber ihre Pfeiltasten bewegen nur den Fokus, und Leertaste oder Enter betätigen das Item. Das ist die APG-Regel für eine Radio-Gruppe in einer Toolbar: Dort bleibt der ausgewählte Button gleich, während du mit den Pfeilen durchgehst. Ein Schalter für die Ausrichtung in einer Editor-Toolbar ist also eine Toggle Group im Single-Modus, ein eigenständiger Zeitraum ein Segmented Control. Wenn mehrere an sein können, passt von den vieren nur die Toggle Group im Modus `multiple`:

```tsx
import { ToggleGroup } from "@/components/ui/toggle-group";

export function AmenityFilter() {
  return (
    <ToggleGroup
      type="multiple"
      variant="outline"
      aria-label="Ausstattung"
      defaultValue={["parking"]}
      options={[
        { value: "parking", label: "Parkplatz" },
        { value: "pets", label: "Haustiere erlaubt" },
        { value: "laundry", label: "Waschmaschine in der Wohnung" },
      ]}
    />
  );
}
```

> Live-Demo (Toggle Group): Bold ist zu Beginn an. Drück Italic, und beide bleiben an, weil die Formatierungsgruppe type multiple ist; die Ausrichtungsgruppe daneben ist single, ein Druck auf eine Option löst also die andere. Probier sie unter [Toggle Group](https://wingo-ui.com/components/toggle-group) aus und installier sie mit `npx wingo-ui@latest add toggle-group`.

Radio Cards sind besser, wenn sich die Optionen nicht selbst erklären. „Kurier, Packstation, Abholung“ passt in ein Segmented Control; „Lieferung nach Hause, FedEx, 1-2 Tage, $9.99“ nicht, und wer das in ein Segment quetscht, versteckt den Preis, der die Wahl entscheidet. Der [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide) behandelt die breitere Wahl zwischen Radio Group, Select und Combobox in einem Formular.

## Was geht bei Segmented Controls schief?

Vier Dinge: zu viele Segmente, Icons gemischt mit Text, ein Wert außerhalb der Optionen und ein fehlender Name.

- **Zu viele Segmente.** Apple nennt auf dem iPhone höchstens etwa fünf Segmente, und laut der [SegmentedButton-Doku von Flutter](https://api.flutter.dev/flutter/material/SegmentedButton-class.html) kommen sie typischerweise zum Einsatz, wenn es nur 2 bis 5 Optionen gibt. Sechs oder mehr Labels auf einem 360px-Screen werden eng oder abgeschnitten; nimm dann ein Select oder scrollende Tabs.
- **Icons und Text gemischt.** Apples Richtlinien bevorzugen in einem Control das eine oder das andere. Nimm Text oder `iconOnly` mit Labels als Namen.
- **Ein gesteuerter Wert, der nicht in `options` steht.** Das Control zeigt dann keinen Thumb, was kaputt aussieht. Meist passiert das, wenn die Optionen nach dem Wert laden.
- **Kein Name.** Eine radiogroup ohne `aria-label` wird als unbenannte Gruppe von Radios vorgelesen.

## Wie sieht ein komplettes Beispiel aus?

Eine Bestellübersicht, die eine Liste nach Status filtert. Die Auswahl ändert den Inhalt auf dem Screen, und es gibt vier kurze Optionen, also ist das ein Fall für das Segmented Control. Die Anzahl steht in Badges, und eine Statuszeile sagt Screenreadern, wie viele Bestellungen sichtbar sind:

```tsx
"use client";

import { useState } from "react";
import { SegmentedControl, type SegmentedControlOption } from "@/components/ui/segmented-control";

type Order = { id: string; customer: string; total: number; status: "open" | "shipped" | "returned" };

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });

export function OrdersPanel({ orders }: { orders: Order[] }) {
  const [status, setStatus] = useState("all");
  const count = (value: Order["status"]) => orders.filter((order) => order.status === value).length;

  const options: SegmentedControlOption[] = [
    { value: "all", label: "Alle" },
    { value: "open", label: "Offen", badge: count("open") },
    { value: "shipped", label: "Versandt" },
    { value: "returned", label: "Retour", badge: count("returned") },
  ];

  const visible = status === "all" ? orders : orders.filter((order) => order.status === status);

  return (
    <section className="flex flex-col gap-4">
      <SegmentedControl
        aria-label="Bestellstatus"
        options={options}
        value={status}
        onValueChange={setStatus}
        fullWidth
        className="sm:max-w-md"
      />
      <p role="status" className="text-sm text-muted-foreground">
        {visible.length} {visible.length === 1 ? "Bestellung" : "Bestellungen"}
      </p>
      <ul className="flex flex-col divide-y divide-border">
        {visible.map((order) => (
          <li key={order.id} className="flex justify-between gap-4 py-3 text-sm">
            <span className="truncate">{order.customer}</span>
            <span className="tabular-nums">{usd.format(order.total)}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}
```

In einem Formular lässt du den State weg und gibst ihm einen `name`. Eine Server Action liest ihn dann wie jedes Radio:

```tsx
<form action={saveDelivery}>
  <SegmentedControl
    name="delivery"
    aria-label="Lieferung"
    defaultValue="locker"
    fullWidth
    options={[
      { value: "courier", label: "Kurier" },
      { value: "locker", label: "Packstation" },
      { value: "pickup", label: "Abholung" },
    ]}
  />
  {/* in saveDelivery: formData.get("delivery") */}
</form>
```

## Womit fängst du an?

Installier das kostenlose Control und setz es dort ein, wo heute ein Zeitraum, ein Ansichtswechsel oder ein Einheitenschalter sitzt:

```bash
npx wingo-ui@latest add segmented-control
```

Tabs und Radio Group sind ebenfalls kostenlos. Toggle Group und Nav Tabs aus der Tabelle oben gehören zu [Wingo UI Pro](https://wingo-ui.com/de/pricing). Wenn jede Option eine ganze Seite ist, zwischen denen man wischt, passen [React Swipeable Tabs](https://wingo-ui.com/de/blog/react-swipeable-tabs) besser.

## Komponenten in diesem Artikel

- [Segmented Control](https://wingo-ui.com/components/segmented-control) (Free): A React iOS-style segmented control with a raised thumb that slides and follows your finger. Installation: `npx wingo-ui@latest add segmented-control`
- [Tabs](https://wingo-ui.com/components/tabs) (Free): React tabs with a sliding indicator that switch views of one page: underline for sections, pill for filters, segmented for a compact switch. Installation: `npx wingo-ui@latest add tabs`
- [Toggle Group](https://wingo-ui.com/components/toggle-group) (Pro): A React toggle group: a row of toggles where one or several stay pressed, for formatting, alignment, view switches and filters. Installation: `npx wingo-ui@latest add toggle-group`
- [Radio Group](https://wingo-ui.com/components/radio-group) (Free): A React radio group to pick one of a few visible options: rows with a dot that springs in, or cards with icons, prices and a sliding ring. Installation: `npx wingo-ui@latest add radio-group`

## Häufige Fragen

### Hat shadcn/ui ein Segmented Control?

Nicht im Oktober 2026. Die Komponentenliste hat Tabs, Toggle Group, Radio Group und Button Group. Wer eins auf shadcn/ui baut, stylt also eine davon um. Wähl die Basis danach, was die Auswahl tut: Tabs für Panels, eine Radio-Gruppe für einen Wert.

### Was ist der Unterschied zwischen einem Segmented Control und Tabs?

Tabs zeigen ein anderes Panel und liefern die Rollen tablist, tab und tabpanel, verknüpft über aria-controls. Ein Segmented Control wählt einen Wert, der den Inhalt auf dem Screen ändert, etwa einen Zeitraum, und ist eine radiogroup. Für den Wechsel zwischen getrennten Bereichen einer App empfehlen Apples Richtlinien eine Tab Bar.

### Wie viele Optionen sollte ein Segmented Control haben?

Zwei bis fünf. Apples Human Interface Guidelines nennen auf dem iPhone höchstens etwa fünf Segmente, und die Doku zum SegmentedButton von Flutter (Material) sagt, dass Segmented Buttons typischerweise bei 2 bis 5 Optionen eingesetzt werden. Ab sechs nimm ein Select oder eine scrollende Reihe Tabs.

### Ist ein Segmented Control für Screenreader zugänglich?

Ja, wenn es als radiogroup aus Radio-Items mit einem Namen gebaut ist: ein Tab-Stopp, Pfeiltasten, die bewegen und auswählen, und aria-checked auf dem ausgewählten Segment. Segmente nur mit Icon brauchen zusätzlich einen Textnamen, den der iconOnly-Modus von Wingo UI aus dem label jeder Option nimmt.

### Kann ein Segmented Control mit einem Formular abgeschickt werden?

Ja. Gib dem Segmented Control von Wingo UI einen name, dann schickt es in einem Formular den ausgewählten Wert wie eine Radio-Gruppe mit, und FormData und Server Actions lesen ihn mit formData.get.

### Ist das Segmented Control von Wingo UI kostenlos?

Ja. Segmented Control, Tabs, Radio Group und Select sind kostenlos und lassen sich mit npx wingo-ui@latest add installieren. Toggle Group und Nav Tabs gehören zu Wingo UI Pro.

---

Quelle: https://wingo-ui.com/de/blog/react-segmented-control