# Signature

A party's signing block, with the rule the seal measures a signature field from.

Canonical URL: https://docs.asterdoc.com/components/signature/

`Signature` draws one signing field for one party: the role label, the
signing requirement, and the party's own name, all read from the artifact.
The rule beneath them is not decoration — it is the exact placeholder the
core seal flow locates and measures a field from, so restyling it with a
border instead of the printed underscores would give the seal nothing to
find.

## Preview


```tsx
import { Document } from "@/components/asterdoc/document";
import { Signature } from "@/components/asterdoc/signature";
import { proposalForm } from "@/examples/proposal";
import { shortProposalData } from "@/examples/proposal-data";

export function SignatureDemo() {
  return (
    <Document artifact={proposalForm} data={shortProposalData} id="signature-demo">
      <Signature party="provider" />
    </Document>
  );
}
```


## Installation


```bash
npx shadcn@4 add @asterdoc/signature
```


```bash
asterdoc add signature
```


Installs to components/asterdoc/signature.tsx.


## Usage


```tsx
import { Signature } from "@/components/asterdoc/signature";

<Signature party="provider" />
```

| Prop | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `party` | `string` | No |  | Party role declared by the artifact, such as `provider`. |
| `index` | `number` | Yes | 0 | 0-based index for a role that admits several parties. |
| `type` | `SigningMarkType` | Yes | "signature" | Which signing field this block draws. |
| `id` | `string` | Yes | "<type>:<role>", or "<type>:<role>:<index>" after the first | Stable keep id. |
| `className` | `string` | Yes |  | Application-owned classes replacing the block's default column layout. |
| `dateLabel` | `string` | Yes | "Date" | Caption under the date rule. |
| `requiredLabel` | `string` | Yes | "required" | Suffix shown for required signing fields. |
| `fieldLabel` | `string` | Yes |  | Overrides the field-type caption from the artifact binding. |


## Composition

`Signature` needs the same `Document` context every other component here
does: `party` names a role the artifact declares, and the role's label and
the party's own serialized name both come from it. It is a `Keep Together`,
so it is never split across a page break.

A `Signature` block draws one field for one party — one signature or one set
of initials, named by `type`. A party who signs and initials the same
document is two blocks, `type="signature"` and `type="initials"`, each
finding its own marker by the party and that type. `Signature` usually sits
inside a closing [`Section`](/components/section) alongside the other
party's own block, the way a purchase order's "Acceptance" section places
both signers side by side.

Because the rule is text a reader can see rather than a border, the sealed
document and the plain preview are the same page: nothing about signing
changes what the composition renders, only what a signing pass adds beside
it.

Every size in the block, the role label, the party's name, the rules and their
captions, follows the document's [typography](/components/typography) token.

## Variants

### Signature

The default `type`, for the proposal's other party.


```tsx
import { Document } from "@/components/asterdoc/document";
import { Signature } from "@/components/asterdoc/signature";
import { proposalForm } from "@/examples/proposal";
import { shortProposalData } from "@/examples/proposal-data";

export function SignatureVariantSignature() {
  return (
    <Document artifact={proposalForm} data={shortProposalData} id="signature-variant-signature">
      <Signature party="customer" />
    </Document>
  );
}
```


### Initials

`type="initials"` draws the shorter initials rule instead of a full
signature.


```tsx
import { Document } from "@/components/asterdoc/document";
import { Signature } from "@/components/asterdoc/signature";
import { proposalForm } from "@/examples/proposal";
import { shortProposalData } from "@/examples/proposal-data";

export function SignatureVariantInitials() {
  return (
    <Document artifact={proposalForm} data={shortProposalData} id="signature-variant-initials">
      <Signature party="provider" type="initials" />
    </Document>
  );
}
```


### Custom id

`id` overrides the default `<type>:<role>` keep id, or
`<type>:<role>:<index>` after the first.


```tsx
import { Document } from "@/components/asterdoc/document";
import { Signature } from "@/components/asterdoc/signature";
import { proposalForm } from "@/examples/proposal";
import { shortProposalData } from "@/examples/proposal-data";

export function SignatureVariantCustomId() {
  return (
    <Document artifact={proposalForm} data={shortProposalData} id="signature-variant-custom-id">
      <Signature party="provider" id="provider-acceptance" />
    </Document>
  );
}
```