fetaUI
GitHub

Slide To Confirm

Drag the thumb across to confirm. Past 90% or a fast flick, it commits.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/slide-to-confirm
Playground
Slide to pay $24.00
Labels
Slide to transfer $120.00
Failed confirm
Slide and it fails
Disabled
Slide to pay $24.00
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/slide-to-confirm

Labels

label says what the slide commits to. doneLabel replaces it at the end.

Slide to transfer $120.00
Motion

Accessibility

  • The thumb is a slider with a live value.
  • The result is announced through aria-live.

Motion

  • The thumb follows the pointer 1:1 and the ink trails it.
  • It snaps to the end on a 520/42 spring, then the ink turns emerald.
  • With reduced motion, progress still shows and there is no spring.

Responsive behavior

  • The track fills the width on small screens.

Performance

  • The thumb runs on a motion value, so dragging does not re-render on each frame. The percent updates in steps of 10.
  • The trail is revealed with clip-path, so its size never changes and nothing lays out.
  • Track width comes from one ResizeObserver, disconnected on unmount.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import from @/components/fetaui/slide-to-confirm.
  • Always set label and doneLabel: the defaults read Slide to pay $24.00 and Paid.
  • Return a promise from onConfirm. The thumb shows a loader, and a rejection sends it back.
  • Done is final. Change key to reset it, which is what the demo does after 2 seconds.
  • The demo waits 900 ms and charges nothing. Wire up onConfirm.
/docs/components/slide-to-confirm/markdown
PreviousBell Button
NextAttract Button

Related

Hold To ConfirmComponentPress and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.Alert DialogComponentA modal that interrupts with something important and waits for an answer.Undo ButtonComponentAn action with a window to take it back.Tear ButtonComponentA ticket you confirm by tearing off its stub.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.