Slide to confirm
A single click is too little for something that cannot be undone: it happens by accident. Dragging a handle to the other end is a gesture with a start, a path and an end, and it leaves a point where you can change your mind. The action is asynchronous: onConfirmar can return a promise and the control waits, handle pinned at the end, until it succeeds or fails. A slider that says "done" before the server answers is lying. The handle is a real slider (role slider): with the keyboard the arrows move it a quarter at a time and End confirms. And the position lives in CSS variables written from the gesture, not in React state.
- DOM, no dependencies, keyboard, async action
And the React Bits original: Slide Commit
This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Slide Commit, and this is what we saw in theirs in case you prefer to use the original.
When to use it
For actions that cannot be undone: pay, delete, publish. It asks for a deliberate gesture, not a stray click.
Watch out for
A pointer-only slider leaves out anyone who cannot drag. This one has keyboard support, but check that it really confirms with it and that another visible route exists.
Accessibility
One of the best cared for: fifteen aria signals, keyboard and reduced motion.
- Slide Commit
pnpm dlx shadcn@latest add @react-bits/SlideCommit-TS-TW