New to Telerik UI for Blazor? Start a free 30-day trial

Blazor Barcode Overview

Updated on Oct 1, 2026

The Blazor Barcode component represents data in a machine-readable format. It supports several different encoding standards.

All graphics are rendered on the client by using Scalable Vector Graphics (SVG).

Creating Blazor Barcode

Add the TelerikBarcode tag to add the component to your razor page.
Set the Value property.
Set the Height and Width properties.
Optionally, choose a Type (one of the encodings we support).
- Its default encoding is Code39.

A basic configuration of the Telerik Barcode

Loading ...

Encoding represents the mapping between messages and barcodes. Read more about the supported Blazor Barcode Encodings.

The Barcode methods are accessible through it's reference.

Get a reference to the Barcode and use its methods

Loading ...

The Blazor Barcode provides various parameters that allow you to configure the component:

Parameter	Type	Description
`RenderAs`	`RenderingMode` enum `Svg`	Defines the preferred rendering mode - svg/canvas.
`Checksum`	`bool`	By setting it to true, the Barcode will display the checksum digit next to the value in the text area.
`Type`	`BarcodeType` enum `Code39`	Defines the symbology (encoding) the Barcode will use - (full list of supported encodings)
`Value`	`string`	Defines the initial value of the Barcode.
`Width`	`string`
`Height`	`string`
`Class`	`string`	The CSS class that will be rendered on the main wrapping element of the Barcode component.
`Background`	`string`
`Color`	`string`	Defines the color of the bar elements.

The nested BarcodeText tag exposes parameters that customize the appearance of the Blazor Barcode text:

Parameter	Type	Description
`Color`	`string`
`Font`	`string`
`BarcodeTextMargin`	`object`
`BarcodeTextMargin.Bottom`	`double`
`BarcodeTextMargin.Left`	`double`
`BarcodeTextMargin.Right`	`double`
`BarcodeTextMargin.Top`	`double`
`Visible`	`bool` `true`	If `false`, the Barcode will not display the value as text below the barcode lines.

The nested BarcodeBorder tag exposes parameters that enable you to customize the appearance of the Blazor Barcode border:

The nested BarcodePadding tag exposes parameters that enable you to customize the appearance of the Blazor Barcode: