# Slide to confirm

> Drag the handle to the end to confirm a payment or action; Enter works too.

Component · Pro · https://lodeui.com/components/slide-to-confirm

## When to use

- Payments, transfers and launches on touch screens, where a deliberate gesture builds trust.

## When not to use

- Desktop-first forms: a button is faster.
- Anything that needs a review step: confirm first.

## Installation

```bash
npx shadcn@latest add @lode/slide-to-confirm
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

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

export function Pay({ amount }: { amount: string }) {
  return <SlideToConfirm label={`Slide to pay ${amount}`} doneLabel="Payment sent" onConfirm={submitPayment} />;
}
```

## API reference

### SlideToConfirm

A track with a draggable handle; reaching the end confirms.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onConfirm | `() => void \| Promise<void>` | – | Runs when the handle reaches the end or Enter is pressed. |
| label / doneLabel | `string` | `"Slide to confirm" / "Confirmed"` | Track text before and after. |
| resetAfter | `number` | `2400` | ms before resetting; 0 keeps the done state. |
| disabled | `boolean` | – | Dims and locks the handle. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Confirm (on the handle) |

## Accessibility

- The handle is a button that tells keyboard users to press Enter.
- The result is announced politely.

## Motion

- The track text shimmers and fades as you drag; the fill follows the handle.
- Releasing short of 85% springs it back; reaching the end snaps it over and turns it green.

## Responsive behavior

- Fills up to 384px; the drag range is measured, so any width works.

## Performance

- Handle position is a motion value; layout is measured once per resize.

## Notes for AI

- Put the amount in the label so the gesture confirms something specific.

## Related

- [Hold to confirm](https://lodeui.com/components/hold-to-confirm) — Press and hold to confirm destructive or important actions; letting go cancels.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.