Progress Telerik UI for Blazor

Blazor Signature

  • Empower users to draw a handwritten signature using a mouse or a hand gesture on touch devices with the intuitive Blazor Signature UI component.
  • This component is part of Telerik UI for Blazor—the largest suite of truly native Blazor components designed to perfectly fit any app requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing libraries and rich docs & demos to help you get started in no time.
Telerik UI for Blazor Signature Component Header
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor Signature component enables end-users to draw a signature using a mouse or hand gesture on touch devices. Your end-users can benefit from multiple features to customize their signatures and adapt them to their needs, including size, border radius, line and background color and fill mode.

    See the Blazor Signature UI component demo

    Telerik UI for Blazor Signature Component Overview
  • Signature Validation

    Integrate the Telerik UI for Blazor Signature component in an edit form. This is beneficial for scenarios where you want the end-user to make a confirmation (e.g., filling out application forms, receiving documents, etc.) and submit their decision using the provided form.

    Check out the Blazor Signature validation demo

  • Signature Appearance

    The handwritten signature includes multiple configuration options such as stroke width and color as well as the ability to select/change the background color and hide or display the dotted line where the signature should be drawn.

    See how to change the background color of the Blazor Signature Component

    Telerik UI for Blazor Signature Component Appearance
  • Signature Popup

    The signature panel can be opened in a modal popup to maximize the signature canvas. To configure it, you only need to change the popup scale range.

    Telerik UI for Blazor Signature Component Popup Scale
  • Line Smoothing

    Drawing a signature on the screen with one's finger or mouse often results in choppy and jagged lines. Enable the optional line smoothing feature to help users provide clean-looking signatures. This feature will smooth out the lines and make the signatures look more natural.

  • Read-Only State

    Set the state of the UI for Blazor Signature component to read-only to cover scenarios when the user should be able to perform some limited interactions, such as opening the signature in a popup, but should be restricted from modifying the signature itself.

  • Signature Component Events

    To ensure smooth interaction, the UI for Blazor Signature component includes the following set of events:

    • OnBlur: fires when the Signature loses focus
    • OnChange: fires when the user presses Enter, or when the component loses focus
    • ValueChanged: fires when signature is fully drawn

    Check out the Blazor Signature events documentation

  • Signature Component Theming

    The Blazor Signature component supports four built-in themes, including Default (our own Telerik-infused styling), Material (based on the Material Design guidelines), Bootstrap and Fluent. Additionally, you can customize any of the ready-to-use themes with a few lines of CSS or create a new one to match your branding needs by using the Progress ThemeBuilder application.

    Telerik-UI-for-Blazor-Signature-Component-Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.