滾輪時間選擇器
iOS 風格 3D 滾輪選時間：慣性滾動、吸附、透視弧面。
iOS 風格的時／分雙欄 3D 滾輪：數字沿弧面 rotateX 排列（越遠越斜越淡），支援拖曳與滑鼠滾輪的慣性滑動，放開後以彈簧吸附到最近的刻度，選中列有高亮框，聚焦後也能用鍵盤上下微調。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
40
<WheelTimePicker />
安裝
npx shadcn@latest add https://webberui.com/r/wheel-time-picker.json或在 components.json 設定 registries 後，改用 @webberui/wheel-time-picker 安裝。
安裝依賴後，從 registry JSON（/r/wheel-time-picker.json 的 files[0].content）複製 wheel-time-picker.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { WheelTimePicker } from "@/components/ui/wheel-time-picker";
<WheelTimePicker
defaultValue="09:30"
minuteStep={5}
onChange={(time) => console.log(time)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 受控時間值（"HH:mm"），外部變更時滾輪會平滑轉到對應位置 |
defaultValue | string | "09:30" | 非受控初始值（"HH:mm"） |
onChange | (value: string) => void | — | 滾輪吸附定位後回傳新的時間字串（"HH:mm"） |
minuteStep | number | 5 | 分鐘刻度間隔（1–30），預設產生 00、05…55 |
itemHeight | number | 40 | 單列高度（px），同時決定 3D 弧面的半徑 |
labels | { hour: string; minute: string } | { hour: "時", minute: "分" } | 時／分兩欄的無障礙標籤 |
className | string | — | 透傳到外層容器 |
可及性
- 每欄為
role="spinbutton"，提供aria-valuemin、aria-valuemax與aria-valuetext，聚焦後可用上下方向鍵逐格調整 - 弧面上的個別數字對輔助科技隱藏（
aria-hidden），避免重複朗讀，實際值由aria-valuetext播報 - 使用者系統開啟「減少動態效果」時，停用慣性與彈簧動畫，改為直接吸附定位
- 支援滑鼠拖曳、觸控與滾輪三種指標輸入，單列高度預設 40px 提供足夠的觸控目標