Syncfusion Blazor Barcode

Syncfusion Blazor Barcode Generator

Syncfusion's Blazor Barcode Generator package (Syncfusion.Blazor.BarcodeGenerator) provides three components for generating barcodes in Blazor applications:

All three work in Blazor Server, Blazor WebAssembly, and Blazor Web App (.NET 8+).

---

When to Use This Skill

• User needs to render or display a barcode in a Blazor component
• User asks about QR code generation (e.g., product links, 2FA, contact cards)
• User needs Data Matrix codes (pharmaceutical, logistics, label printing)
• User is configuring SfBarcodeGenerator, SfQRCodeGenerator, or SfDataMatrixGenerator
• User asks about exporting a barcode as an image (JPG/PNG) or Base64
• User asks about barcode types, error correction, checksums, or validation events
• User is embedding a logo in a QR code

---

Navigation Guide

Setting Up the Project

📄 Read: references/getting-started.md

• NuGet package installation
• _Imports.razor namespace configuration
• Service registration in Program.cs
• Stylesheet and script references
• Setup for Blazor Server, WebAssembly, and Web App
• Adding the first barcode component to a page

1D Barcode Types and Configuration

📄 Read: references/barcode-types.md

• All supported BarcodeType enum values with descriptions
• Code39, Code39 Extended, Code11, Code32, Code93, Codabar, Code128
• Choosing the right type for your use case
• EnableCheckSum configuration
• OnValidationFailed event handling

QR Code Generator

📄 Read: references/qr-code-generator.md

• Basic QR code usage
• Error correction levels (L, M, Q, H)
• Embedding a logo image in the QR code center
• Customizing logo size
• Color, dimension, and display text customization
• OnValidationFailed event

Data Matrix Generator

📄 Read: references/data-matrix-generator.md

• Basic Data Matrix code usage
• Color, dimension, and display text customization
• Common use cases (pharmaceuticals, labels)
• OnValidationFailed event

Exporting and Customizing Barcodes

📄 Read: references/export-and-customization.md

• Export barcode to image file (JPG/PNG)
• Export as Base64 string
• ForeColor for custom barcode color
• Width / Height for sizing
• BarcodeGeneratorDisplayText for label text
• Applies to all three generator types

---

Quick Start Examples

1D Barcode

@using Syncfusion.Blazor.BarcodeGenerator

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

QR Code

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

Data Matrix

@using Syncfusion.Blazor.BarcodeGenerator

<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

---

Key Properties

---

Common Use Cases

1D Barcode Types — SfBarcodeGenerator

Table of Contents

• Overview
• Choosing a Barcode Type
• Supported BarcodeType Values
• Code39
• Code39 Extended
• Code11
• Code32
• Code93
• Code93 Extended
• Codabar
• Code128
• EnableCheckSum
• OnValidationFailed Event
• Barcode Quick Reference Table

---

Overview

SfBarcodeGenerator renders 1D (linear) barcodes. Set the Type property to a BarcodeType enum value to select the symbology. Set Value to the string you want encoded.

@using Syncfusion.Blazor.BarcodeGenerator

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

---

Choosing a Barcode Type

Code128 is the most versatile — supports all 128 ASCII characters and is a safe default for most applications.

---

Supported BarcodeType Values

Code39

Character set: Digits 0–9, uppercase A–Z, space, -, +, ., $, /, % Checksum: Optional (not required for common use) Length: Variable (keep under 25 chars for practical scan width)

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code39"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

---

Code39 Extended

Enhanced version of Code39. Encodes all 128 ASCII characters including lowercase letters and special keyboard characters. Uses two-symbol combinations to represent characters outside the standard Code39 set.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code39Extension"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

---

Code11

Primarily used for labeling telecommunications equipment. Character set: Digits 0–9 and dash (-), plus start/stop codes.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code11"
                    Value="112">
</SfBarcodeGenerator>

---

Code32

Used for Italian pharmaceutical codes (Pharmacode). Expected input is exactly 8 digits (prefix with 0 if shorter). The 9th checksum digit is calculated automatically.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code32"
                    Value="01234567">
