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.
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.
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 Flow
This is the initial state of the form cell. By tapping anywhere on the signature canvas, the form cell will switch to 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.
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.
The signature is saved and the signature canvas becomes inactive. Tapping Re-enter Signature will go back to the cleared inactive state.