ui-049
AI ready

Drag to Confirm

£5

A deliberate drag-to-confirm control with a responsive progress trail, release threshold, clear completion state and a two-step button alternative.

intermediate
4 more details
draggablemicro-interactionstate-transitionkeyboard-navigation
Drag to Confirm - UI component preview

This element reads better at your own screen size than in the frame below:

Open the element in a new tab
Open Drag to Confirm demo in new tab

About this component

Give important actions a deliberate final step. Drag the handle across the track and release to confirm; let go early and the control returns to its starting position. A clear threshold cue makes the decision visible before it happens.

Read the full effect overview

A two-step button alternative provides the same outcome without a dragging gesture. Confirmed, cancelled, disabled and reset states are included, along with light and dark themes and reduced-motion support. The demo is local: connect its confirmation event to your own release, approval or submission workflow.

What's included

7 items
  • Drag progress with a distinct release-to-confirm cue
  • Short drags and cancelled gestures return to idle
  • Two-step button alternative for keyboard and single-pointer access
  • Confirmed state prevents duplicate submissions until reset
  • Disabled state and a reusable reset API
  • Touch interaction and responsive track sizing
  • Light and dark themes with reduced-motion support

Perfect for

4 use cases
  • Publishing a release after a final review
  • Approving a completed workflow
  • Submitting a configuration change
  • Confirming a deliberate action on touch screens

How it works

2 sections

A deliberate final step

The control distinguishes a partial gesture from an intentional confirmation. A visible release cue appears near the end, and the completed state stays in place until your application resets it.

The same outcome without dragging

A standard button offers an explicit second confirmation step, with cancellation and live status feedback. Both input paths report the result through the same integration point.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this UI element's demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid UI element

Purchase to unlock the code.

Buying Drag to Confirm opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse UI elements

Documentation

What's Included

  • index.html: working demo and component markup.
  • assets/style.css: responsive component styles and two complete themes.
  • assets/script.js: readable source; assets/script.min.js: generated compact source.
  • Idle, dragging, armed, confirmed, disabled and reset states.
  • A non-drag confirmation path, live status feedback and reduced-motion support.
  • A short completion settle, drawn checkmark and fading blue edge glow.

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Copy the [data-drag-confirm] section from index.html into your page.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

Keep the data-confirm-* hooks inside each [data-drag-confirm] root. Each root is independent. Change the action heading, label copy in the source, and tag to suit the action being confirmed. The demo performs no backend operation; connect the confirmation event to your own application and implement your own server validation.

The toolbar and .stage layout are demo furniture. Remove them and the global page CSS when integrating; keep the component's positioned track, handle dimensions and touch-action: none on the handle. The alternative and Cancel buttons are part of the accessible component, so keep both.

Options

Attribute Default Description
data-threshold 0.88 Fraction of handle travel required before release confirms; clamped to 0.5–1.
data-disabled false Initial disabled state. Use the API to change it after mounting.

Keyboard & Accessibility

Input Behaviour
Tab / Shift+Tab Moves through the native action buttons.
Enter / Space First activation offers “Confirm release”; second confirms.
Escape Cancels an active drag or the button confirmation step.
Cancel Returns to idle and restores focus to the alternative button.

The handle is decorative to assistive technology; the native two-step button provides the complete equivalent without dragging. A polite role="status" announces instructions, the release threshold and completion. The track's disabled state and native disabled buttons reflect availability. The button remains visible after confirmation. Reduced motion keeps all input paths functional and applies end states immediately.

How It Works

Dragging reveals progress and an explicit release cue. Releasing early, pressing Escape, losing pointer capture or resizing during a gesture cancels it. A completed control ignores additional confirmation attempts until reset. The button path requests a separate second activation before reporting the same outcome.

Themes

Light is the default. Set the theme on the component root in your application:

On your component's opening tag:

Code snippet omitted: it ships with the download.

The demo sets data-variant="light" or data-variant="dark" on <body> and honours ?variant=dark. Both use the same markup and script. Re-value --ground, --ground-2, --raised, --hover, --ink, --ink-2, --ink-3, --line, --line-strong, --accent, --accent-ink, --accent-wash, --shadow, --font, --radius, --radius-sm and --radius-xs to match your product. Keep text contrast at least 4.5:1.

Customisation

  • Change .drag-confirm's maximum width to fit your layout; the handle remeasures automatically.
  • Change data-threshold before mounting to adjust the confirmation distance.
  • Re-value --confirm-glow in both theme blocks to customise the completion glow. Reduced motion skips the glow.
  • Use the state attribute for additional UI feedback, and the event below for application logic.

Teardown

Before removing a component in your SPA:

Code snippet omitted: it ships with the download.

This releases pointer capture, removes listeners and observers, and restores the original inline styles and content.

Requirements

  • GSAP 3.12+, core only.
  • A browser with Pointer Events and ResizeObserver.
  • No framework or build step.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.