</SfBarcodeGenerator>

Note: Value must be exactly 8 numeric digits. The component calculates the checksum digit internally.

---

Code93

Designed to complement Code39 with denser encoding. Represents the full ASCII set through pairs of characters. Standard mode: Uppercase A–Z, digits 0–9, *, -, $, %, space, ., /, +

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code93"
                    Value="01234567">
</SfBarcodeGenerator>

---

Code93 Extended

Continuous, variable-length, self-checking symbology based on Code93. Can encode all 128 ASCII characters.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code93Extension"
                    Value="syncfusion">
</SfBarcodeGenerator>

---

Codabar

Variable-length barcode encoding 20 characters: 0–9, -$:/.+ABCD. Characters A, B, C, D are used as start/stop codes and are not part of the data. Common use: Libraries, blood banks, package delivery.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Codabar"
                    Value="123456789">
</SfBarcodeGenerator>

---

Code128

The most capable 1D symbology — encodes the full 128-character ASCII set with high density. Includes a mandatory checksum digit and supports three code sets:

The component automatically selects the optimal code set.

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

---

EnableCheckSum

The EnableCheckSum property controls whether a checksum character is appended and validated. The default is true for BarcodeType.Code39.

Set it to false to suppress the extra character displayed at the end of the barcode when you don't want it visible:

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code39"
                    Value="SYNCFUSION"
                    EnableCheckSum="false">
</SfBarcodeGenerator>

When to use `EnableCheckSum="false"`: When the downstream scanner does not expect a checksum character, or when you want to display the barcode without the appended check digit.

---

OnValidationFailed Event

Fires when Value contains characters that are not valid for the selected BarcodeType. Use this to give the user feedback or log the error.

@using Syncfusion.Blazor.BarcodeGenerator

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="@barcodeValue"
                    OnValidationFailed="@HandleValidationFailed">
</SfBarcodeGenerator>

@if (!string.IsNullOrEmpty(validationMessage))
{
    <p style="color: red;">@validationMessage</p>
}

@code {
    private string barcodeValue = "SYNCFUSION";
    private string validationMessage = "";

    private void HandleValidationFailed(ValidationFailedEventArgs args)
    {
        validationMessage = $"Invalid barcode value: {args.Message}";
    }
}

---

Barcode Quick Reference Table

Data Matrix Generator — SfDataMatrixGenerator

Overview

SfDataMatrixGenerator renders Data Matrix codes — a 2D barcode consisting of a grid of dark and light dots arranged in a square or rectangular symbol. Data Matrix codes are ideal for encoding small amounts of data in a compact area.

Key characteristics:

• Encodes numeric or alphanumeric data
• Very small physical footprint (suitable for tiny labels)
• Widely used in printed media: labels, letters, product packaging
• Easily read with a barcode scanner or mobile phone camera
• Common in pharmaceuticals, electronics manufacturing, and logistics

---

Basic Usage

@using Syncfusion.Blazor.BarcodeGenerator

<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

Note: Width and Height accept numeric values (interpreted as pixels) without the px suffix, unlike SfBarcodeGenerator and SfQRCodeGenerator which accept CSS strings.

---

Customizing Color

Use ForeColor to change the barcode module color. Useful for matching the barcode to a label design or brand palette.

<SfDataMatrixGenerator Width="200" Height="150"
                       ForeColor="red"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

Scanning tip: Always maintain high contrast between ForeColor and the background. Dark bars on a white background provide the most reliable scanning.

---

Customizing Dimensions

Adjust Width and Height to fit the barcode within your label or UI layout:

<SfDataMatrixGenerator Width="300" Height="300"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

Square dimensions are recommended since Data Matrix is inherently a square symbol — non-square dimensions will stretch it.

---

Customizing Display Text

By default, a text label is displayed below the Data Matrix code. Use DataMatrixGeneratorDisplayText to change or hide it:

<!-- Custom text label -->
<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
    <DataMatrixGeneratorDisplayText Text="Product Code">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

