# Slide to confirm

> A slide-to-confirm control. The thumb pulls a liquid fill behind it and makes the track swell. It snaps back on a spring if released early. Past the threshold, the track draws into the thumb and the chevron morphs into a success check, with pending and error states.

- Type: Component (special)
- Access: Arc Pro
- Page: https://uiarc.dev/components/slide-to-confirm
- Markdown: https://uiarc.dev/components/slide-to-confirm/markdown
- Source file: `registry/components/slide-to-confirm/slide-to-confirm.tsx`
- Dependencies: motion
- Keywords: special, action, gesture, new, slide to confirm, slide to pay, slide to unlock, swipe to confirm, confirm, payment, transfer, liquid, gooey, slider

## When to use

- A checkout, transfer, or unlock step on a phone first surface, where a deliberate horizontal gesture prevents accidental taps.
- A kiosk or field app action that needs a confirming gesture without a dialog.

## When not to use

- Use hold-to-confirm for destructive actions on desktop surfaces where a press and hold is more natural.
- Use a dialog when people need to read the consequences before confirming.
- Use a regular button for routine, easily undone actions.

## Installation

Slide to confirm is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

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

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

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

export function SendMoney({ amount, send }: { amount: string; send: () => Promise<void> }) {
  return <SlideToConfirm
    label={`Slide to send ${amount}`}
    pendingLabel="Sending"
    confirmedLabel="Sent"
    errorLabel="Not sent, slide to retry"
    onConfirm={send}
  />;
}
```

## API reference

### SlideToConfirm

A slide to confirm control for payments, transfers, and other deliberate actions. The thumb pulls a liquid fill behind it: the fill lags, necks down between the thumb and its tail, and catches up, while the track swells around the pressed thumb. Pulling past the end stretches the track like a rubber band. Letting go early snaps the thumb back against a spring. Letting go past the threshold confirms: the track draws into the thumb, a spinner shows while a returned promise is pending, and the arrow morphs into a success check with the confirmed label beside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Slide to pay"` | The instruction and the action, drawn in the track and used as the slider name, for example “Slide to send $240”. |
| `confirmedLabel` | `string` | `"Paid"` | Shown beside the check and announced once the action succeeds. |
| `pendingLabel` | `string` | `"Processing"` | Shown beside the spinner and announced while a promise returned from onConfirm is pending. |
| `errorLabel` | `string` | `"Payment failed, slide to retry"` | Replaces the label in the danger color after the promise rejects, until the next slide. |
| `onConfirm` | `() => void \| Promise<unknown>` | – | Called once when the slide completes. Return a promise to show the pending, success, and error states; return nothing to go straight to success. |
| `threshold` | `number` | `0.9` | Fraction of the track the thumb must pass before letting go confirms. Below it the thumb springs back. |
| `resetAfter` | `number` | – | Milliseconds after success before the control expands back to its idle state. Leave it out to stay confirmed. |
| `hint` | `boolean` | `true` | Nudges the thumb a little every few seconds while idle and untouched, so people see that it moves. Off with reduced motion. |
| `disabled` | `boolean` | `false` | Dims the control and ignores pointer and keyboard input. |
| `accent` | `string` | – | Color of the liquid fill. Defaults to the slider fill token, which follows the selected accent. |
| `className` | `string` | – | Extra class on the root element. |
| `style` | `CSSProperties` | – | Inline styles on the root element. |

## Accessibility

- The control is a real role="slider" named by label, with aria-valuenow and aria-valuetext kept in step with the thumb, and a description that explains the gesture.
- Arrow keys move the thumb in tenths, Page Up and Page Down in quarters, Home returns it, and End confirms. Holding Space or Enter glides the thumb to the end and confirms; letting go early springs it back.
- A polite live region announces the pending, confirmed, and error labels. While pending or confirmed the slider is aria-disabled.
- Success is never color alone: the arrow turns into a check and the confirmed label is written beside it. Errors replace the instruction with the error text.
- Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring. Keyboard focus tints the track instead.

## Motion

- One rAF loop integrates a handful of springs and writes SVG paths and transforms straight to the DOM, only when a value changed; React renders only on phase changes.
- The thumb follows the finger on a stiff spring. The fill's tail follows the thumb on a softer spring, and a bridge between them thins as they pull apart, so fast drags stretch the liquid and it catches up when the thumb slows.
- Pressing swells the thumb and pushes the track outward around it on an underdamped spring, so the edge wobbles slightly like a membrane. Speed stretches the thumb into an ellipse along the direction of travel.
- Pulling past the end stretches the track on a rubber band curve. Letting go early returns the thumb on a spring with a small give, and the tail of the fill overtakes it and gets absorbed.
- Confirming is one continuous movement: the track draws into the thumb from the left, the confirmed label slides in with the retreating edge, and the chevron's three points glide into a check as the circle turns to the success color.
- An idle nudge every few seconds teaches the gesture. The loop sleeps once everything settles, and stops off screen and in hidden tabs. Reduced motion drops the liquid, the stretch, the nudge, and the morph, and shows each state immediately.

## Responsive behavior

- The SVG is measured and drawn in real pixels, so the track, hairline, and text stay crisp at any width.
- Below 360px the track is 56px tall and the text drops to the small size; above it the track is 64px.
- Vertical page scroll still works over the control on touch; only horizontal drags move the thumb.

## Performance

- About a dozen SVG elements. Paths are rebuilt from a few dozen points per frame only while something moves.
- Written attributes are cached, so settled frames touch nothing.

## Notes for AI

- Use it where a stray tap must not count but the action is routine: sending money, paying, unlocking, starting a shift.
- Put the object and amount in the label (“Slide to send $240”) and keep it short enough to fit beside the thumb at 390px.
- Return the real request promise from onConfirm so the pending and error states tell the truth.

## Related

- [Hold to confirm](https://uiarc.dev/components/hold-to-confirm/markdown): Confirm a destructive action by holding, not tapping.
- [Confirm morph](https://uiarc.dev/components/confirm-morph/markdown): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
- [Elastic slider](https://uiarc.dev/components/elastic-slider/markdown): A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.
- [Swipe actions](https://uiarc.dev/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu.

## Also in loaders

- [Stretch refresh](https://uiarc.dev/components/stretch-refresh/markdown): Pull a feed down and a line stretches to tell you when to let go.
- [Morph loader](https://uiarc.dev/components/morph-loader/markdown): Tiny loaders that morph between shapes and fold into a check or a cross when done.
- [Skeleton morph](https://uiarc.dev/components/skeleton-morph/markdown): Loading skeletons that grow into the real content, block by block, instead of swapping.
- [Black hole](https://uiarc.dev/components/black-hole/markdown): A delete transition that pulls the chosen items into a tiny singularity while the rest of the list bends around it; undo spins them back out.
- [Charge session](https://uiarc.dev/components/charge-session/markdown): An EV or device charging card. Energy packets flow from a charger along the cable into the battery pack, which fills toward a draggable charge limit. The charge curve tapers near full, and power, energy, time to limit and cost update live. Stop charging drains the flow.

## Guidance for AI tools

Slide to confirm: A slide-to-confirm control. The thumb pulls a liquid fill behind it and makes the track swell. It snaps back on a spring if released early. Past the threshold, the track draws into the thumb and the chevron morphs into a success check, with pending and error states. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt