Blazor Signature Overview
This article provides information about the Blazor Signature component and its core features.
The Blazor Signature component provides an area where users can draw their signatures with a mouse, pen, or with their fingertips. You can use the component in any application where the users must sign a document. The Blazor Signature integrates easily with the TelerikForm. The component stores the value of the signature as a base64 string
The Signature component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Signature
- Use the
TelerikSignaturetag to add the component to your razor page. - Set the
Valueparameter to astringproperty. It supports one-way and two-way binding. - Set the
WidthandHeightparameters topxvalues. - Increase the SignalR Message Size
Blazor Signature with basic configuration
<TelerikSignature @bind-Value="@SignatureValue" Width="300px" Height="300px">
</TelerikSignature>
@code {
private string SignatureValue { get; set; }
}
Appearance
The Signature component provides settings to control its appearance, for example colors and borders. Read more about the Blazor Signature appearance settings...
Events
Use the Blazor Signature blur and value change events to respond to user actions. Read more about the Blazor Signature events...
SignalR Message Size
In Blazor server-side applications, the Signature component uses the SignalR WebSocket, which has a default maximum message size of 32 KB. This is rarely enough for the Signature Value, which is a Base64 image, so increase the max WebSocket message size for the Blazor application.
Signature Parameters
The following table lists the Signature parameters. Also check the Signature API Reference.
| Parameter | Type and Default Value | Description |
|---|---|---|
AriaDescribedBy |
string |
Maps to the area-describedby attribute. Use this parameter to establish a relationship between widgets or groups and the text that describes them. |
AriaLabel |
string |
Maps to the aria-label attribute. Use this parameter if the text that labels the component is not visible. |
AriaLabelledBy |
string |
Maps to the area-labelledby attribute. Use this parameter to reference another element to define its accessible name. |
Class |
string |
Renders a custom CSS class to the <div class="k-signature"> element. Use it to override theme styles. |
DebounceDelay |
int (150)
|
Time in milliseconds between the last typed symbol and the internal oninput event firing. |
Enabled |
bool (true)
|
Defines if the component is enabled. |
ExportScale |
double (2)
|
The Width and Height of the component will be multiplied by the value of the ExportScale when converting the signature to an image. |
Height |
string |
Defines the height of the component. Set it in px. |
HideLine |
bool |
Whether the dotted line is rendered. |
Maximizable |
bool |
Whether the Signature can be maximized via a button at the top-right corner. When maximized, the component will show a modal popup dialog. Also see PopupScale. |
PopupScale |
double (3)
|
The Width and Height of the component will be multiplied by the PopupScale value when maximizing the Blazor Signature. Also see Maximizable. |
ReadOnly |
bool |
Maps to the readonly attribute. Use this parameter to put the Signature in read-only state. |
Smooth |
bool |
Use this parameter to smoothen the signature line. |
StrokeWidth |
double? |
The drawn lines' thickness in pixels. |
TabIndex |
int? |
Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key. |
ValidateOn |
ValidationEvent enum ( Input) |
Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs. |
Width |
string |
Defines the width of the component. Set the it in px. |
Signature Reference and Methods
The Signature exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref directive attribute. The methods are:
| Method | Description |
|---|---|
Refresh |
Use the method to programmatically re-render the Signature. |
Obtain reference to the Signature instance and execute methods
@* Get a reference to the Signature component and refresh it on button click *@
<TelerikButton OnClick="@RefreshClickHandler">Refresh the Signature</TelerikButton>
<TelerikSignature @bind-Value="@SignatureValue"
Width="300px"
Height="300px"
@ref="@SignatureReference">
</TelerikSignature>
@code {
private TelerikSignature SignatureReference { get; set; }
private string SignatureValue { get; set; }
private void RefreshClickHandler()
{
SignatureReference.Refresh();
}
}