<!-- Hide the text label -->
<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
    <DataMatrixGeneratorDisplayText Visibility="false">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

---

OnValidationFailed Event

Fires when Value contains characters that are not valid for Data Matrix encoding. Use it to surface errors to users.

@using Syncfusion.Blazor.BarcodeGenerator

<SfDataMatrixGenerator Width="200" Height="150"
                       Value="@dataValue"
                       OnValidationFailed="@HandleValidationFailed">
</SfDataMatrixGenerator>

@if (!string.IsNullOrEmpty(errorMessage))
{
    <p style="color: red;">@errorMessage</p>
}

@code {
    private string dataValue = "SYNCFUSION";
    private string errorMessage = "";

    private void HandleValidationFailed(ValidationFailedEventArgs args)
    {
        errorMessage = $"Invalid Data Matrix value: {args.Message}";
    }
}

---

Common Use Cases

Product Label (compact numeric code)

<SfDataMatrixGenerator Width="150" Height="150"
                       Value="0123456789">
    <DataMatrixGeneratorDisplayText Visibility="false">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

Pharmaceutical / Shipping Label

<SfDataMatrixGenerator Width="200" Height="200"
                       Value="LOT-A4B2-EXP20260101">
    <DataMatrixGeneratorDisplayText Text="LOT-A4B2">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

Electronics PCB Marking

<SfDataMatrixGenerator Width="100" Height="100"
                       Value="SN12345678">
    <DataMatrixGeneratorDisplayText Visibility="false">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

---

Comparison: Data Matrix vs QR Code

Use Data Matrix when space is extremely limited or for industrial/manufacturing scenarios. Use QR Code for consumer-facing applications or when logo embedding is needed.

Export and Customization — Barcode Generator

Table of Contents

• Export to Image File
• Export as Base64 String
• Supported Export Formats
• Customizing Barcode Color
• Customizing Barcode Dimensions
• Customizing Display Text
• Applying Customization to All Three Generators

---

Export to Image File

Call .Export(fileName, BarcodeExportType) on a component reference to download the barcode as an image file in the browser.

Example with QR Code:

@using Syncfusion.Blazor.BarcodeGenerator

<button @onclick="OnExport">Download QR Code</button>

<SfQRCodeGenerator @ref="qrCode"
                   Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Text="Syncfusion"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

@code {
    private SfQRCodeGenerator qrCode;

    private void OnExport()
    {
        qrCode.Export("qr-code", BarcodeExportType.PNG);
    }
}

Example with 1D Barcode:

<button @onclick="OnExport">Download Barcode</button>

<SfBarcodeGenerator @ref="barcode"
                    Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

@code {
    private SfBarcodeGenerator barcode;

    private void OnExport()
    {
        barcode.Export("barcode", BarcodeExportType.JPG);
    }
}

⚠️ The export method is Export() (synchronous), not ExportAsync().

---

Export as Base64 String

Call .ExportAsBase64Image(BarcodeExportType) to get the barcode as a Base64-encoded string instead of triggering a download. Useful for embedding in emails, PDFs, or sending to an API.

@using Syncfusion.Blazor.BarcodeGenerator

<button @onclick="OnExportBase64">Get Base64</button>

<SfQRCodeGenerator @ref="qrCode"
                   Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

@if (!string.IsNullOrEmpty(base64String))
{
    <img src="@base64String" alt="QR Code" />
}

@code {
    private SfQRCodeGenerator qrCode;
    private string base64String = "";

    private async void OnExportBase64()
    {
        base64String = await qrCode.ExportAsBase64Image(BarcodeExportType.PNG);
    }
}

Note: ExportAsBase64Image returns a data URI string (e.g., data:image/png;base64,...) that can be used directly as an <img> src.

---

Supported Export Formats

Recommendation: Use PNG for barcodes whenever possible — lossless compression ensures the bars and modules are sharp, which is important for reliable scanning.

---

Customizing Barcode Color

Use ForeColor on any of the three generators to change the barcode bar/module color. Accepts any valid CSS color (named colors, hex, rgb):

<!-- Named color -->
<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    ForeColor="navy"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

