發票載具輸入
手機條碼載具輸入：/ 開頭 8 碼驗證、Code39 條碼即時視覺化
台灣電子發票「手機條碼」載具輸入框：自動轉大寫、逐字驗證字元集（大寫英數與 + - .），格式正確時即時渲染 Code 39 條碼視覺化（裝飾示意、非掃描級）並提供儲存載具動畫。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<InvoiceCarrierInput />
安裝
npx shadcn@latest add https://webberui.com/r/invoice-carrier-input.json或在 components.json 設定 registries 後，改用 @webberui/invoice-carrier-input 安裝。
安裝依賴後，從 registry JSON（/r/invoice-carrier-input.json 的 files[0].content）複製 invoice-carrier-input.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
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，其下方以純文字完整顯示載具內容作為替代 - 使用者系統開啟「減少動態效果」時，停用條碼逐條生長、搖晃與游標閃爍動畫，功能不受影響