Data

TwBarcode

TwBarcode is a dependency-free Blazor barcode component. Set Value and Format for Code 128, Code 39, EAN-13, EAN-8 or UPC-A, or use ITwBarcodeService.

Last updated 16 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Give TwBarcode a Value and it draws a Code 128 barcode, which holds any ASCII text. The bars are a single SVG path, so they stay sharp at any size, and the text is printed underneath so it can be typed in if a scan fails.

RAZOR

<TwBarcode Id="basic-barcode" Value="TWB-2026-0042" />

Formats

Use Format to pick the symbology. Code128 (the default) suits shipping labels, tickets and tracking numbers. Code39 holds upper case letters, digits, space and -.$/+%, and is read by almost every scanner. Ean13, Ean8 and UpcA are retail product codes: give them the digits without the check digit and it is added for you, or with it and it is verified.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwBarcode Id="code128-barcode" Value="Order 1234" Format="BarcodeFormat.Code128" />
    <TwBarcode Id="code39-barcode" Value="TWBLAZOR" Format="BarcodeFormat.Code39" />
    <TwBarcode Id="ean13-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" />
    <TwBarcode Id="ean8-barcode" Value="9638507" Format="BarcodeFormat.Ean8" />
    <TwBarcode Id="upca-barcode" Value="03600029145" Format="BarcodeFormat.UpcA" />
</div>

Live value

The barcode is only rebuilt when Value, Format or QuietZone change, so it is cheap to bind to an input. Nothing is drawn while the value is empty or does not suit the format, such as lower case letters in Code 39.

Text to encode

RAZOR

<div class="flex flex-col gap-4">
    <div class="max-w-sm">
        <TwTextfield Label="Text to encode" @bind-Value="liveValue" BindEvent="oninput" />
    </div>
    <TwBarcode Id="live-barcode" Value="@liveValue" />
</div>

CSHARP

@code {
    private string liveValue = "Hello, TwBlazor";
}

Sizes

Use Size to set the height of the bars. The width follows from the height and the length of the value, and never grows past its container.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwBarcode Id="small-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Small" />
    <TwBarcode Id="medium-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Medium" />
    <TwBarcode Id="large-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Large" />
</div>

Text and quiet zone

Set ShowText="false" to leave out the printed text. Scanners find the bars by the plain margin either side, called the quiet zone; each format has its own minimum, which is used by default. Only reduce QuietZone when the barcode already sits on a plain light background.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwBarcode Id="no-text-barcode" Value="TWB-2026-0042" ShowText="false" />
    <TwBarcode Id="small-quiet-zone-barcode" Value="TWB-2026-0042" QuietZone="4" Rounded="Rounded.Md" Shadow="Shadow.Sm" />
</div>

Colors and dark mode

The bars and text are drawn in the current text color over a background, set by Foreground and Background in TwBarcodeTheme, the same settings the QR code uses. By default a barcode stays black on white in dark mode too: unlike QR codes, inverted barcodes (light bars on a dark background) are not read reliably, so treat inverting one as a choice to test with your own scanners. Change the colors for every barcode in your theme, or for a single barcode with Class, and keep strong contrast between them.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwBarcode Id="default-colors-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Small" />
    <TwBarcode Id="rounded-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Small" Rounded="Rounded.Md" Shadow="Shadow.Sm" />
    <TwBarcode Id="brand-colors-barcode" Value="501234567890" Format="BarcodeFormat.Ean13" Size="BarcodeSize.Small" Class="bg-purple-50 text-purple-900" />
</div>

Using the service

ITwBarcodeService is registered by AddTwBlazor. Call it directly to build a barcode outside a component: Encode returns a Barcode of dark and light modules. Draw it with the shared SymbolSvg methods from TwBlazor.Services.Encoding, which draw QR codes too: ToSvg writes a standalone SVG (with an optional caption) for a file, a label or inline markup, ToSvgDataUri gives a download link or image source, and GetSvgPath gives the path data for your own markup. TryEncode tells you whether a value suits a format without throwing.

Download SVG

RAZOR

<div class="flex flex-wrap items-center gap-6">
    <div class="w-64">@((MarkupString)serviceSvg)</div>
    <TwButton Href="@serviceDataUri" download="twblazor-barcode.svg" Color="Color.Primary" Label="Download SVG" />
</div>

CSHARP

@code {
    private string serviceSvg = string.Empty;
    private string serviceDataUri = string.Empty;
    
    protected override void OnInitialized()
    {
        var barcode = BarcodeService.Encode("501234567890", BarcodeFormat.Ean13);
        var svgOptions = new SymbolSvgOptions { Caption = barcode.Text, Title = $"Barcode: {barcode.Text}" };
        serviceSvg = barcode.ToSvg(svgOptions);
        serviceDataUri = barcode.ToSvgDataUri(svgOptions);
    }
}

Accessibility

A barcode is exposed as an image (role="img") named "Barcode: " followed by its text, or after AriaLabel or AriaLabelledBy when set, and it is not a Tab stop. The printed text is hidden from screen readers so it is not read twice. Its colors opt out of forced colors mode (forced-color-adjust: none), because recolored bars may not scan.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwBarcodeTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Text`	string
`Small`	string
`Medium`	string
`Large`	string
`Base`	string
`Background`	string
`Foreground`	string

Full reference: TwBarcodeTheme on the API docs.

TwBarcode

Basic usage

Formats

Live value

Sizes

Text and quiet zone

Colors and dark mode

Using the service

Accessibility

Keyboard navigation

Theme configuration