<!-- Hex color -->
<SfQRCodeGenerator Width="200px" Height="200px"
                   ForeColor="#1565c0"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

<!-- RGB color -->
<SfDataMatrixGenerator Width="200" Height="150"
                       ForeColor="rgb(21, 101, 192)"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

Scanning contrast rule: Dark bars on a light background scan most reliably. Avoid light-colored barcodes on white backgrounds.

---

Customizing Barcode Dimensions

Width and Height control the rendered size of the barcode:

<!-- SfBarcodeGenerator and SfQRCodeGenerator accept CSS strings -->
<SfBarcodeGenerator Width="300px" Height="200px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>

<!-- SfDataMatrixGenerator accepts numeric values -->
<SfDataMatrixGenerator Width="300" Height="300"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>

Tip: For SfQRCodeGenerator and SfDataMatrixGenerator, use equal Width and Height for a square aspect ratio. Unequal values will stretch the symbol.

---

Customizing Display Text

Each generator has a corresponding display text child component. Use it to override the default label or hide it:

SfBarcodeGenerator

<SfBarcodeGenerator Width="200px" Height="150px"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
    <BarcodeGeneratorDisplayText Text="Product Code">
    </BarcodeGeneratorDisplayText>
</SfBarcodeGenerator>

SfQRCodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Text="Scan to visit"
                                Visibility="true">
    </QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

SfDataMatrixGenerator

<SfDataMatrixGenerator Width="200" Height="150"
                       Value="SYNCFUSION">
    <DataMatrixGeneratorDisplayText Text="LOT-001"
                                    Visibility="true">
    </DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

To hide the text for any generator, set Visibility="false" on the display text child component.

---

Applying Customization to All Three Generators

Full example showing color, dimensions, custom text, and export together:

@using Syncfusion.Blazor.BarcodeGenerator

<button @onclick="ExportAll">Export All</button>

<SfBarcodeGenerator @ref="barcode"
                    Width="250px" Height="120px"
                    Type="@BarcodeType.Code128"
                    ForeColor="#212121"
                    Value="SYNCFUSION">
    <BarcodeGeneratorDisplayText Text="Code128 Example"></BarcodeGeneratorDisplayText>
</SfBarcodeGenerator>

<SfQRCodeGenerator @ref="qrCode"
                   Width="200px" Height="200px"
                   ForeColor="#1a237e"
                   ErrorCorrectionLevel="ErrorCorrectionLevel.Medium"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

<SfDataMatrixGenerator @ref="dataMatrix"
                       Width="200" Height="200"
                       ForeColor="#b71c1c"
                       Value="SYNCFUSION">
    <DataMatrixGeneratorDisplayText Text="Data Matrix"></DataMatrixGeneratorDisplayText>
</SfDataMatrixGenerator>

@code {
    private SfBarcodeGenerator barcode;
    private SfQRCodeGenerator qrCode;
    private SfDataMatrixGenerator dataMatrix;

    private void ExportAll()
    {
        barcode.Export("barcode-export", BarcodeExportType.PNG);
        qrCode.Export("qr-export", BarcodeExportType.PNG);
        dataMatrix.Export("datamatrix-export", BarcodeExportType.PNG);
    }
}

Getting Started with Syncfusion Blazor Barcode Generator

Table of Contents

• Prerequisites
• Install NuGet Packages
• Configure Namespaces
• Register Syncfusion Service
• Add Stylesheet and Script Resources
• Add Barcode Component to a Page
• Project-Type Differences
• Render Modes (Blazor Web App .NET 8+)
• Troubleshooting Setup

---

Prerequisites

• .NET SDK (latest recommended): https://dotnet.microsoft.com/en-us/download
• System requirements for Syncfusion Blazor components

---

Install NuGet Packages

Install both packages — BarcodeGenerator for the components and Themes for CSS:

Visual Studio (Package Manager Console):

Install-Package Syncfusion.Blazor.BarcodeGenerator
Install-Package Syncfusion.Blazor.Themes

dotnet CLI:

