QR Code

Set Value and you have a working code. Everything else is presentation. The markup is vector, so the same component prints sharp at any size and works identically on Blazor Server, WebAssembly and Auto.

A QR code carries text only a camera can read. Turn on ShowValue, or set AriaLabel, wherever the value is not already written somewhere on the page — someone using a screen reader cannot point a phone at their own screen. Label adds a caption above the code and Size takes any CSS length.

ErrorCorrection decides how much of the code can be lost or covered and still be read. A higher level needs more modules for the same text, so the code grows — the version and the module count under each one below show it, all four drawn at the same 8rem. Medium is the usual choice; go higher when the code will be printed small, printed on something that creases, or covered by a centre image.

ModuleShape changes the shape drawn for each dark module. Square is the most reliable to scan, Dot the most decorative and the least reliable. The three finder patterns in the corners stay solid squares whichever shape is chosen, because a reader finds the code by those squares before it reads anything else.

Set Image to a URL or a data URL and it is drawn in the middle of the code. Doing so raises the error correction level to at least Quartile on its own, because a centre image is damage the code has to absorb. Keep ImageSize small — it is clamped to 0.05–0.3 — and test a real scan before shipping one.

The default colours are dark on white and stay that way in a dark theme, because enough readers refuse an inverted code that following the theme would trade a working code for a tidier page. Override Foreground and Background where that trade is worth making. QuietZone is the light margin in modules — four is the specified minimum, and widening it is the cheapest fix for a code printed against a busy background.

A code is only as useful as the text in it. Well-known prefixes are what make a scan do something: https://… opens a page, mailto:… starts an email, tel:… dials, WIFI:T:WPA;S:name;P:secret;; joins a network and a vCard adds a contact. Pick a payload below and edit it.

OnEncoded fires whenever the grid changes and carries the QrMatrix, or null where the value is empty or will not fit. Prefer it over reading the Matrix property in a parent's markup: a parent builds its markup before its children re-render, so Matrix there is the previous grid. GetSvg() returns the same drawing as a standalone document, ready to write to a file or hand to a download.

The encoder picks the smallest version the text fits in, so a short value and a long one come out at different module counts and look inconsistent side by side. MinVersion sets a floor; the encoder still grows past it when a value needs more room. Both codes below are version 6 or higher, so they line up.