滑動解鎖
拖曳滑塊到底才觸發的確認控制，防誤觸。
拖曳滑塊到底才觸發確認的防誤觸控制，適合付款、刪除等不可逆操作。未過門檻放手會 spring 回彈，成功時滑塊吸附終點並打勾，軌道提示文字帶 shimmer 高光掃過，並支援鍵盤方向鍵推進。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.9
2000
<SlideToUnlock />
安裝
npx shadcn@latest add https://webberui.com/r/slide-to-unlock.json或在 components.json 設定 registries 後，改用 @webberui/slide-to-unlock 安裝。
安裝依賴後，從 registry JSON（/r/slide-to-unlock.json 的 files[0].content）複製 slide-to-unlock.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { SlideToUnlock } from "@/components/ui/slide-to-unlock";
<SlideToUnlock
label="滑動以確認付款"
successLabel="付款已確認"
onConfirm={() => submitPayment()}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
label | string | "滑動解鎖" | 軌道中央的 shimmer 提示文字 |
successLabel | string | "已確認" | 解鎖成功後顯示的文字 |
threshold | number | 0.9 | 觸發確認所需的拖曳比例（0 ~ 1），未達放手回彈 |
onConfirm | () => void | — | 滑塊到達終點時呼叫（每次解鎖僅觸發一次） |
resetDelay | number | 0 | 成功後自動重置的延遲（毫秒），0 表示維持解鎖狀態 |
disabled | boolean | false | 停用互動（拖曳與鍵盤皆無效） |
className | string | — | 合併到最外層軌道 |
可及性
- 滑塊為
role="slider"的按鈕，以aria-valuenow/aria-valuetext即時回報進度百分比 - 完整鍵盤支援：
→/↑推進、←/↓後退（每次 10%）、End直接解鎖、Home歸零 - 解鎖成功透過
aria-live="polite"播報成功文字 - 使用者系統開啟「減少動態效果」時，關閉 shimmer 掃光，回彈與吸附改為近乎即時的定位