dotnet add package Syncfusion.Blazor.BarcodeGenerator
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Blazor Web App (WebAssembly / Auto render modes): Install packages in the client .Client project, not the server project.

---

Configure Namespaces

Open ~/_Imports.razor and add:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.BarcodeGenerator

For Blazor Web App with WebAssembly/Auto render modes, add this to _Imports.razor in the client project.

---

Register Syncfusion Service

Blazor WebAssembly — ~/Program.cs

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

Blazor Server App — ~/Program.cs

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
// ...

Blazor Web App (.NET 8+) — Both Projects

Server `~/Program.cs`:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();

Client `~/Program.cs`:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

---

Add Stylesheet and Script Resources

Blazor WebAssembly — ~/wwwroot/index.html

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"
            type="text/javascript"></script>
</head>

Blazor Server App / Blazor Web App — ~/Components/App.razor

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <!-- ... -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"
            type="text/javascript"></script>
</body>

Available themes: bootstrap5.css, material.css, fluent.css, tailwind.css, fabric.css

---

Add Barcode Component to a Page

Add any of the three generators to a .razor page (e.g., ~/Pages/Home.razor):

@using Syncfusion.Blazor.BarcodeGenerator

<!-- 1D Barcode -->
<SfBarcodeGenerator Width="@width" Height="@height"
                    Type="@BarcodeType.Code128"
                    Value="SYNCFUSION">
</SfBarcodeGenerator>
@code{
    string width = "200px";
    string height = "200px";
}

<!-- QR Code -->
<SfQRCodeGenerator Width="@qrWidth" Height="@qrHeight"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>
@code{
    string qrWidth = "200px";
    string qrHeight = "200px";
}

<!-- Data Matrix -->
<SfDataMatrixGenerator Width="@width" Height="@height"
                       Value="SYNCFUSION">
</SfDataMatrixGenerator>
@code{
    string width = "200px";
    string height = "200px";
}

---

Project-Type Differences

---

Render Modes (Blazor Web App .NET 8+)

When Interactivity Location is set to Per page/component, declare the render mode at the top of your .razor file:

@* Choose one render mode: *@
@rendermode InteractiveServer
@rendermode InteractiveWebAssembly
@rendermode InteractiveAuto

When Interactivity Location is Global, the render mode is set in App.razor and does not need to be declared per page.

---

Troubleshooting Setup

Component not rendering / blank area:

• Confirm AddSyncfusionBlazor() is called in Program.cs
• Verify @using Syncfusion.Blazor.BarcodeGenerator is in _Imports.razor
• Check render mode is configured for .NET 8+ Web App

Styles not applied:

• Confirm the theme CSS <link> is in <head>
• Check for conflicting global CSS overrides

Script errors in console:

• Confirm syncfusion-blazor.min.js is referenced and loading correctly
• For Server apps, place script at end of <body> in App.razor

License warning banner:

// Add in Program.cs before builder.Build()
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR-LICENSE-KEY");

Get a free community license at: https://www.syncfusion.com/sales/products

QR Code Generator — SfQRCodeGenerator

Table of Contents

• Overview
• Basic Usage
• Error Correction Level
• QR Code with Embedded Logo
• Customizing Logo Size
• Customizing Color
• Customizing Dimensions
• Customizing Display Text
• OnValidationFailed Event
• Common Patterns

---

Overview

SfQRCodeGenerator renders 2D QR codes — a grid of dark and light blocks arranged in a square. QR codes support three character sets:

• Numeric — digits only
• Alphanumeric — uppercase letters + digits + a few symbols
• Shift JIS8 — extended Japanese characters

QR codes use versions 1–40, where version 1 is 21×21 modules and each version adds 4 modules per side (version 40 = 177×177). The component automatically selects the version based on input length and error correction level.

---

Basic Usage

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

Square dimensions are recommended for QR codes (equal Width and Height).

---

Error Correction Level

QR codes include error correction codewords that allow the symbol to be scanned even when partially damaged or obscured. Set ErrorCorrectionLevel to control the tradeoff between data density and damage tolerance.

Default: ErrorCorrectionLevel.Low

