中文在地化
身分證字號輸入
台灣身分證字號輸入：檢查碼驗證、預設遮罩顯示、性別區徽章。
台灣身分證字號的專用輸入欄位：內建戶政司公開的檢查碼演算法（首字母轉碼加權），輸入滿 10 碼即時驗證並以動畫回饋；預設遮罩中段四碼（A12****789，眼睛按鈕切換顯示）；驗證通過時自動顯示首字母對應的戶籍縣市與第 2 碼對應的性別小徽章。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add taiwan-id-inputPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<TaiwanIdInput/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/taiwan-id-input.json或在 components.json 設定 registries 後，改用 @webberui/taiwan-id-input 安裝。
使用
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狀態 - 使用者系統開啟「減少動態效果」時，停用搖晃與縮放脈衝動畫，僅保留顏色與文字回饋