# Field: Signature (category: special)

URL: https://docs.forms.saastro.io/docs/signature

<FieldPreview name="signature" description="Hand-drawn signature pad" />

## 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

```tsx

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`.