Higher correction = larger QR code (more modules) for the same data. Use High when the QR code may be printed on textured surfaces or partially covered by a logo.

<SfQRCodeGenerator Width="200px" Height="200px"
                   ErrorCorrectionLevel="ErrorCorrectionLevel.High"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

---

QR Code with Embedded Logo

Embed a brand logo at the center of the QR code using QRCodeLogo with the ImageSource property. By default, the logo renders at one-third of the QR code's size.

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com/blazor-components">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
    <QRCodeLogo ImageSource="images/syncfusion-logo.png"></QRCodeLogo>
</SfQRCodeGenerator>

Important: The ErrorCorrectionLevel property is ignored when a logo is embedded. The logo effectively replaces the center modules, so ensure the rest of the QR code has enough data redundancy by using a higher correction level before adding a logo.

Customizing Logo Size

Control the logo size using Height and Width on QRCodeLogo. The effective size is capped at 30% of the QR code's dimensions — if you specify a larger value, 30% of the QR size is used instead.

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeLogo Width="40" Height="40"
                ImageSource="images/syncfusion-logo.png">
    </QRCodeLogo>
</SfQRCodeGenerator>

Rule of thumb: Keep logo size ≤ 30% of the QR code size to maintain scannability. Larger logos risk obscuring too many data modules.

---

Customizing Color

Use ForeColor to change the barcode bar color. Useful when embedding a QR code in a colored layout or printed design.

<SfQRCodeGenerator Width="200px" Height="200px"
                   ForeColor="#1a237e"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

Contrast note: Always ensure sufficient contrast between ForeColor and the background. Light-colored QR codes on white backgrounds may not scan correctly.

---

Customizing Dimensions

Set Width and Height as pixel values or CSS units:

<SfQRCodeGenerator Width="300px" Height="300px"
                   Value="https://www.syncfusion.com">
</SfQRCodeGenerator>

QR codes are always square by nature. Providing unequal width/height will stretch the rendering.

---

Customizing Display Text

By default, a text label is shown below the QR code. Use QRCodeGeneratorDisplayText to:

• Change the displayed text (independent of the encoded Value)
• Hide the text entirely

<!-- Custom display text -->
<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Text="Scan to visit Syncfusion">
    </QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

<!-- Hide display text -->
<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Visibility="false">
    </QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

---

OnValidationFailed Event

Fires when Value contains characters that are invalid for the QR code encoding. Handle this to inform users or prevent invalid submissions.

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="@qrValue"
                   OnValidationFailed="@HandleValidationFailed">
</SfQRCodeGenerator>

@if (!string.IsNullOrEmpty(errorMsg))
{
    <p style="color: red;">@errorMsg</p>
}

@code {
    private string qrValue = "https://www.syncfusion.com";
    private string errorMsg = "";

    private void HandleValidationFailed(ValidationFailedEventArgs args)
    {
        errorMsg = $"QR code validation failed: {args.Message}";
    }
}

---

Common Patterns

URL QR Code (website link)

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

2FA / TOTP QR Code

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="otpauth://totp/MyApp:user@example.com?secret=BASE32SECRET&issuer=MyApp">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>

Branded QR Code with Logo and High Error Correction

<SfQRCodeGenerator Width="250px" Height="250px"
                   ErrorCorrectionLevel="ErrorCorrectionLevel.High"
                   Value="https://www.syncfusion.com">
    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
    <QRCodeLogo Width="50" Height="50"
                ImageSource="images/brand-logo.png">
    </QRCodeLogo>
</SfQRCodeGenerator>

Use ErrorCorrectionLevel.High when embedding a logo, since the logo covers a portion of the QR code modules.

Contact Card (vCard)

<SfQRCodeGenerator Width="200px" Height="200px"
                   Value="BEGIN:VCARD&#10;VERSION:3.0&#10;FN:John Doe&#10;TEL:+1234567890&#10;END:VCARD">
    <QRCodeGeneratorDisplayText Text="Scan for contact info"></QRCodeGeneratorDisplayText>
</SfQRCodeGenerator>