Design language

Renders the preview in that framework’s own components and tokens. Clinical colours never change.

Preview

Every state, switchable.

Replayed from the stroke model

Not a video, and not a tween. Every segment appears at the millisecond its point was sampled at, so the pause before the surname is the one the signer actually took. The component stores points, time and pressure — the picture is derived, which is why it is still sharp at any size and still legible in dark mode.

Live · the real component

Draw, type, or upload. The Type tab is not a fallback — it is the mechanism that makes this operable without a pointer, which WCAG 2.1.1 requires at Level A. Try signing with the keyboard alone.

Stored as strokes, rendered as ink

Width as a function of pen speed, smoothed. Recomputed from the samples at any size, on any screen.

Why it exists

Almost every signature component solves one problem: get ink from a pointer onto a canvas and hand back a PNG.

That is about fifteen percent of what a healthcare product needs. The rest is everything the PNG does not say — who signed, in what capacity, what they were agreeing to, and, most often of all, what to record when nobody signed at all. A patient who refused and a form nobody opened are different facts with different consequences, and a component whose only states are empty and signed makes the difference unrecordable. That is the same argument AbsentValue makes one tier down, at a much higher stake.

Playground

Change a prop, watch it change.

8 PROPS / LIVE

Props

Meaning

Capture methods

drawtypeupload

Non-signed outcomes offered

Disabled

Validation status

errorwarning

Attestation text

Capture biometrics

Events

onChange — nothing yet

Variants

One component, and what each skin is for.

Every variant is the same accessibility contract and the same keyboard model. Pick by what the surface needs, not by what the code would be easier to write.

Draw

Pointer or stylus. The default on a tablet at the bedside.

methods=["draw"]

Type

A typed name rendered in a cursive face. The keyboard-reachable path, and never the only one offered.

methods=["type"]

Upload

An image of a wet signature, for a form that arrived on paper.

methods=["upload"]

All three

The house default. Every signer has a path that works for them.

methods=["draw","type","upload"]

Usage

Props are the FHIR resource.

Usagetsx

import { Form } from "antd";
import { Signature, signatureRequired } from "@zoblocks/signature";
import "@zoblocks/signature/styles.css";

// signatureRequired() accepts a decline as an answer. A rule demanding
// outcome === "signed" would make refusal impossible to submit.
<Form.Item name="consent" label="Patient signature" rules={[signatureRequired()]}>
  <Signature
    now={serverTime}
    meaning="consent"
    attestation="I have read the information about this procedure, I have had the chance to ask questions, and I agree to go ahead."
    subject={{ display: "Randall, Josh", reference: "Patient/4471902" }}
    recordedBy={{ name: "A. Okafor", credential: "RN" }}
    outcomes={["declined", "unable", "verbal", "on-paper"]}
  />
</Form.Item>;

Dependencies

antd
@zoblocks/signature-core

22 props

nowreq

string

ISO 8601 from the server. The component never reads the clock.

attestation

React.ReactNode

The sentence the signer is agreeing to, shown above the control. Required for `meaning="attestation"`; a signature over unstated words is not an attestation.

capacities

Capacity[]

The capacities this signer may sign in — clinician, patient, guardian, interpreter. Offered as a choice when there is more than one, because the capacity changes what the signature means.

captureBiometrics

boolean

Record stroke timing and pressure alongside the image. Off by default: it is additional personal data and most workflows do not need it.

className

string

Applied to the outer element.

defaultValue

SignatureValue

The starting signature, uncontrolled. Use for a form re-opened on an existing record.

disabled

boolean

Blocks every path including the refusals. Rarely right — if the form is not signable yet, say why rather than removing the ability to decline.

documentHash

string

A hash of exactly what was signed. Without it the signature attests to a document nobody can later identify.

id

string

Supplied by `Form.Item`. Attached to the trigger so the label resolves.

locale

Partial<SignatureLocale>

Overrides for every generated string, including the seven outcome names. Supply it for any language that is not English.

Page 1 of 3

Examples

The cases worth copying.

DatapatientRoutinepractitionerSignerpractitionerWitnessconsentTreatmentconsentDeclinedprovenanceConsent

Consent inside an antd Form

patientRoutine

The common case. `signatureRequired()` treats a decline as a valid answer — a rule demanding outcome === "signed" would make refusal impossible to submit.

Consent inside an antd Formtsx

import { Form } from "antd";
import { Signature, signatureRequired } from "@zoblocks/signature";
import "@zoblocks/signature/styles.css";

