Sign and Agree

ProNew

A document acknowledgement: the signer draws or types a signature, confirms with a checkbox that it is legally theirs, and Sign stays disabled until both are done; clearing removes the signature and the date is recorded. Use this when an agreement needs an acknowledged signature.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

documentName

Guide and examples

When to use it

A person acknowledges terms, a waiver or a delivery with a signature.

Do not use it when: A drawn signature is a convenience, not a qualified electronic signature. Check the legal requirement for your use.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`documentName`	`string`	Shown as the heading and in the confirmation.
`onSign`	`(signature, signedAt) => void \| Promise<void>`	The signature (strokes or typed text) and an ISO timestamp.

isSigned(value) is exported.

Accessibility

The signature is the Signature Pad component: draw with a pointer or switch to Type and enter the name with the keyboard, so signing never needs a mouse.
The consent is a labelled checkbox; the Sign button is disabled with the reason written under it and linked with aria-describedby.
After signing the form is replaced by a polite status with the date in a readable format.

Testing

The pattern ships with a Testing Library test (signature-agreement-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.