Blazor Signature - Overview



Background color

Stroke width

  • 1
  • 2
  • 3
  • 4
  • 5

Popup Scale

  • 1
  • 1.5
  • 2

Hide line


By using the Telerik UI for Blazor Signature component, you can allow your end-users to draw their signatures using mouse or touch devices.
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The Signature component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor Signature component enables the use to create a handwritten signature and either submit it as part of a form or display it in a customized way, including an option to show it in a dedicated dialog, which provides an easy-to-read preview of the signature.

The dialog (popup) preview of the Blazor Signature component can be opened by clicking on the maximize button and closed either by clicking on the dialog overlay or by the dialog's minimize button.

In addition, the Blazor Signature component has various appearance settings that can be configured:

  • BackgroundColor - sets the color of the signatures surface
  • Color - sets the stroke color of the signature. Using a contrast values for the Color and Background Color parameters is preferable, so that there is a better distinction between them.
  • ExportScale - defines the scale factor for the exported value as base64-encoded string. Use a higher value for better display and print results.
  • HideLine - configures if a dotted line should be displayed as an indicator where the signature should be drawn.
  • Maximizable - defines a value indicating whether the component can be maximized and display a popup that contains an easier to read image of the signature.
  • PopupScale - sets a value indicating the scaling factor of the popup preview of the signature.
  • StrokeWidth - defines the line thickness of the signature.
  • Smooth - sets a value indicating whether to smoothen out the signature lines to make them less sharp and better looking.
This Blazor Signature Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.