Intro

The inline signature form cell is a form cell that allows users to enter their signature into a form to verify identity and express intent of acceptance. The difference between this component and signature capture is that this component’s interaction and behaviors are integrated into the form, allowing the users to review content during the signing.

Example of the in-line signature form cell in compact width (left) and regular width (right)

Example of the inline signature form cell in compact width (left) and regular width (right)

Usage

Use the inline signature form cell when user consent is required.
Use a concise header to communicate the purpose and importance of the signature requirement.
Use an asterisk (*) next to the header to indicate that the signature is required.

Don't

Don’t use the inline signature form cell for insignificant or non-essential tasks.

Anatomy

A. Header

The header section contains a label and a “Cancel” button. Initially, the “Cancel” button is hidden.

B. Signature Canvas

The signature canvas is a drawable area. Initially, it is in an inactive state. The user can activate the area by tapping once. The area allows freehand drawing.

The footer section is hidden initially. It contains primary actions of the component, such as “Save”, “Clear”, and “Re-enter Signature”.

In-line signature form cell anatomy

Inline signature form cell anatomy

Behavior and Interaction

An inline signature form cell starts from an empty state. When the user taps on the signature canvas, it activates a drawing area where the user can draw and insert the signature. After tapping on save, it displays the saved signature on a read-only canvas.

Life-cycle of an in-line signature capture form cell; inactive state, active state, signed state, and saved state consecutively

Life-cycle of an inline signature capture form cell; inactive state, active state, signed state, and saved state consecutively

Inactive State

This is the initial state of the form cell. By tapping anywhere on the signature canvas, the form cell switches to active state.

Active State

The active state makes the signature canvas drawable. When the form cell is active, the footer appears. Tapping the “Cancel” button, the form cell goes back to the inactive state.

Signed State

When the user starts signing, the “Clear” and “Save” buttons are activated. Tapping “Clear” brings the form cell back to the active state. Tapping the “Save” button, brings it to the saved state. Similarly, tapping the “Cancel” brings it to the inactive state.

Saved State

The signature is saved and the signature canvas becomes inactive. Tapping “Re-enter Signature”, brings the form cell back to the cleared inactive state.