SignaturePad

Draw a signature on canvas

A drawn signature, for a delivery receipt, a consent form, a sign-off. It can only be drawn with a pointer, so always offer another way: a typed full name, or a checkbox that says the same thing.

Basic

Sign above

Or type your full name

Counts the same as a signature

<script setup lang="ts">
import { ref } from "vue";
import { BlessField, BlessInput, BlessSignaturePad } from "blessing-ui";
const sig = ref("");
const typed = ref("");
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessSignaturePad v-model="sig" :height="140" />
    <!-- a pointer-only control always has another way: the same consent, typed -->
    <BlessField label="Or type your full name" description="Counts the same as a signature">
      <BlessInput v-model="typed" autocomplete="name" />
    </BlessField>
    <div v-if="sig" class="row">
      <small>exported:</small>
      <img
        :src="sig"
        alt="signature preview"
        style="height: 48px; border: 1px solid var(--bless-color-border)"
      />
    </div>
  </div>
</template>

• v-model is a data URL of the drawing (type sets PNG, JPEG or WebP), empty while blank. @end fires after each stroke.
• The drawing survives a resize (a phone turning, a sidebar opening). Clear with the button, the Delete key, or ref.clear().
• Strokes take the text colour unless color is set. hint and clearLabel set the copy.

Usage

import { BlessSignaturePad } from "blessing-ui";

API

Props

Name	Type	Default	Description
height	number	160
lineWidth	number	2
color	string	—
label	string	"Signature"
clearLabel	string	"Clear"
hint	string	"Sign above"	shown under an empty pad
disabled	boolean	—
type	"image/png" | "image/jpeg" | "image/webp"	"image/png"	export format
modelValue	string	""	data URL of the drawing; empty when blank

Events

Name	Payload	Description
update:modelValue	[value: string]
end	[dataUrl: string]

Slots

Name	Scope	Description
actions	{ clear: () => void; empty: boolean; }

Exposed

Name	Type	Description
clear	() => void
isEmpty	() => boolean