The In-line 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.

Structure

A. Header

The header section contains a title 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.

C. Footer

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

Behavior and Interaction

Inactive State

This is the initial state of the form cell. By tapping anywhere on the signature canvas, the form cell will switch 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 will go back to the inactive state.

Signed State

When the user starts signing, the clear and save buttons are activated. Tapping clear will go back to the active state. Tapping the save button will go to the saved state. Similarly, tapping the cancel button will go to the inactive state.

Saved State

The signature is saved and the signature canvas becomes inactive. Tapping Re-enter Signature will go back to the cleared inactive state.

Variations

Light and Dark Mode

Adaptivity

Resources

Signature Capture