---
title: Add Fields
description: Place signature, text, date, and other fields on your document.
---

import { Callout } from 'fumadocs-ui/components/callout';
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

## Overview

Fields are placeholders that recipients fill in when signing your document. You drag fields from the palette onto your document, position them where you want information collected, and assign them to specific recipients.

![Document fields panel showing available field types](/document-signing/documenso-document-fields.webp)

## Add a Field to Your Document

{/* prettier-ignore */}
<Steps>
<Step>
### Select a recipient

In the document editor, select the recipient you want to assign fields to from the recipient list in the sidebar. The selected recipient's color highlights which fields belong to them.

</Step>

<Step>
### Drag a field onto the document

Click and drag a field type from the field palette onto your document. Available field types include:

<Tabs
  items={[
    'Signature',
    'Initials',
    'Name',
    'Email',
    'Date',
    'Text',
    'Number',
    'Checkbox',
    'Radio',
    'Dropdown',
  ]}
>
  <Tab value="Signature">Captures the recipient's legally binding signature</Tab>
  <Tab value="Initials">Abbreviated signature for acknowledging pages or clauses</Tab>
  <Tab value="Name">Recipient's full name (auto-filled when available)</Tab>
  <Tab value="Email">Recipient's email address (auto-filled)</Tab>
  <Tab value="Date">Date the field was completed (auto-filled)</Tab>
  <Tab value="Text">Free-form text input</Tab>
  <Tab value="Number">Numeric input with optional validation</Tab>
  <Tab value="Checkbox">Multiple selections from options</Tab>
  <Tab value="Radio">Single selection from options</Tab>
  <Tab value="Dropdown">Single selection from a menu</Tab>
</Tabs>

</Step>

<Step>
### Position the field

Drop the field where you want it on the document. You can drag it to reposition after placing.

</Step>
</Steps>

<Callout type="info">
  Each signer must have at least one Signature field assigned to them. The document cannot be sent
  without this.
</Callout>

## Assign Fields to Recipients

Fields are color-coded by recipient. To change which recipient a field belongs to:

{/* prettier-ignore */}
<Steps>
  <Step>
    ### Select the field

    Click on the field to select it.

  </Step>
  <Step>
    ### Change the recipient

    In the field properties panel, change the **Recipient** dropdown.

  </Step>
  <Step>
    ### Confirm the assignment

    The field color updates to match the new recipient.

  </Step>
</Steps>

When you have multiple recipients, make sure each one has the appropriate fields assigned:

- **Signers** need at least one Signature field
- **Approvers** can have fields but don't require them
- **Viewers** cannot have fields assigned
- **Assistants** can pre-fill fields for other recipients

## Position and Resize Fields

### Moving Fields

Click and drag any field to reposition it on the document. Fields snap to help with alignment.

### Resizing Fields

Click a field to select it, then drag the corner handles to resize. This is useful for:

- Making signature fields larger for handwritten signatures
- Expanding text fields to accommodate longer input
- Fitting fields into existing form areas on your PDF

### Multi-Page Documents

Navigate between pages using the page controls. Fields placed on a page stay on that page. You can place fields on any page of your document.

## Configure Field Properties

Click on any field to open its properties panel. Available options vary by field type.

### Common Properties

| Property  | Description                                                   |
| --------- | ------------------------------------------------------------- |
| Required  | Recipient must complete this field to finish signing          |
| Read-only | Lock the field with a pre-filled value that cannot be changed |
| Label     | Text displayed above the field                                |
| Font size | Size of text in the field (8-96px)                            |

### Text Field Properties

| Property        | Description                                |
| --------------- | ------------------------------------------ |
| Placeholder     | Hint text shown when the field is empty    |
| Default value   | Pre-filled text that recipients can modify |
| Character limit | Maximum characters allowed                 |
| Text alignment  | Left, center, or right                     |

### Number Field Properties

| Property      | Description                   |
| ------------- | ----------------------------- |
| Minimum value | Lowest allowed number         |
| Maximum value | Highest allowed number        |
| Number format | Display format for the number |

### Selection Field Properties (Checkbox, Radio, Dropdown)

| Property          | Description                                         |
| ----------------- | --------------------------------------------------- |
| Options           | List of selectable values                           |
| Default selection | Pre-selected option(s)                              |
| Direction         | Vertical or horizontal layout (Checkbox/Radio only) |

![Dropdown field in the document editor](/document-signing/dropdown-field-document-editor-view.webp)

For detailed information on all field types, see [Field Types](/docs/concepts/field-types).

## Common Field Patterns

### Signature Block

A typical signature block includes the following fields:

1. **Signature**: Where the recipient signs
2. **Name**: Prints their full name below
3. **Date**: Records when they signed

![Signature field in the document editor](/document-signing/signature-field-document-editor-view.webp)

Place these fields together at the bottom of your document or wherever signature lines appear.

### Terms Acceptance

For documents requiring explicit agreement to terms:

{/* prettier-ignore */}
<Steps>
  <Step>
    ### Add a Checkbox field

    Add a **Checkbox** field with options like "I agree to the terms and conditions".

  </Step>
  <Step>
    ### Mark as required

    Mark the field as **Required**.

  </Step>
  <Step>
    ### Place near the terms

    Place it near the terms text.

  </Step>
</Steps>

### Information Collection

When gathering additional information from signers:

{/* prettier-ignore */}
<Steps>
  <Step>
    ### Add Text fields

    Add **Text** fields for addresses, job titles, or company names.

  </Step>
  <Step>
    ### Add Number fields

    Use **Number** fields for quantities, IDs, or phone numbers.

  </Step>
  <Step>
    ### Add Dropdown fields

    Use **Dropdown** fields for selections like country or department.

  </Step>
  <Step>
    ### Set placeholders

    Set **Placeholder** text to guide what information you need.

  </Step>
</Steps>

### Multiple Signers

When you have multiple people signing the same document:

{/* prettier-ignore */}
<Steps>
  <Step>
    ### Create signature blocks per signer

    Create separate signature blocks for each signer.

  </Step>
  <Step>
    ### Assign fields to recipients

    Assign each block's fields to the correct recipient.

  </Step>
  <Step>
    ### Verify with color coding

    Use the recipient color coding to verify assignments.

  </Step>
  <Step>
    ### Optional: enable signing order

    Consider enabling signing order if signers should sign in sequence.

  </Step>
</Steps>

## Edit or Delete Fields

<Tabs items={['Edit', 'Delete', 'Duplicate']}>
<Tab value="Edit">

Click on any field to select it and open its properties panel. Make your changes and they save automatically.

</Tab>
<Tab value="Delete">

Select the field and press **Delete** or **Backspace** on your keyboard. Alternatively, click the delete icon in the field properties panel.

</Tab>
<Tab value="Duplicate">

Select a field and copy it (**Ctrl+C** or **Cmd+C**), then paste (**Ctrl+V** or **Cmd+V**) to create a duplicate. This is useful when you need multiple similar fields.

</Tab>
</Tabs>

---

## See Also

- [Send Documents](/docs/users/documents/send) - Send for signing and start collecting signatures
- [Create Templates](/docs/users/templates/create) - Save this field layout as a reusable template
- [Field Types](/docs/concepts/field-types) - Detailed configuration options for all field types
