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

Blazor QRCode Overview

The Blazor QRCode component generates Canvas and SVG images that represent Quick Response (QR) codes.

The generated image from the component is a machine-readable label that contains information about data for a locator, identifier, or tracker that points to a website or application.

Creating Blazor QRCode

Add the TelerikQRCode tag to add the component to your razor page.
Set the Value property.
Set its Size property.
Optionally, choose a QRCode Type (one of the types we support).

A basic configuration of the Telerik QRCode

<TelerikQRCode Size="200px"
               Value="https://docs.telerik.com/blazor-ui/introduction">
</TelerikQRCode>

Encoding

Encoding represents the mapping between messages and qr codes. Read more about the supported Blazor QRCode Encodings.

Types

The component exposes Swiss and Image QRCode types. Read more about the supported Blazor QRCode Types...

Methods

The QRCode methods are accessible through its reference.

Refresh - redraws the component.

You can see the example with the Barcode and use the Refresh() method in the same way with QRCode.

Parameters

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.
`QRCodeEncoding`	`enum`	The encoding mode used to encode the value.
`QRCodeErrorCorrection`	`enum`	The error correction level used to encode the value.
`Value`	`string`	Defines the initial value of the QRCode.
`Size`	`string`	Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the Dimensions article. Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue.
`Width`	`string`	Sets the width of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Width` should be set to `Height`.
`Height`	`string`	Sets the height of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Height` should be set to `Width`.
`Class`	`string`	The CSS class that will be rendered on the main wrapping element of the QRCode component.
`Background`	`string`	The background color of the QRCode. Accepts a valid CSS color string, including HEX and RGB.
`Color`	`string`	Defines the color of the QRCode elements. The default color is black.
`Padding`	`double`	Defines the minimum distance in pixels that should be left between the border and the QR modules.

QRCodeOverlay parameters

The nested QRCodeOverlay tag exposes parameters that allow you to choose from predefined layouts or insert a custom image in the Blazor QRCode:

Parameter	Type	Description
`QRCodeOverlayType`	`enum`	Available options are `Image` and `Swiss`. When set to image, you have to specify the url source of the image. If set to swiss, a Swiss QR Code is created.
`ImageUrl`	`string`	The URL of the displayed overlay image.
`Width`	`double`	The width of the overlay in pixels.
`Height`	`double`	The height of the overlay in pixels.

QRCodeBorder parameters

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

Parameter	Type	Description
`Color`	`string`	The color of the border. Accepts a valid CSS color string, including HEX and RGB.
`Width`	`double`	The width of the border in pixels. By default the border width is set to zero which means that the border will not be visible.

Next Steps

Explore the QRCode Encodings

Explore the QRCode Types