Signature

Signature provides a digital signature capture interface with drawing and typing modes.

Import​

<script>
  import { Signature } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let signature = $state(null);
</script>

<Signature bind:value={signature} />

Props​

Prop	Type	Default	Description
value	SignatureData | null	null	Signature data (bindable)
onValueChange	(data: SignatureData | null) => void	-	Called when the signature changes
onComplete	(data: SignatureData) => void	-	Called when the signature passes validation
mode	'draw' | 'type'	'draw'	Initial capture mode
showModeToggle	boolean	true	Show the draw/type toggle
typedName	string	''	Initial typed name in type mode
strokeColor	string	'#000000'	Drawing stroke color
strokeWidth	number	2	Drawing stroke width in pixels
minStrokeWidth	number	1	Minimum stroke width (pressure)
maxStrokeWidth	number	5	Maximum stroke width (pressure)
showStrokeCustomization	boolean	true	Show stroke color and width controls
fonts	SignatureFont[]	built-in set	Available fonts for type mode
selectedFont	string	-	Initially selected font family
outputFormat	'png' | 'svg' | 'dataUrl'	'dataUrl'	Preferred output format
imageQuality	number	0.92	PNG/image quality (0-1)
backgroundColor	'transparent' | 'white'	'white'	Background of the exported image
minStrokePoints	number	10	Minimum stroke points required (draw mode)
minStrokeLength	number	50	Minimum stroke length in pixels (draw mode)
minTypedLength	number	2	Minimum characters for a typed signature
validate	(data: SignatureData) => SignatureValidationResult	-	Custom validation function
showConsent	boolean	true	Show the consent checkbox
consentText	string	legal consent text	Consent checkbox text
requireConsent	boolean	true	Require consent before the signature is complete
consented	boolean	false	Consent state (bindable)
onConsentChange	(consented: boolean) => void	-	Called when consent changes
disabled	boolean	false	Disables capture
required	boolean	false	Marks as required
label	string	-	Label text
hint	string	-	Hint text
error	string	-	Error message
name	string	-	Name attribute for form submission
id	string	-	Input ID
height	string	'200px'	Canvas height (CSS value)
class	string	-	Additional classes

Draw Mode​

Capture signature by drawing:

<Signature bind:value={signature} mode="draw" />

Type Mode​

Capture signature by typing:

<Signature bind:value={signature} mode="type" />

Mode Selection​

The draw/type toggle is shown by default. Hide it to lock one mode:

<Signature bind:value mode="type" showModeToggle={false} />

Custom Styling​

Customize the drawing appearance:

<Signature bind:value strokeColor="#0066cc" strokeWidth={3} />

Validation​

<Signature bind:value required error={!signature ? 'Signature is required' : ''} />

Examples​

Agreement Form​

<script>
  let signature = $state(null);

  function handleSubmit() {
    if (!signature) {
      // Handle missing signature
      return;
    }
    // Submit form with signature
  }
</script>

<div class="space-y-4">
  <p class="text-sm text-muted-foreground">
    By signing below, you agree to the terms and conditions.
  </p>
  <Signature label="Your Signature" bind:value={signature} required />
  <Button onclick={handleSubmit} disabled={!signature}>Submit Agreement</Button>
</div>

Clear and Retry​

<div class="space-y-4">
  <Signature bind:value={signature} />
  <Button variant="outline" onclick={() => (signature = null)} disabled={!signature}>
    Clear Signature
  </Button>
</div>

Data Format​

The signature data includes:

interface SignatureData {
  strokes: SignatureStroke[]; // For draw mode
  text?: string; // For type mode
  font?: string; // For type mode
  metadata: SignatureMetadata;
}

interface SignatureMetadata {
  timestamp: number;
  mode: 'draw' | 'type';
}

Accessibility​

• Keyboard accessible controls
• Clear button support
• Screen reader instructions

Related Components​

• Input - Text input
• Button - Clear/submit actions