# React Slide to Confirm: Wann er den Dialog schlägt

> Wann ein React Slide to Confirm bei unumkehrbaren Aktionen besser ist als ein Bestätigungsdialog und wie er mit Tastatur und Statusansagen barrierefrei bleibt.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 13. 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-slide-to-confirm
- Englische Fassung: https://wingo-ui.com/blog/react-slide-to-confirm

## Kurz gesagt

Nimm einen React Slide to Confirm, wenn eine einzige unumkehrbare Aktion der ganze Zweck eines Smartphone-Screens ist und ein versehentlicher Tipp wahrscheinlich ist, etwa beim Bezahlen, beim Bestätigen einer Lieferung oder beim Einstempeln. Nimm einen Bestätigungsdialog, wenn die Aktion selten ist, neben anderen Aktionen steht oder ihre Folgen erklären muss, und nimm Undo, wenn sich die Aktion rückgängig machen lässt. Barrierefrei ist ein Slider nur mit einem echten Button als Daumen, mit Enter und Screenreader-Aktivierung, die ohne Ziehen bestätigen, und mit einer Live-Region für Laden, Erfolg und Fehler.

Ein React Slide to Confirm ist das Control, das du aus Liefer- und Bezahl-Apps kennst: eine Schiene mit einem Daumen, den du bis ans Ende ziehst, bevor irgendetwas passiert. Es wirkt wie eine Spielerei, bis du jemandem zusiehst, der im fahrenden Bus mit einer Hand auf Bezahlen tippt. Dieser Guide zeigt, wann ein Slider bei unumkehrbaren Aktionen einen Bestätigungsdialog schlägt, welche Props beim [Slide To Confirm](https://wingo-ui.com/components/slide-to-confirm) von Wingo UI zählen und wie er für Tastatur- und Screenreader-Nutzer bedienbar bleibt.

## Wann nimmst du Slide to Confirm statt eines Dialogs?

Wenn eine einzige unumkehrbare Aktion der Grund ist, warum der Screen existiert, und die Person ein Smartphone in der Hand hat. Ein Bestätigungsdialog fügt einen zweiten Tipp an einer anderen Stelle hinzu. Das verhindert Fehlbedienungen, kostet aber auch jedes Mal einen Schritt. Ein Slider macht die Bestätigung zur Aktion selbst: eine bewusste Geste, und ein verirrter Tipp bewirkt nichts. Apple nutzt dieselbe Idee für eine Aktion, die niemand aus der Hosentasche auslösen soll: Laut dem iPhone-Handbuch [ziehst du den Schieberegler zum Ausschalten](https://support.apple.com/guide/iphone/turn-iphone-on-or-off-iph841379c3d/ios), um das Gerät auszuschalten.

So wählen wir zwischen den vier Wegen, eine Aktion abzusichern:

| Muster | Am besten für | Kosten | Wingo UI |
| --- | --- | --- | --- |
| Undo im Toast | umkehrbare Aktionen: archivieren, in den Papierkorb löschen, aus einer Liste entfernen | vorab keine, die Aktion läuft sofort | [Toast](https://wingo-ui.com/components/toast) (kostenlos) |
| Inline-Bestätigung | kleine Löschaktionen in einer Liste oder Toolbar, meist am Desktop | ein zweiter Klick an derselben Stelle | [Delete Button](https://wingo-ui.com/components/delete-button) (kostenlos) |
| Bestätigungsdialog | seltene, unumkehrbare Aktionen, die einen Satz zu den Folgen brauchen | ein Modal, zwei Tipps, der Fokus wandert | [Alert Dialog](https://wingo-ui.com/components/alert-dialog) (Pro) |
| Slide to Confirm | die eine Hauptaktion auf einem Smartphone-Screen: bezahlen, Lieferung bestätigen, einstempeln, Geld schicken | ein Ziehen oder Enter auf der Tastatur | [Slide To Confirm](https://wingo-ui.com/components/slide-to-confirm) (Pro) |

Zwei Regeln klären die meisten Fälle. Lässt sich die Aktion rückgängig machen, biete Undo an und spar dir die Bestätigung; unser [Tutorial zu React Swipe to Delete](https://wingo-ui.com/de/blog/react-swipe-to-delete) zeigt dieses Muster. Muss die Person vor der Entscheidung etwas lesen („Deine 14 Inserate und alle Unterhaltungen werden gelöscht“), nimm einen Dialog. Denn ein Slider-Label wird auf einer schmalen Schiene abgeschnitten und bietet keinen Platz für eine Warnung. Kombinier nie einen Slider und einen Dialog für dieselbe Aktion. Der Slider ist bereits die Bestätigung.

> Live-Demo (Slide To Confirm): Zieh den Daumen ans Ende, um die Lieferung zu bestätigen. Lässt du früher los, federt er zurück; am Desktop springst du mit Tab zum Daumen und drückst Enter. Probier sie unter [Slide To Confirm](https://wingo-ui.com/components/slide-to-confirm) aus und installier sie mit `npx wingo-ui@latest add slide-to-confirm`.

## Welche Props zählen beim Slide To Confirm?

Die meisten Screens brauchen `label`, `onConfirm` und die Status-Labels. Der Rest legt fest, wie schwer sich der Slider auslösen lässt und wie er aussieht.

- **`onConfirm`** läuft, sobald der Daumen das Ende erreicht oder jemand Enter drückt. Gib ein Promise zurück: Der Daumen parkt mit einem Spinner. Wird das Promise aufgelöst, erscheint ein Häkchen und die Füllung deckt die ganze Schiene ab. Wird es abgelehnt, wackelt die Schiene, der Daumen fährt zurück und der Fehlertext bleibt 2 Sekunden sichtbar. Ein synchron geworfener Fehler zählt als Ablehnung, und pro Slide läuft `onConfirm` nie zweimal.
- **`threshold`** (Standard `0.9`) ist der Anteil des Wegs, ab dem ein Loslassen bestätigt. Das ist absichtlich schwerer als bei anderen Swipes in der Bibliothek, die bei einem Viertel ihrer Größe auslösen. Ein schneller Wisch zählt erst ab 60%. Zum Vergleich: Der [SlideButton](https://cds.coinbase.com/components/inputs/SlideButton/) für React Native von Coinbase setzt `checkThreshold` standardmäßig auf 0.7 (geprüft im Oktober 2026).
- **`resetAfter`** (Standard `0`, also nie) fährt nach dem Erfolg zurück in den Ruhezustand. Lass es bei 0 für eine Lieferung, die erledigt bleibt, und setz es für wiederholbare Aktionen wie das Einstempeln.
- **`status`** und **`onStatusChange`** machen die Komponente controlled, für Abläufe, die der Server steuert: Setz `"idle"` zum Zurücksetzen oder `"success"`, um es als bestätigt zu zeigen, ohne `onConfirm` aufzurufen.
- **`labels`** enthält die Statustexte: `loading` („Processing…“), `success` („Confirmed“), `error` („Something went wrong. Try again.“) und `hint` („Drag to the end, or press Enter“). Der Hint ist die Beschreibung des Daumens für Screenreader.
- **`variant`**, **`tone`**, **`size`** und **`radius`** regeln die Optik. `variant="solid"` ist für die eine Hauptaktion, `tone` ist standardmäßig neutral (schwarz im Light Mode, weiß im Dark Mode), und die Schiene ist 48, 56 oder 64px hoch, in jeder Größe ein bequemes Touch Target.
- **`haptics`** (standardmäßig an) tickt, sobald der Daumen die Schwelle überschreitet, und spielt auf Smartphones mit Vibration Muster für Erfolg und Fehler ab.

Hier ist eine Lieferbestätigung für eine Fahrer-App. Der Code wirft bei einer fehlerhaften Antwort einen Fehler, denn `fetch` lehnt nur bei Netzwerkfehlern ab. Eine 500, die normal aufgelöst wird, würde sonst als Erfolg erscheinen.

```tsx
"use client";

import { PackageCheck } from "lucide-react";
import { SlideToConfirm } from "@/components/ui/slide-to-confirm";

type ConfirmDeliveryProps = { orderId: string; onDelivered: () => void };

export function ConfirmDelivery({ orderId, onDelivered }: ConfirmDeliveryProps) {
  return (
    <SlideToConfirm
      className="max-w-sm"
      tone="success"
      label="Schieben, um die Lieferung zu bestätigen"
      icon={<PackageCheck />}
      labels={{ loading: "Wird bestätigt…", success: "Zugestellt", error: "Bestätigung fehlgeschlagen. Versuch es noch mal." }}
      onConfirm={async () => {
        const res = await fetch(`/api/orders/${orderId}/delivered`, { method: "POST" });
        // fetch löst auch bei einer 500 auf; wirf einen Fehler, damit das Control ihn zeigt und der Daumen zurückfährt
        if (!res.ok) throw new Error(`Anfrage fehlgeschlagen: ${res.status}`);
      }}
      onStatusChange={(status) => {
        if (status === "success") onDelivered();
      }}
    />
  );
}
```

Dasselbe Control ist auch deine Slide to Unlock React-Komponente: Übergib `label="Zum Entsperren schieben"`, ein Schloss-Icon und `resetAfter={1500}` und entsperre in `onConfirm`. Swipe to confirm ist dasselbe Muster unter anderem Namen.

## Wie bleibt ein Slide to Confirm barrierefrei?

Mach den Daumen zu einem echten Button und gib ihm einen Weg ganz ohne Ziehen. Ein Slide to Confirm Button aus einem `div` mit Pointer-Handlern scheitert an beidem. Ein Slider ist eine Ziehbewegung, und [WCAG 2.2, Erfolgskriterium 2.5.7](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) (Stufe AA) verlangt eine Alternative mit einem einzelnen Zeiger. Apples [Richtlinien zu Gesten](https://developer.apple.com/design/human-interface-guidelines/gestures) sagen es ganz direkt: Du solltest nicht davon ausgehen, dass alle Menschen eine bestimmte Geste nutzen können, um eine Aufgabe zu erledigen. Das macht die Komponente von Wingo UI, und das solltest du bei jeder anderen prüfen:

- **Der Daumen ist ein `<button>`.** Sein zugänglicher Name ist das Label („Schieben, um die Lieferung zu bestätigen“), beim Laden und nach dem Erfolg wechselt er zum Statustext, und `aria-describedby` zeigt auf den Hinweis „Drag to the end, or press Enter“.
- **Die Tastatur bestätigt ohne Ziehen.** Spring mit Tab zum Daumen. Enter, Leertaste oder die Ende-Taste lassen ihn ans Ende gleiten und bestätigen. Die Pfeiltasten nach links und rechts zeigen den Weg in 10%-Schritten als Vorschau und federn nach einem Moment zurück, damit sie allein nie versehentlich bestätigen. Pos1 holt ihn zurück.
- **Screenreader bestätigen mit einer Aktivierung.** Die Komponente wertet einen Klick, dem kein Pointer-Druck vorausgeht, etwa einen Doppeltipp in VoiceOver oder TalkBack, als Bestätigung. Ein Mausklick oder ein Fingertipp auf den Daumen lässt ihn nur 16px nach vorn hüpfen, um die Geste zu zeigen.
- **Der Status wird angesagt.** Eine Live-Region mit `role="status"` liest Laden, Erfolg und Fehler vor, sodass eine blinde Person „Zugestellt“ hört statt Stille.
- **Deaktiviert bleibt auffindbar.** `disabled` graut das Control aus und blockiert Ziehen und Tasten, aber der Daumen bleibt mit `aria-disabled` fokussierbar, sodass ein Screenreader ihn weiter findet. Schreib in den Text daneben, warum er deaktiviert ist.
- **Reduced Motion wird berücksichtigt.** Der Schimmer über dem Label im Ruhezustand schaltet sich ab, genau wie das Hüpfen um 16px.

Für einen Dialog erledigt der [Alert Dialog](https://wingo-ui.com/components/alert-dialog) dasselbe: Der Fokus landet auf Abbrechen, der sicheren Wahl, Escape bricht ab, ein Klick auf die abgedunkelte Seite tut nichts, und beim Schließen kehrt der Fokus zum Auslöser zurück.

```tsx
import { Trash2 } from "lucide-react";
import { AlertDialog } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export function DeleteProject({ remove }: { remove: () => Promise<void> }) {
  return (
    <AlertDialog
      trigger={
        <Button variant="soft" tone="danger" leftIcon={<Trash2 />}>
          Projekt löschen
        </Button>
      }
      tone="danger"
      title="Dieses Projekt löschen?"
      description="Seine 3 Umgebungen und alle Deployments werden endgültig gelöscht."
      confirmLabel="Projekt löschen"
      confirmLoadingText="Wird gelöscht"
      onConfirm={remove}
    />
  );
}
```

Gibt `onConfirm` ein Promise zurück, zeigt der Bestätigen-Button einen Spinner, Abbrechen und Escape warten ab, und bei einem Fehler wackelt die Karte und die Meldung erscheint über den Buttons, bereit für einen neuen Versuch.

> Live-Demo (Alert Dialog): Drück „Delete“, um den Dialog zu öffnen. Der Fokus startet auf „Cancel“; bestätige, um den Ladezustand zu sehen, oder drück Escape, um abzubrechen. Probier sie unter [Alert Dialog](https://wingo-ui.com/components/alert-dialog) aus und installier sie mit `npx wingo-ui@latest add alert-dialog`.

## Wie verhält er sich auf dem Smartphone?

Er scrollt, reagiert an der Schwelle und bestätigt wie ein natives Control, solange er außerhalb anderer wischbarer Bereiche sitzt. Ein vertikaler Wisch, der auf der Schiene beginnt, scrollt trotzdem die Seite, weil sich das Ziehen beim Start auf eine Achse festlegt und die Schiene `touch-pan-y` setzt (unser [Guide zu Tailwind touch-manipulation](https://wingo-ui.com/de/blog/tailwind-touch-manipulation) erklärt diesen Wert). Jenseits der Schwelle wird der Daumen etwas größer, die Füllung wird kräftiger und das Smartphone tickt; lässt du dort los, gleitet er ans Ende. Ein Tipp auf die Schiene lässt den Daumen nach vorn hüpfen und zeigt die Richtung. In RTL-Layouts (von rechts nach links) startet der Daumen rechts, und das Icon wird gespiegelt.

Das Ticken ist ein Bonus. Laut [caniuse](https://caniuse.com/vibration) gibt es in Safari Stand Oktober 2026 kein `navigator.vibrate`, also verlassen sich iPhone-Nutzer auf die sichtbare Reaktion an der Schwelle. Unser [Guide zur Web Vibration API](https://wingo-ui.com/de/blog/web-vibration-api-haptic-feedback) behandelt die Lücken.

## Welche Fallstricke bei Slide to Confirm solltest du meiden?

- **Ein Slider für Alltagsaktionen.** „Speichern“, „Nachricht senden“ oder „In den Warenkorb“ brauchen keine Absicherung, und ein Slider ist dort nur Reibung. Heb ihn für die Aktion auf, die Geld kostet oder sich nicht zurücknehmen lässt.
- **Ein Slider in einem horizontalen Swiper.** In einem Karussell oder in wischbaren Tabs konkurrieren die beiden Ziehbewegungen. Setz den Slider außerhalb des Wischbereichs oder fixier ihn in einer Sticky-Leiste am unteren Rand.
- **Ein Label, das nicht passt.** Auf schmalen Schienen wird das Label abgeschnitten. „Zum Bezahlen schieben“ passt überall, ein ganzer Satz nicht. Setz Betrag und Details über das Control.
- **Nur dem Client vertrauen.** Die Komponente ruft `onConfirm` für einen Slide nie zweimal auf, aber eine wacklige Verbindung kann einen Request trotzdem wiederholen. Mach den Endpoint idempotent, zum Beispiel mit einem Idempotency Key pro Bestellung.
- **Eine Schiene in einem reinen Desktop-Formular.** Ein Slider funktioniert mit Maus und Tastatur, aber auf einem Admin-Screen am Desktop erwarten die Leute einen Button mit Dialog.

Für die ganze mobile Schicht, von Bottom Sheets bis zu Safe Areas, lies unseren Guide zu [Mobile-first React Components](https://wingo-ui.com/de/blog/mobile-first-react-components) oder stöbere in [Mobile UI in React](https://wingo-ui.com/de/blog/category/mobile-ui).

## Was solltest du als Nächstes installieren?

`npx wingo-ui@latest add slide-to-confirm` kopiert die Komponente samt Spinner und den Helfern für Motion, Haptik und State, die sie importiert, und installiert `motion` und `lucide-react`. Slide To Confirm gehört zu [Wingo UI Pro](https://wingo-ui.com/de/pricing), also melde dich zuerst mit `npx wingo-ui@latest login` an. Für kleine Löschaktionen ist der kostenlose Delete Button nur einen Befehl entfernt: `npx wingo-ui@latest add delete-button`.

## Komponenten in diesem Artikel

- [Slide To Confirm](https://wingo-ui.com/components/slide-to-confirm) (Pro): A React slide to confirm control: drag the thumb to the end to approve a payment or risky action. Installation: `npx wingo-ui@latest add slide-to-confirm`
- [Alert Dialog](https://wingo-ui.com/components/alert-dialog) (Pro): A React alert dialog for confirmations: an async confirm that loads, fails inline and shakes, plus an await confirm() API. Installation: `npx wingo-ui@latest add alert-dialog`
- [Delete Button](https://wingo-ui.com/components/delete-button) (Free): A React delete button with inline confirmation: the bin opens a small confirm and cancel panel in place, no dialog needed. Installation: `npx wingo-ui@latest add delete-button`

## Häufige Fragen

### Ist Slide to Confirm besser als ein Bestätigungsdialog?

Für eine einzige unumkehrbare Aktion auf einem Smartphone-Screen oft ja: Es braucht eine bewusste Geste statt zwei Tipps, und man löst es kaum aus Versehen aus. Für seltene Aktionen am Desktop oder Aktionen, die eine Erklärung brauchen, ist ein Bestätigungsdialog klarer.

### Ist ein Slide to Confirm barrierefrei?

Nur mit einem Weg ohne Ziehen. WCAG 2.2, Erfolgskriterium 2.5.7 Dragging Movements, verlangt eine Alternative mit einem einzelnen Zeiger. Der Daumen sollte also ein echter Button sein, der auf Enter, Leertaste oder eine Screenreader-Aktivierung bestätigt, mit einer Beschreibung, die das sagt, und einer Live-Region, die das Ergebnis ansagt.

### Wie weit muss der Daumen wandern, bevor er bestätigt?

So weit, dass ein verirrter Wisch nicht zählt. Der Slide To Confirm von Wingo UI bestätigt standardmäßig beim Loslassen nach 90% der Schiene oder bei einem schnellen Wisch nach 60%; der SlideButton für React Native von Coinbase nutzt standardmäßig 70% (Stand Oktober 2026).

### Wie baue ich Slide to Unlock in React?

Slide to Unlock ist dasselbe Control mit einem anderen Label: eine Schiene, ein ziehbarer Daumen auf einem Motion Value, eine Schwelle kurz vor dem Ende und ein Reset nach dem Erfolg. Mit Wingo UI übergibst du label="Zum Entsperren schieben" und resetAfter an SlideToConfirm.

### Ist der Slide To Confirm von Wingo UI kostenlos?

Nein. Slide To Confirm und Alert Dialog sind Pro-Komponenten. Der Delete Button mit seiner Inline-Bestätigung ist kostenlos.

---

Quelle: https://wingo-ui.com/de/blog/react-slide-to-confirm