Signature — Fields | @saastro/forms

Hand-drawn signature pad

Demo not found for field: signature

 /**
 * Signature Field Demo
 */
import { Form, FormBuilder } from '@saastro/forms';
import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('signature-demo')
  .layout('manual')
  .columns(12)
  .addField('signature', (f) =>
    f
      .type('signature')
      .label('Sign here')
      .helperText('Draw your signature in the box')
      .prop('penColor', '#111827')
      .prop('height', 160)
      .columns({ default: 12 }),
  )
  .addStep('main', ['signature'])
  .build();

export default function SignatureDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-6" />
      </FormProvider>
    </TooltipProvider>
  );
} 

Overview

signature is a free-hand drawing surface on a native <canvas> (pointer events, DPR-aware) with a Clear button. Useful for consent and agreement flows.

Value

The submitted value is a PNG data URL string (valueKind: 'string'), e.g. "data:image/png;base64,…". It’s written on stroke end (pointer up); clearing resets it to ''.

Usage

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('agreement')
  .addField('signature', (f) =>
    f.type('signature').label('Sign here').prop('penColor', '#111827').prop('height', 160),
  )
  .addStep('main', ['signature'])
  .build();

penColor and height have no fluent method — set them with .prop().

Props

Prop	Type	Default	Description
`penColor`	`string`	`'#111827'`	Stroke color (any CSS color)
`height`	`number`	`160`	Canvas height in px

The “Clear signature” label comes from the i18n catalog (signatureClear). The pad themes via --border / --background / --muted-foreground.