輸入元件
滾輪時間選擇器
iOS 風格 3D 滾輪選時間：慣性滾動、吸附、透視弧面。
iOS 風格的時／分雙欄 3D 滾輪：數字沿弧面 rotateX 排列（越遠越斜越淡），支援拖曳與滑鼠滾輪的慣性滑動，放開後以彈簧吸附到最近的刻度，選中列有高亮框，聚焦後也能用鍵盤上下微調。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/wheel-time-picker.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
40
編輯中的呼叫預設屬性
<WheelTimePicker/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/wheel-time-picker.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/wheel-time-picker 安裝。
使用
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 提供足夠的觸控目標