# Slide to Confirm

> Confirm by sliding the knob all the way across, for payments and deletions. Tapping the knob or the arrow keys work too.

Category: Buttons · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/slide-to-confirm

## When to use it

Payments, transfers, deleting data and other actions that shouldn't happen from a stray tap, especially on mobile.

## How it works

The knob is a Motion drag handle constrained to the track, and a trail and fading label follow its position through motion values. Releasing past 90% confirms; anything less springs back. Your onConfirm can return a promise, and the knob shows a spinner until it settles, then a drawn tick. For people who can't or don't want to drag, tapping the knob moves it a quarter of the way and the arrow keys do the same, sliding back if left unfinished.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/slide-to-confirm` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onConfirm` | `() => void \| Promise<void>` |  | Runs at the end; a promise shows a spinner until it settles. |
| `label` | `string` | `"Slide to confirm"` | Text on the track, and the slider's name. |
| `confirmedLabel` | `string` | `"Confirmed"` | Shown and announced once done. |
| `accent` | `string` | `"#0E7C86"` | Knob and trail colour. |
| `resetAfter` | `number` | `0` | Seconds before returning to the start; 0 stays confirmed. |

## Accessibility

- **Keyboard: Pass.** The knob is a slider: arrow keys move it a quarter at a time, End confirms, Home returns it.
- **Screen readers: Pass.** Announced as a slider with its label and progress; the confirmed state is announced.
- **Reduced motion: Pass.** With reduced motion on, the knob moves without springing and the hint doesn't shimmer. Tapping the knob moves it a quarter of the way, so it never requires dragging (WCAG 2.5.7).
- **Colour contrast: Pass.** The label measures 13.4:1, the hint sweep never drops below 7.1:1, and the knob's arrow 4.9:1.