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

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 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 (opens in a new tab), um das Gerät auszuschalten.

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

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 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.

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 (opens in a new tab) 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.

"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 (opens in a new tab) (Stufe AA) verlangt eine Alternative mit einem einzelnen Zeiger. Apples Richtlinien zu Gesten (opens in a new tab) 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 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.

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.

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 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 (opens in a new tab) 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 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 oder stöbere in Mobile UI in React.

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, 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.

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.