Intro

Signature capture inline is a variation of the signature capture component. This variation allows users to input their signature on a screen that is shared with other components.

Signature capture inline on mobile (left) and tablet (right)

Signature capture inline on compact screen (left) and expanded screen (right)

Usage

Use a signature capture inline to allow users to view content on the screen along with the signature input area. This provides users with more context about what they are signing.

Use an asterisk (*) next to the header to indicate that the signature is required. For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.

Anatomy

Default State

A. Header

The header introduces the signature capture inline and may have an asterisk next to it to indicate that the signature is required. It is the only part of the component that is not covered by the activation scrim.

B. Activation Scrim

The activation scrim is an overlay that is placed on top of the signature cell. When the scrim is present, the signature cell is deactivated, and the user cannot sign. The user must tap on the scrim to activate the signature cell.

C. Text Label

The “Tap to Sign” text label provides a call-to-action for the user.

Anatomy of signature capture inline default state

Anatomy of signature capture inline default state

Active State

A. Header

The header introduces the signature capture inline. It may have an asterisk next to it to indicate that the signature is required.

B. “Cancel” Action Button

The “Cancel” action button allows for the user to exit the active signing area.

C. Signature Line

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

D. Action Button Footer

The action button footer provides the user two action buttons for the signing process. The “Clear” button erases what the user has signed on the screen. The “Save” button saves what the user has signed on the screen. Pressing the “Save” button will trigger the view mode of the signature and the “Re-enter Signature” button to appear.

Anatomy of the signature capture inline in active state

Anatomy of the signature capture inline in active state

View Mode

A. Header

The header introduces the signature capture inline.

B. Saved Signature

Once the user saves, the signature becomes transparent to indicate the signing area is deactivated.

C. “Re-Enter Signature” Button

The “Re-Enter Signature” button allows the user to reactivate the cell and input a new signature.

Anatomy of the signature capture inline in view state

Anatomy of the signature capture inline in view state

Error State

A. Header

The header introduces the signature capture inline.

B. Signature Area

The signature area lets users add their signature.

C. Error Message

The error message informs the user about the type of error that has occurred. It should be concise and limited to one line of text.

C. Action Button Footer

The action button footer includes a “Clear” and “Save” button.

Anatomy of the signature capture inline in error state

Behavior and Interaction

Activation Scrim

The activation scrim is a call-to-action for the user to input their signature. It also allows the user to scroll on the rest of the screen without accidentally signing in the signature capture inline cell. The “Tap to Sign” activation scrim appears only in the first instance where the signature capture inline cell has not been activated yet.

Activating the signature capture inline

Activating the signature capture inline

Re-Enter Signature

The “Re-Enter Signature” button appears once the user has pressed the “Save” button to save their signature. If pressed, it will clear the saved signature, reactivate the cell, and allow the user to sign.

Re-entering a signature

Re-entering a signature

Resources

Development: SignatureCaptureFormCell

SAP Fiori for iOS: Inline Signature Form Cell

Related Components/Patterns: Signature Capture