Signature Pad

Use a signature pad to capture handwritten signatures for forms that require them, such as legal documents or consent forms.

Default Signature Pad

<div class="form-group">
  <label class="form-label">Your signature</label>
  <span class="form-hint">Sign in the box below using your mouse or finger.</span>
  <div class="signature-pad">
    <canvas class="signature-pad-canvas" id="signature"></canvas>
    <div class="signature-pad-actions">
      <button type="button" class="btn btn-secondary btn-sm">Clear</button>
    </div>
  </div>
</div>

Implementation

We recommend using the signature_pad library (MIT license, 9.3k+ GitHub stars).

Installation

npm install signature_pad

Basic Usage

import SignaturePad from 'signature_pad';

const canvas = document.getElementById('signature');
const signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)',
  penColor: 'rgb(0, 0, 0)'
});

// Clear the signature
document.getElementById('clear').addEventListener('click', () => {
  signaturePad.clear();
});

// Check if signature is empty
if (signaturePad.isEmpty()) {
  alert('Please provide a signature');
}

// Get signature as data URL
const dataUrl = signaturePad.toDataURL();

// Get signature as PNG blob
signaturePad.toBlob((blob) => {
  // Upload blob to server
});

With Validation

When to Use

Use a signature pad when:

• Legal or regulatory requirements mandate a signature
• The document would traditionally require a wet signature
• You need to capture consent with a personal mark
• The signature will be included on a generated document

Don't use a signature pad when:

• A checkbox confirmation would suffice
• You only need to verify identity (use proper authentication)
• The user is on a device where signing is difficult

Accessibility

• Provide keyboard alternatives for users who cannot use a pointing device
• Allow users to type their name as an alternative
• Ensure the canvas has sufficient size for easy signing
• Provide clear instructions
• Make the clear button easily accessible

Mobile Considerations

• Increase canvas height on mobile for easier signing
• Prevent page scrolling while signing
• Support both touch and stylus input
• Consider landscape orientation for signing

Legal Considerations

CSS Classes

.signature-pad { }
.signature-pad-canvas { }
.signature-pad-actions { }
.signature-pad-error { }