## Slide to Confirm (S—152)

A track you swipe the knob across to confirm; the label fades as you go, short drags spring back, completion locks.

- URL: https://sundaeui.dev/components/slide-to-confirm
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/slide-to-confirm.json`
- Tags: swipe, gesture, payment, slide-to-confirm, unlock, button

Drag the knob to the end of the track to confirm. The label fades with distance so the gesture explains itself; let go early and the knob springs home.
At the end the knob becomes a tick and the track fills. Keyboard users press Enter on the knob instead, since sliding is an enhancement, not a gate.

### Usage

```tsx
import { SlideToConfirm } from '@/components/sundae/slide-to-confirm'

<SlideToConfirm />
```

### Props

- `label` (`string`, default `'Slide to pay'`): Track label.
- `doneLabel` (`string`, default `'Paid'`): Label when confirmed.
- `onConfirm` (`() => void`): Called at the end.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Payments, irreversible sends and unlocks on touch screens.

### When not to use

- Routine actions where a plain button is faster.

### Accessibility

- The knob is a button: Enter or Space confirms, so the gesture is never required.
- Completion is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter / Space (on knob): Confirm