生肖輪盤
十二生肖環形輪盤：旋轉選擇、選中生肖展開年份與特質卡
十二生肖 SVG 環形輪盤：可拖曳或點擊旋轉、放開後以 spring 吸附到扇區，頂部指針所指的生肖會在中央展開資訊卡（近三個年份、五行、性格關鍵詞），也可輸入出生年自動跳轉到對應生肖。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0
300
<ChineseZodiacWheel />
安裝
npx shadcn@latest add https://webberui.com/r/chinese-zodiac-wheel.json或在 components.json 設定 registries 後，改用 @webberui/chinese-zodiac-wheel 安裝。
安裝依賴後，從 registry JSON（/r/chinese-zodiac-wheel.json 的 files[0].content）複製 chinese-zodiac-wheel.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { ChineseZodiacWheel } from "@/components/ui/chinese-zodiac-wheel";
// 非受控：預設選中「馬」（索引 6）
<ChineseZodiacWheel
defaultValue={6}
onChange={(index, zodiac) => console.log(index, zodiac.name)}
/>十二生肖資料（地支、五行、性格關鍵詞）與年份換算表皆內建於元件，無需外部請求。年份換算以 2020（庚子鼠年）為基準、REFERENCE_YEAR = 2026 為「近三個年份」的上限，之後要顯示更新的年份只需調整該常數。另外元件也輸出 yearToZodiacIndex(year) 工具函式，可在外部把西元年轉為生肖索引。
注意：生肖實際以農曆正月初一為分界，元件以國曆年近似（示範用途），一、二月出生者請依農曆年修正。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 受控選中生肖索引（0=鼠、1=牛 … 11=豬） |
defaultValue | number | 0 | 非受控預設索引 |
onChange | (index: number, zodiac: ZodiacInfo) => void | — | 選中生肖變更時回呼 |
size | number | 300 | 輪盤直徑（px） |
showYearInput | boolean | true | 是否顯示出生年查詢輸入框 |
className | string | — | 透傳到外層容器 |
可及性
- 輪盤為
role="slider"並可鍵盤聚焦，方向鍵可逐格切換生肖，aria-valuetext會朗讀當前生肖、地支與五行 - 使用者系統開啟「減少動態效果」時，停用 spring 旋轉與卡片過場，切換立即完成
- 扇區 SVG 對輔助科技隱藏（
aria-hidden），語意由 slider 屬性完整承載 - 出生年為標準
input，格式錯誤時設定aria-invalid並以role="alert"顯示提示