E-Invoice Carrier Input (React)
An input for Taiwan's common e-invoice carrier (the mobile barcode) — it validates the "leading / plus 7 characters" format and its character set, and draws the carrier number as a Code 39 barcode in real time for scanning.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
An input for the Taiwan e-invoice "mobile barcode" carrier: it uppercases automatically, validates the character set character by character (uppercase letters, digits, and + - .), and once the format is correct renders a Code 39 barcode visualization in real time (decorative, not scan-grade) along with a save-carrier animation.
npx shadcn@latest add "https://webberui.com/r/invoice-carrier-input.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<InvoiceCarrierInput />
Installation
npx shadcn@latest add "https://webberui.com/r/invoice-carrier-input.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/invoice-carrier-input.
Usage
import { InvoiceCarrierInput } from "@/components/ui/invoice-carrier-input";
const [carrier, setCarrier] = React.useState("");
<InvoiceCarrierInput
value={carrier}
onChange={setCarrier}
onValid={(v) => console.log("valid format", v)}
onSave={(v) => saveCarrier(v)}
/>It can also be used uncontrolled, receiving only the valid values:
<InvoiceCarrierInput defaultValue="/AB12CD3" onValid={(v) => console.log(v)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled value, used together with onChange |
defaultValue | string | "" | Initial value in uncontrolled mode |
onChange | (value: string) => void | — | Callback when the value changes, receiving the cleaned string (uppercased, with the leading /) |
onValid | (value: string) => void | — | Fires once at the moment it goes from "invalid / incomplete" to "valid format" |
onSave | (value: string) => void | — | Fires when the "save carrier" button is pressed |
showBarcode | boolean | true | Whether to show the Code 39 barcode visualization once the format is valid |
className | string | — | Forwarded to the outer container |
Accessibility
- The real input is a single invisible
input(layered over the character boxes) with anaria-labelexplaining the format;aria-invalidis set when it contains invalid characters - The status line uses
role="status"witharia-live="polite", so format hints, errors, and pass messages are read out by assistive technology - The barcode SVG is marked
aria-hidden, with the carrier content shown in full as plain text below it as the alternative - When the user has "reduce motion" enabled at the system level, the bar-by-bar barcode growth, the shake, and the caret blink animations are disabled without affecting the functionality