COMPONENT NAME: Signature Pad
PARTS: .signature-pad | .signature-pad-surface | .signature-pad-canvas | .signature-pad-hint | .signature-pad-baseline | .signature-pad-actions | .is-drawn
An optional drawing surface under a required typed name. A drawn
signature cannot be produced by a keyboard-only user, or by many people with motor impairments, so
the typed input is what the question asks for and the pad is an extra. The pad has no validity of
its own: state lives once, on the wrapping .form-field.
Default: type the name, or draw it. Drawing hides the hint and the baseline
(.is-drawn) and writes a PNG data URL into the hidden input. Clear is
a real .btn.btn-secondary.btn-sm — never a bare icon, because emptying a signature
someone just drew is not a thing to guess at.
Type your full name. You can draw it instead if you prefer.
This is not a legal signature; it confirms you sent the enquiry.
<div class="signature-pad" data-controller="signature-pad" data-action="resize@window->signature-pad#resize"> <div class="signature-pad-surface" data-signature-pad-target="surface" data-action="pointerdown->signature-pad#start pointermove->signature-pad#draw pointerup->signature-pad#end …"> <canvas class="signature-pad-canvas" data-signature-pad-target="canvas" aria-hidden="true"></canvas> <span class="signature-pad-hint">Draw your signature here</span> <span class="signature-pad-baseline"></span> </div> <input type="hidden" name="enquiry[signature]" data-signature-pad-target="value"> <div class="signature-pad-actions"><button class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button>…</div></div>
The pad is tinted BY the wrapper, never marked itself. The typed name is the
control that failed: it carries aria-invalid="true" and points at the message.
Note the wrapper is a <div> with a <label for>, not a
<fieldset> with a <legend> — a legend names a
group, and with one real control in it the control itself is left unnamed (axe
label, critical; caught in the sweep).
Drawing a signature does not satisfy the question, and the pad never reports a validity of its
own — so it never gets .is-invalid, and there is never a second error message inside
it.
Type your full name. You can draw it instead if you prefer.
This is not a legal signature; it confirms you sent the enquiry.
Type your full name to confirm
<div class="form-field is-invalid"> … the pad inside keeps no state class of its own
A signature question without the pad is still a signature question. Because the typed input is the required control, a consumer can ship this on its own — no canvas, no controller — and add the pad later without the question changing.
This is not a legal signature; it confirms you sent the enquiry.
<div class="form-field"><label class="form-label form-label-required" for="sig-typed">…</label><input class="form-control" required></div>