中文在地化
電子發票手機條碼載具輸入
台灣電子發票共通性載具（手機條碼）輸入元件：驗證「/ 開頭 + 7 碼」格式與字元集，並即時把載具號碼畫成 Code39 條碼供掃描。
台灣電子發票「手機條碼」載具輸入框：自動轉大寫、逐字驗證字元集（大寫英數與 + - .），格式正確時即時渲染 Code 39 條碼視覺化（裝飾示意、非掃描級）並提供儲存載具動畫。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/invoice-carrier-input.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<InvoiceCarrierInput/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/invoice-carrier-input.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/invoice-carrier-input 安裝。
使用
import { InvoiceCarrierInput } from "@/components/ui/invoice-carrier-input";
const [carrier, setCarrier] = React.useState("");
<InvoiceCarrierInput
value={carrier}
onChange={setCarrier}
onValid={(v) => console.log("格式正確", v)}
onSave={(v) => saveCarrier(v)}
/>也可以不受控使用，僅接收合法值：
<InvoiceCarrierInput defaultValue="/AB12CD3" onValid={(v) => console.log(v)} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 受控值，與 onChange 搭配使用 |
defaultValue | string | "" | 非受控模式的初始值 |
onChange | (value: string) => void | — | 值變動時回呼，收到清洗後（大寫、含開頭 /）的字串 |
onValid | (value: string) => void | — | 由「不合法／未完成」轉為「格式正確」的瞬間觸發一次 |
onSave | (value: string) => void | — | 按下「儲存載具」按鈕時觸發 |
showBarcode | boolean | true | 格式正確時是否顯示 Code 39 條碼視覺化 |
className | string | — | 透傳到外層容器 |
可及性
- 實際輸入為單一隱形
input（疊在字格之上），設有aria-label說明格式，含不合法字元時標記aria-invalid - 狀態列使用
role="status"與aria-live="polite"，格式提示、錯誤與通過訊息會被輔助科技朗讀 - 條碼 SVG 標記
aria-hidden，其下方以純文字完整顯示載具內容作為替代 - 使用者系統開啟「減少動態效果」時，停用條碼逐條生長、搖晃與游標閃爍動畫，功能不受影響