Signing request
A React block (a whole screen) in Beamline's Government & legal app.
A document sent for signature, its signature page drawn in miniature with each side's block in order. Sides sign as numbered stages that move earlier or later (or all at once), and who can sign right now is said in words; nobody can sign a draft. Reassigning a signer after sending gives a new identity: the old link is shown revoked. Each side can get its own message; reminders and the external link's expiry are said back in one timing sentence, and after expiry only the external link closes, the document and internal signing untouched. A key date in the document (a renewal) carries reminders, each beside the date it falls on; moving the date recalculates only the unsent ones (before → after) and keeps sent ones as history, and a reminder is said not to be the deadline.
Use it for
- Sending an agreement, quote or letter for signature by several sides, in order or at once.
- Reminders tied to a date in a document, such as a renewal or a notice period.
Not for
- Drawing a signature (signature-pad).
- Reviewing a document's comments and approving it inside a team (document-review).
Anatomy
- header: the product's mark, Send for signature with the document's name, draft or sent
- who can sign now (or first, once sent); the external link closed; what just happened
- signing order: in order or at once; each side with its stage, inside or outside, status and one menu (Move earlier, Move later, Add a message); its signer as a person with Change (a menu of people); revoked links; its message as text that edits in place
- signature page: a miniature of the agreement's last page, one signature block per side in order with its stage, Sign here in the side's status tone or the signed name, and the side's status
- reminders and access: the timing sentence at rest; Edit opens how often, at what time and when the external link closes
- key dates: the date, the note that a reminder isn't the deadline, what moved, each reminder as words (opening its amount, unit and Remove) with the date it falls on, sent ones as history
- footer: what's missing, Send for signature
States
- draft (nobody can sign), sending, sent, refused (nothing went out)
- side: can sign now, waits for a stage, signed, link closed
- signer reassigned: swapped in a draft; old link revoked once sent
- no reminders; the link never closes; closed (only the external link)
- key date moved (unsent recalculated, sent kept); saving refused (the old date back)
- phone: one column
- right to left: mirrors
Keyboard
- Tab through the order switch, each side's Move earlier and later, its signer and message, the reminder fields, the expiry date, the key date and its reminders, then Send
Motion
None of its own.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
document (required) | string | — | The document's name ("Services Agreement v5"). |
people (required) | SigningPerson[] | — | |
sides (required) | SigningSide[] | — | |
options (required) | SigningOptions | — | |
milestone | Milestone | — | A date the document commits to, with reminders before it. |
sentAt | number | null | — | When the request went out (epoch ms); omitted while it's a draft. |
now | number | — | The clock (epoch ms), for expiry; now when omitted. |
onSend | ((request: { sides: SigningSide[]; options: SigningOptions; }) => Promise<void>) | — | Send the request; reject with the reason (nothing goes out, the settings stay). |
onMilestoneChange | ((milestone: Milestone) => Promise<void>) | — | Save a moved milestone or changed reminders; reject to put the old date back. |
product | string | — | |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- Avatar
- Bottom sheet
- Button
- Calendar
- Date picker
- Dropdown menu
- Inline edit
- Label
- Number field
- Popover
- Select
- Spinner
- Switch
- Time picker
Dependencies
lucide-react
Import
import { SigningRequest } from "@beamline/signing-request";Get it
Signing request is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Government & legal
- Permit application: A permit application filled in over several sittings on a city's portal. Steps with how many answers each still misses; the draft saved as you go and…
- Permit services: Where a permit starts on a city's permitting portal. The work's address resolved to the city (its permits are here) or the county around it (that office…
- Permit fees: An applicant's permit fees on a city's portal. What's owed across how many permits and how much of it is overdue; every unpaid invoice with its permit…
- Permit record: A submitted permit seen by the applicant. The overview leads with what's waiting on them: the corrections to answer before the next version goes in, each…
- Parcel record: A property's parcel on a permitting portal. The lot drawn to scale as a site plan: the street, the property lines with their lengths, the dashed setback…
- Document review: A PDF going through review: the document in the viewer with every comment pinned to its place, the reviewers' threads beside it (open or resolved, one…
- Playbook check: A document's changes checked against a versioned playbook (a rulebook of what's acceptable). Each change shows what it was and is now, then two records…
- Audit room: A compliance audit seen by the company preparing it or by the auditor reviewing it. Evidence keeps the company's readiness (not ready, flagged, ready for…
- Agency book: An insurance agency's book in two places. Estimated commission: the report named an estimate (not received or earned), as of a time; each source system…
- Applicant company: A contractor's company on a permitting portal. Its identity with the licence and insurance it applies under, each said valid, expiring within 60 days…
- Applicant projects: An applicant's permits on a city's portal in one place. Projects through saved views (theirs, their company's, expiring within 30 days) and a search…
- Lease renewals: Leases coming up for renewal. The window leads: every tracked lease placed on the days ahead at its end date, coloured by whose step it is (yours, the…
- Queue display: The screen in a waiting room, read from across the room. It draws only a public projection of the queue (ticket codes and counters, never a name or a…
- Visitor journey: A visitor's way into a walk-in queue, on their phone. Branches first: each card names its address, whether it's open (until when, closing soon, full, or…