Slide To Confirm

ProNew

A slider that makes a paid or risky action harder to trigger by accident: drag the thumb to the end, or activate it with the keyboard.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for actions that cost money or are hard to reverse and where a mistaken tap is likely: pay, send, start a ride.

Do not use it for routine actions: it is slower than a button. For destructive web actions, prefer Confirm Destructive Action.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/slide-to-confirm

Usage

Props

Part	Prop	Type	Default	Description
`SlideToConfirm`	`label`	`string`	`required`	The instruction and the button's name.
`SlideToConfirm`	`onConfirm`	`() => void`	`required`	Called once.
`SlideToConfirm`	`confirmedLabel`	`string`	`"Confirmed"`	Text after confirming.
`SlideToConfirm`	`threshold`	`number`	`0.85`	Share of the track the thumb must cross.
`SlideToConfirm`	`disabled`	`boolean`	`false`	Turn it off.

Keyboard

Enter / Space on the thumb: confirm.

Accessibility

The thumb is a real button named by the instruction. Drag is not required: Enter or Space (a click with detail 0, also sent by screen readers) confirms.
A plain mouse or finger tap only nudges the thumb to show how it works, so a stray tap never confirms.
The result ("Confirmed") is announced in a live region.
The direction follows the text direction; transitions are removed with prefers-reduced-motion.

Testing

The component ships with a Testing Library test (slide-to-confirm.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.

Guide and examples

When to use it

Use it for actions that cost money or are hard to reverse and where a mistaken tap is likely: pay, send, start a ride.

Do not use it for routine actions: it is slower than a button. For destructive web actions, prefer Confirm Destructive Action.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/slide-to-confirm

Usage

Props

Part	Prop	Type	Default	Description
`SlideToConfirm`	`label`	`string`	`required`	The instruction and the button's name.
`SlideToConfirm`	`onConfirm`	`() => void`	`required`	Called once.
`SlideToConfirm`	`confirmedLabel`	`string`	`"Confirmed"`	Text after confirming.
`SlideToConfirm`	`threshold`	`number`	`0.85`	Share of the track the thumb must cross.
`SlideToConfirm`	`disabled`	`boolean`	`false`	Turn it off.

Keyboard

Enter / Space on the thumb: confirm.

Accessibility

The thumb is a real button named by the instruction. Drag is not required: Enter or Space (a click with detail 0, also sent by screen readers) confirms.
A plain mouse or finger tap only nudges the thumb to show how it works, so a stray tap never confirms.
The result ("Confirmed") is announced in a live region.
The direction follows the text direction; transitions are removed with prefers-reduced-motion.