<Form.Item name="consent" rules={[signatureRequired()]}>
  <Signature
    now={serverTime}
    meaning="consent"
    attestation="I agree to the treatment described above."
  />
</Form.Item>;

The patient who refused to sign

consentDeclined

Seven outcomes, not two. A refusal and an unopened form are different clinical facts, and the union makes it impossible to record them the same way.

The patient who refused to signtsx

// The value is a discriminated union, so this compiles only if every
// outcome is handled — including the three that are not "signed".
switch (value.outcome) {
  case "signed":   return file(value.image, value.signedAt);
  case "declined": return recordRefusal(value.reason, value.recordedAt);
  case "unable":   return recordUnable(value.reason, value.witness); // witness is required
  case "verbal":   return recordVerbal(value.witness);
  case "on-paper": return awaitScan();
  case "pending":  return null;
  case "revoked":  return revoke(value.revokedAt);
}

What it emits, and why it is not a Consent

provenanceConsent

Consent carries no signature element in R4 or R5 — only Provenance.signature does. The component emits a transaction Bundle so the two land together or not at all.

What it emits, and why it is not a Consenttsx

import { toFhirBundle } from "@zoblocks/signature";
import { patientRoutine } from "@zoblocks/fixtures";

// A transaction Bundle: the Consent and the Provenance that signs it, posted
// together or not at all. Emitting the Consent alone would store an agreement
// with nothing proving anyone made it.
const bundle = toFhirBundle(value, {
  release: "R4",
  subject: {
    display: "Amara Okonkwo",
    reference: `Patient/${patientRoutine.id}`,
  },
});

// bundle.entry[0] → POST Consent
// bundle.entry[1] → POST Provenance, carrying Provenance.signature

// The signer travels on the value, not in these options: who signed is part of
// what was captured, and re-supplying it here would let the two disagree.

Clinical

Where it sits in the record.

Consent, attestation and clinical sign-off. The value is a discriminated union over seven outcomes rather than string | null, because a patient who refused to sign and a form nobody opened are different facts with different consequences — and only one of them is a reason to stop.

Industries: healthcare, behavioral-health
Workflows: intake, documentation, treatment-planning
Terminology: FHIR, SNOMED CT
Permissions: provenance.write, consent.write
Audit: Emits AuditEvent

Captures a signature image, the signer's name and role, and a server-supplied timestamp — all PHI. The stroke buffer never leaves the browser except in the emitted Bundle, and `now` is a required prop rather than a Date.now() call so the recorded time is the server's and is testable.

Conformance

Every claim, and the test behind it.

WCAG 2.2 AA / 7 OF 8 PASS

Criterion	Status	How	Evidence
2.1.1Keyboard	pass	One test signs the whole form using tab() and keyboard() only, never dispatching a pointer event. A draw-only pad is a lint error.	Signature.test.tsx
4.1.2Name, role, value	pass	The pad is a labelled control with its current outcome in the accessible name, not a bare canvas.	Signature.test.tsx
3.3.1Error identification	pass	signatureRequired() accepts a decline as a valid answer, so refusing is submittable rather than an error state.	Signature.test.tsx
3.3.2Labels or instructions	pass	The attestation is rendered above the pad and is part of the control's accessible description.	Signature.test.tsx
1.4.11Non-text contrast	pass	Pad border, baseline and focus ring are gated in the token build across three themes.	contrast.gate
2.5.8Target size	pass	Every method control and the clear affordance hold a 24px minimum.	e2e/docs-site.spec.ts
2.4.11Focus not obscured	pass	The signing dialog returns focus to the invoking control and never leaves it behind the sticky footer.	e2e/docs-site.spec.ts
2.2.1Timing adjustable	n/a	No session timeout is imposed by the component.	—

Use clinical-note instead when you need the whole note signed rather than a single attestation.
Use Switch instead when the answer is a yes/no acknowledgement with no legal weight.

Signature

Every state, switchable.

Almost every signature component solves one problem: get ink from a pointer onto a canvas and hand back a PNG.

Change a prop, watch it change.

One component, and what each skin is for.

Draw

Type

Upload

All three

Props are the FHIR resource.

Dependencies

The cases worth copying.

Consent inside an antd Form

The patient who refused to sign

What it emits, and why it is not a Consent

Where it sits in the record.

Handles PHI

Every claim, and the test behind it.

Pairs well with.