> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-pen-signature.md).

# Input Pen (Signature)

The Avonni Pen Input is a drawing and signature pad that lets users sketch, annotate, or sign directly on screen. Use it to capture handwritten signatures, freehand drawings, or quick visual notes, with optional saving to a Salesforce Content Document.

## Overview

The Pen Input gives users a canvas to draw on with the mouse, trackpad, or touch screen. It ships with several pen modes — draw, paint, ink, and erase — and a built-in toolbar that lets users change the pen size, pick a stroke color, set a canvas background color, undo and redo, clear the canvas, and download the result.

You control the starting tool, size, and colors, decide where the toolbar sits and which buttons appear, and choose whether the component is read-only or required. When you enable saving, the drawing can be stored as a Salesforce Content Document — optionally linked to a record and saved automatically — so signatures and sketches become part of your Salesforce data.

**Why Use the Pen Input Component?**

* **Capture Signatures:** Collect handwritten signatures on agreements, approvals, and forms.
* **Freehand Drawing:** Let users sketch, annotate, or mark up content.
* **Salesforce Storage:** Save the drawing as a Content Document, optionally linked to a record.
* **Flexible Toolbar:** Show only the tools your use case needs.

## Configuration

To configure the Pen Input, select it on the canvas. The **Edit Pen Input** panel opens on the right. The sections below mirror the configuration panel.

### Properties

#### Label

The text shown above the pen canvas. Use it to tell the user what the drawing is for — for example, "Signature" or "Sketch your design."

#### Value

The serialized value representing the drawing content. Bind it to a variable or field to pre-load an existing drawing or to read back what the user has drawn.

#### Field Level Help

Optional helper text shown next to the label to give users extra guidance about what to draw.

#### Required

When enabled, the user must provide a drawing before the value is considered valid.

#### Message When Value Missing

The error message shown when **Required** is on and no drawing has been provided.

#### Disabled

When enabled, the component is shown but cannot be interacted with.

#### Read Only

When enabled, an existing drawing is displayed but the user cannot modify it.

### Pen Settings

#### Mode

The default tool mode used when the component loads. Options are **Draw** (default), **Paint**, **Ink**, and **Erase**. Users can switch between modes from the toolbar unless those buttons are hidden.

#### Size

The default pen size, in pixels. The default is **3**. Available sizes are 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 18, 24, 30, and 36.

#### Color

The default stroke color used to draw. Defaults to black (`#000000`).

#### Background Color

The canvas background color. Defaults to transparent (`#ffffff00`).

### Toolbar

#### Toolbar Position

Where the toolbar appears relative to the canvas. Choose **Bottom** (`bottom-toolbar`, default) or **Top** (`top-toolbar`).

#### Hide Controls

When enabled, the toolbar controls are hidden entirely. Use this for a clean, display-only canvas or when you want to lock the drawing tools.

#### Hidden Buttons

Hide individual toolbar buttons while keeping the rest of the toolbar visible. You can hide any of: **pen**, **paintbrush**, **ink**, **eraser**, **size**, **color**, **background**, **download**, **undo**, **redo**, and **clear**.

#### Show Signature Pad

When enabled, the canvas is presented as a signature pad, optimized for capturing a signature rather than freeform drawing.

### Saving

These settings control whether and how the drawing is stored as a Salesforce Content Document.

#### Save as Content Document

When enabled, the drawing can be saved as a Salesforce Content Document. Turning this on reveals the remaining save settings below.

The following settings are available only when **Save as Content Document** is enabled:

| Setting                               | Description                                                                                                |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Auto Save Content Document**        | Automatically save the drawing as a Content Document, without requiring the user to click the save button. |
| **Save As Button Label**              | The label of the save button. Defaults to **Save**.                                                        |
| **Content Document Title**            | The title used when creating the Content Document. Defaults to **Avonni Input Pen Document**.              |
| **Content Document Id**               | An existing Content Document Id to load or use when saving is enabled.                                     |
| **Content Document Linked Entity Id** | The record Id that the Content Document should be linked to.                                               |

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Pen Input. Configure them from the **Interactions** tab of the Edit Pen Input panel.

### Change

Fires when the user modifies the drawing on the canvas. Use this to read back the updated drawing value, store it in a variable, or trigger downstream flow logic whenever the canvas content changes.

### Save As Button Click

Fires when the user clicks the save button. Use this to trigger custom save logic, show a confirmation message, or chain additional actions after the drawing is saved.

## Styling

The **Style** tab gives you fine-grained control over the Pen Input's appearance. Configure it from the **Style** tab of the Edit Pen Input panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component, creating space between it and other elements on the page.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's border and its content.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions, including the drawing canvas height.

* **Width:** Set a fixed width for the component.
* **Min Width / Max Width:** Constrain the width within bounds.
* **Height:** Set the height of the drawing canvas.
  {% endtab %}

{% tab title="Label" %}
Styles the header (label) text shown above the canvas.

* **Color:** Set the label color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
  {% endtab %}
  {% endtabs %}

## Troubleshooting Common Issues

* **Can't Draw on the Canvas** — Confirm the component isn't set to **Read Only** or **Disabled**.
* **No Tools Showing** — Check that **Hide Controls** is off and that the tools you expect aren't listed under **Hidden Buttons**.
* **Strokes Are Invisible** — Make sure the **Color** isn't the same as the **Background Color** — for example, a white stroke on a white background.
* **Drawing Not Saved** — Saving only works when **Save as Content Document** is enabled. If you expect it to save without a button click, also enable **Auto Save Content Document**.
* **Document Not Linked to a Record** — Set the **Content Document Linked Entity Id** to the record Id you want the saved document attached to.
* **Required Drawing Not Enforced** — Enable **Required** and provide a **Message When Value Missing** so users see the error.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/input-pen-signature.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.