The signature capture allows users to input their signature by signing directly on the screen. The inputted signature is captured and then saved with an optional watermark for additional information.

Usage

The signature capture may be used when users must sign to authorize workflows. It can be used in various cases, like approving an order, confirming a task, indicating receival, signing off for another person, etc.

Structure

The structure of the signature capture includes an app bar, submit button, signature line, divider line, footer, and clear button.

A. App Bar

The app bar includes the title of what is being signed, an “X” button for users to exit out of the form cell, and a “Submit” button which is enabled once users sign.

B. Submit Button

The submit button is disabled on the initial signature screen. It is enabled once users sign in order to complete the signing process.

C. Signature Line

The signature line prompts users to input their signature in the space given.

D. Divider Line

The divider line separates the signing screen from the footer.

E. Footer

The footer marks the bottom of the signature capture form cell and houses the “Clear” button.

F. Clear Button

The clear button may be used if the user wants to erase what they have currently signed.

Watermark (Optional)

The signature capture supports an optional watermark which includes two lines of text and can be saved as a bitmap or SVG with the final signature once it is submitted. The text can include a timestamp, unique ID, job title, etc. 

Specs

On mobile, the signature capture fills the full screen. On tablet, the signature capture is a responsive dialog.

Padding and Alignment

Signing Area

Main Colors