Barcode
A linear barcode drawn as SVG, in any of fourteen symbologies. The encoding happens in C# through BarcodeEncoder — no JavaScript, no image request and no dependency — so the symbol is part of the rendered markup and prints, scales and copies like any other vector.
A barcode is printed, not decorated
A scanner measures the contrast between a bar and the space beside it, so the colours are fixed dark on white and stay that way in a dark theme.
Two symbologies — POSTNET and the Royal Mail 4-state code — carry their data in the bar heights, so squashing one destroys it.
And too little quiet zone is the single most common reason a printed barcode will not read.
Default
Set
Value and you have a symbol. Type defaults to BarcodeType.Code128, the general-purpose choice and the densest of the linear codes. ShowValue is on by default: the line of text under the bars is what a person reads when the scan fails.Fourteen Symbologies
A symbology is the alphabet and the rules, not just the look — the type has to match what the reader on the other end expects. Pick one below and the value box takes its hint straight from
BarcodeEncoder.DescribeInput. Type something the symbology cannot carry and the component renders a role="alert" message naming the problem rather than throwing, because an unhandled exception on Blazor Server would take the circuit down.Retail Product Codes
EAN-13, EAN-8 and UPC-A all have a mandatory check digit, so the encoder works it out and appends it whatever
AddChecksum says. That means the encoded value is not always what was passed in — 590123412345 goes in and 5901234123457 comes out. Store the encoded value where the number has to match what a scanner will report. The digits either side of the guard bars are part of the standard rather than decoration.The Optional Check Character
Four symbologies have an optional check character: Code 39, Interleaved 2 of 5, Codabar and MSI.
AddChecksum is off by default, because a reader not configured to expect one reports it as part of the data. ShowChecksum is separate and also off: the check digit is for the scanner, and printing it confuses anyone keying the number in by hand.Postal Codes Carry Data in the Heights
POSTNET and the Royal Mail 4-state code are height-modulated: every bar is the same width and it is the tall ones that carry the data. A layout that shortens the bars on either of these destroys the message rather than just making it harder to aim at. Check
Symbol.IsHeightModulated before letting anything squash them.Books and Serials
ISBN and ISSN are EAN-13 underneath, and they are the only two symbologies that print two lines: the human-readable number above the bars and the thirteen digits of the product code below. Hyphens in the input are accepted and kept in the printed line.
Module Width and Quiet Zone
A barcode's width comes from its data, so
ModuleWidth — the width of one module — is what decides how wide the whole symbol draws. Height is a free choice on every symbology except the two postal ones. QuietZone defaults to whatever the symbology asks for; the third symbol below has it cut to zero, which is what a scanner failure usually looks like.Reading the Encoded Symbol
OnEncoded fires whenever the symbol changes and carries a BarcodeSymbol, or null where the value is empty or invalid. Prefer it over reading the Symbol property in a parent's markup: a parent builds its markup before its children re-render, so Symbol there is the previous symbol. GetSvg() returns a standalone document with fixed proportions and its colours baked in, ready for a file or a download.A Sheet of Labels
A realistic use: a warehouse pick list where every row carries its own symbol.
Label puts the caption above the bars, and the printed line underneath stays selectable so someone can key the number in when a scan fails.