台灣手機輸入
09 開頭手機號自動格式化 09xx-xxx-xxx，市話/手機自動判別
台灣電話號碼輸入框：輸入時自動插入連字號（0912-345-678），偵測 09 開頭為手機、0X 區碼為市話並依區碼長度分組（02-2712-3456）；左側圖示隨型態切換、無效前綴即時紅色提示，貼上含 +886、全形數字或其他雜訊的字串會自動清洗。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<TaiwanPhoneInput />
安裝
npx shadcn@latest add https://webberui.com/r/taiwan-phone-input.json或在 components.json 設定 registries 後，改用 @webberui/taiwan-phone-input 安裝。
安裝依賴後，從 registry JSON（/r/taiwan-phone-input.json 的 files[0].content）複製 taiwan-phone-input.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { TaiwanPhoneInput } from "@/components/ui/taiwan-phone-input";
const [phone, setPhone] = React.useState("");
<TaiwanPhoneInput value={phone} onChange={setPhone} allowLandline />onChange 回傳清洗後的純數字（如 0912345678），適合直接存入資料庫；顯示用的連字號格式由元件內部處理。也可搭配匯出的 normalizeTaiwanPhone 與 analyzeTaiwanPhone 工具函式在元件外做清洗與驗證。
市話區碼表內建現行全部長途區碼（02～08、037、049、082、089、0836），比對採最長區碼優先；部分區碼實際混用 7/8 碼用戶號碼，元件取常見長度示範，需要更精確可擴充內建對照表。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 受控值：電話號碼（可含雜訊，內部自動清洗為純數字） |
onChange | (digits: string) => void | — | 值變更時觸發，回傳清洗後的純數字字串 |
allowLandline | boolean | true | 是否接受市話（0X 區碼）；false 時僅接受 09 開頭手機 |
placeholder | string | 依 allowLandline | 佔位提示文字 |
disabled | boolean | false | 停用輸入 |
name | string | — | 表單欄位名稱，會以隱藏欄位送出純數字 |
id | string | — | input 元素的 id，供外部 label 綁定 |
className | string | — | 透傳到最外層容器 |
可及性
- 使用
type="tel"、inputMode="tel"、autoComplete="tel"，行動裝置自動喚出數字鍵盤並支援自動填入 - 驗證失敗時設定
aria-invalid，錯誤與成功訊息置於aria-live="polite"區域即時朗讀 - 純裝飾的型態圖示與狀態圖示皆標記
aria-hidden，不干擾輔助科技 - 使用者系統開啟「減少動態效果」時，停用圖示切換、綠勾彈出與訊息展開動畫
- 編輯中段時游標位置會在重新格式化後正確還原，不會跳到行尾