身分證字號輸入
台灣身分證字號輸入：檢查碼驗證、預設遮罩顯示、性別區徽章。
台灣身分證字號的專用輸入欄位：內建戶政司公開的檢查碼演算法（首字母轉碼加權），輸入滿 10 碼即時驗證並以動畫回饋；預設遮罩中段四碼（A12****789，眼睛按鈕切換顯示）；驗證通過時自動顯示首字母對應的戶籍縣市與第 2 碼對應的性別小徽章。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<TaiwanIdInput />
安裝
npx shadcn@latest add https://webberui.com/r/taiwan-id-input.json或在 components.json 設定 registries 後，改用 @webberui/taiwan-id-input 安裝。
安裝依賴後，從 registry JSON（/r/taiwan-id-input.json 的 files[0].content）複製 taiwan-id-input.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { TaiwanIdInput, validateTaiwanId } from "@/components/ui/taiwan-id-input";
// 非受控：直接使用
<TaiwanIdInput onValidChange={(valid) => console.log(valid)} />
// 受控：自行管理值
const [id, setId] = React.useState("");
<TaiwanIdInput value={id} onChange={setId} masked />
// 也可單獨使用驗證函式
validateTaiwanId("A123456789"); // true（示範假資料）Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 目前輸入值（受控）；未提供時元件內部自管狀態 |
defaultValue | string | "" | 非受控模式的初始值 |
onChange | (value: string) => void | — | 值變動回呼，回傳已清洗的字串（1 字母 + 至多 9 數字） |
onValidChange | (valid: boolean) => void | — | 輸入滿 10 碼時回報驗證結果 |
masked | boolean | true | 預設是否遮罩中段四碼，可用眼睛按鈕切換 |
disabled | boolean | false | 停用輸入 |
className | string | — | 透傳到外層容器 |
另外具名匯出 validateTaiwanId(id: string): boolean，可在表單送出前獨立呼叫。
可及性
- 實際輸入為透明覆蓋欄位的原生
<input>（aria-label「身分證字號」），鍵盤輸入與螢幕閱讀器操作完全由它承接；驗證失敗時設定aria-invalid - 驗證結果（通過含縣市與性別、失敗）透過
aria-live="polite"區域朗讀；純視覺的字元格對輔助科技隱藏（aria-hidden） - 遮罩僅為畫面顯示層，欄位實際值完整保留，表單送出與
onChange均不受影響 - 眼睛切換按鈕具
aria-label與aria-pressed狀態 - 使用者系統開啟「減少動態效果」時，停用搖晃與縮放脈衝動畫，僅保留顏色與文字回饋