# Slide to Confirm

Slide-to-confirm control for payments and other deliberate actions. The thumb follows your finger, shows progress while the action runs and ends with a check; a press-and-hold mode is included.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/slide-to-confirm
```

## Import

```tsx
import { SlideToConfirm } from "@/components/ui/slide-to-confirm/slide-to-confirm";
```

## Variants

- `hold` — Hold: `npx @lumioui/cli add pro/slide-to-confirm-hold`
- `pay` — Pay: `npx @lumioui/cli add pro/slide-to-confirm-pay`
- `start-ride` — Start ride: `npx @lumioui/cli add pro/slide-to-confirm-start-ride`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `mode?` | `"slide" | "hold"` | "slide" (track + thumb) or "hold" (press-and-hold ring). Default "slide". |
| `label` | `string` | Call to action — "Slide to pay $62.40", "Hold to start". |
| `successLabel?` | `string` | Shown after confirming. Default "Done". |
| `loadingLabel?` | `string` | Announced while onConfirm's promise is pending (busy dots show). Default "Processing". |
| `holdingLabel?` | `string` | Hold mode: shown while the finger is down. Default "Keep holding". |
| `onConfirm?` | `() => void | Promise<unknown>` | Fires on commit. Return a Promise to show busy dots until it settles. |
| `onSettled?` | `() => void` | Fires once the success has held (700ms) — hand off to the next screen here. |
| `onReset?` | `() => void` | Fires after a reset (auto or after an error). |
| `icon?` | `IconName` | Thumb / centre glyph. Default "arrow-right" (slide) or a drawn lock (hold). |
| `holdMs?` | `number` | Hold duration in ms. Default 1200. |
| `threshold?` | `number` | Slide fraction that commits on release. Default 0.85. |
| `autoResetMs?` | `number` | Return to idle this many ms after success (never before the hold ends). Omit to stay confirmed. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/slide-to-confirm