React Signature

  • With the React Signature component, capturing handwritten signatures from users via a mouse or touch interface is a piece of cake.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
React Signature Component
  • Overview

    The React Signature component makes it easy to capture handwritten signatures from users via a mouse or touch interface and submit them as part of a form. This component comes in handy whenever you’re working on an application that requires the user to sign a document via touch or point devices—for example, financial documents or delivery receipts.

    See React Signature Component demo

    React Signature Component Overview
  • Appearance

    You can configure different aspects of the React Signature’s appearance through a predefined set of options. The styling options you have available are: strokeWidth, color, backgroundColor, size, fillMode and rounded.

    See React Signature Component demo: Appearance

    React Signature Component: Color
  • React Form Integration

    The Signature component can be easily integrated with the KendoReact Form as well as other React/HTML Forms. This integration enables you to do a variety of things with your Signature component—for example, display error messages or fully customize the behavior of the rendered component by using the additional properties of the Field component.

    See React Signature Component demo: Form Support

  • Line Smoothing

    To improve the appearance of the captured signatures, you can take advantage of the optional line smoothing feature.

    See React Signature Component demo: Line Smoothing

  • The Signature can be opened in a modal popup, which, when maximized, makes it easier to collect signatures on devices with smaller screens.

    See React Signature Component demo: Popup

  • Disabled and Read-Only Signature

    By default, the React Signature component is enabled and active. However, if you require that the KendoReact Signature component is disabled until certain conditions are met, you can quickly enable or disable the component through a single configuration option. Similarly, if you need the Signature to be read-only, say, to prevent an existing signature to be edited, just change the respective property.

    See Disabled React Signature demo

  • Events

    The React Signature component offers a set of events that developers can handle. This gives flexibility to trigger additional actions as the component goes through its lifecycle, or end-users interact with the component.

    See React Signature Component demo: Events

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.