統一編號輸入
台灣統編 8 碼輸入：即時檢查碼驗證、格式化、對錯動畫回饋。
實作財政部公開的統一編號檢查碼演算法：各位數字依序乘上權數 1,2,1,2,1,2,4,1，乘積取數字和加總，總和能被 5 整除即通過（2023 年 4 月起的現行規範，向下相容舊統編），並處理第 7 碼為 7 的特例。輸入滿 8 碼即時驗證——通過時綠勾脈衝，失敗時整列紅框搖晃並說明原因；貼上含雜訊的字串會自動清洗為純數字。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<TaxIdInput />
安裝
npx shadcn@latest add https://webberui.com/r/tax-id-input.json或在 components.json 設定 registries 後，改用 @webberui/tax-id-input 安裝。
安裝依賴後，從 registry JSON（/r/tax-id-input.json 的 files[0].content）複製 tax-id-input.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { TaxIdInput, validateTaxId } from "@/components/ui/tax-id-input";
<TaxIdInput
label="統一編號"
onChange={(value) => console.log(value)}
onValid={(ok, value) => ok && console.log(`${value} 可開立發票`)}
/>
// 檢核函式可單獨使用（適合表單送出前再驗一次）
validateTaxId("12345675"); // true（演算法測試號碼，非真實公司）
validateTaxId("12345678"); // falseProps
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 受控值（僅數字，最多 8 碼）；不提供時為非受控模式 |
defaultValue | string | "" | 非受控模式的初始值 |
onChange | (value: string) => void | — | 值變動時回呼，參數為清洗後的純數字字串 |
onValid | (valid: boolean, value: string) => void | — | 輸入滿 8 碼完成驗證時回呼，同一個值只觸發一次 |
label | string | "統一編號" | 欄位標籤文字 |
disabled | boolean | false | 停用輸入 |
name | string | — | 透傳給原生 input 的表單欄位名稱 |
className | string | — | 透傳到最外層容器 |
另外具名匯出 validateTaxId(input)、sanitizeTaxId(raw) 與 TaxIdStatus 型別，方便在表單層重複使用同一套檢核邏輯。
可及性
- 實際輸入由單一原生
input承載（inputMode="numeric"、pattern="[0-9]*"），8 個視覺格子僅為展示並以aria-hidden隱藏，鍵盤與行動裝置數字鍵盤行為與一般輸入框一致 - 驗證訊息置於
aria-live="polite"區域，狀態變化會被螢幕閱讀器朗讀；驗證失敗時同步設定aria-invalid - 使用者系統開啟「減少動態效果」時，停用搖晃、脈衝與游標閃爍動畫，僅保留顏色與文字回饋