x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COMPONENT NAME:</strong> Signature Pad<br> <strong>PARTS:</strong> .signature-pad | .signature-pad-surface | .signature-pad-canvas | .signature-pad-hint | .signature-pad-baseline | .signature-pad-actions | .is-drawn </p> <p class="tw:mb-0 tw:text-sm"> An <strong>optional</strong> drawing surface under a <strong>required</strong> 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 <code>.form-field</code>. </p> </div> <!-- Default --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Default</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default:</strong> type the name, or draw it. Drawing hides the hint and the baseline (<code>.is-drawn</code>) and writes a PNG data URL into the hidden input. <strong>Clear</strong> is a real <code>.btn.btn-secondary.btn-sm</code> — never a bare icon, because emptying a signature someone just drew is not a thing to guess at. </p> </div> <div class="tw:max-w-lg"> <div class="form-field"> <label class="form-label form-label-required" for="sig-name">Confirm this enquiry</label> <p class="form-text tw:mb-2">Type your full name. You can draw it instead if you prefer.</p> <input type="text" class="form-control" id="sig-name" name="enquiry[signed_name]" aria-required="true" aria-describedby="sig-help" required> <p class="form-text" id="sig-help">This is not a legal signature; it confirms you sent the enquiry.</p> <div class="signature-pad tw:mt-3" 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 pointercancel->signature-pad#end pointerleave->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 type="button" class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button> <span class="form-text">Optional. The typed name above is enough.</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="signature-pad" data-controller="signature-pad" data-action="resize@window->signature-pad#resize"></code><br> <code> <div class="signature-pad-surface" data-signature-pad-target="surface"</code><br> <code> data-action="pointerdown->signature-pad#start pointermove->signature-pad#draw pointerup->signature-pad#end …"></code><br> <code> <canvas class="signature-pad-canvas" data-signature-pad-target="canvas" aria-hidden="true"></canvas></code><br> <code> <span class="signature-pad-hint">Draw your signature here</span></code><br> <code> <span class="signature-pad-baseline"></span></code><br> <code> </div></code><br> <code> <input type="hidden" name="enquiry[signature]" data-signature-pad-target="value"></code><br> <code> <div class="signature-pad-actions"><button class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button>…</div></code><br> <code></div></code> </div> </div> <!-- Invalid --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Required, and not answered</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>The pad is tinted BY the wrapper, never marked itself.</strong> The typed name is the control that failed: it carries <code>aria-invalid="true"</code> and points at the message. Note the wrapper is a <code><div></code> with a <code><label for></code>, not a <code><fieldset></code> with a <code><legend></code> — a legend names a <em>group</em>, and with one real control in it the control itself is left unnamed (axe <code>label</code>, 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 <code>.is-invalid</code>, and there is never a second error message inside it. </p> </div> <div class="tw:max-w-lg"> <div class="form-field is-invalid"> <label class="form-label form-label-required" for="sig-name-invalid">Confirm this enquiry</label> <p class="form-text tw:mb-2">Type your full name. You can draw it instead if you prefer.</p> <input type="text" class="form-control" id="sig-name-invalid" name="enquiry[signed_name]" aria-required="true" aria-invalid="true" aria-describedby="sig-help-invalid sig-error" required> <p class="form-text" id="sig-help-invalid">This is not a legal signature; it confirms you sent the enquiry.</p> <p class="invalid-feedback" id="sig-error">Type your full name to confirm</p> <div class="signature-pad tw:mt-3" 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 pointercancel->signature-pad#end pointerleave->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 type="button" class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button> <span class="form-text">Optional. The typed name above is enough.</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="form-field is-invalid"></code> … the pad inside keeps no state class of its own </div> </div> <!-- Typed only --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Typed name alone</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>A signature question without the pad is still a signature question.</strong> 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. </p> </div> <div class="tw:max-w-lg"> <div class="form-field"> <label class="form-label form-label-required" for="sig-typed">Confirm this enquiry</label> <input type="text" class="form-control" id="sig-typed" name="enquiry[signed_name]" aria-required="true" aria-describedby="sig-typed-help" required> <p class="form-text" id="sig-typed-help">This is not a legal signature; it confirms you sent the enquiry.</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="form-field"><label class="form-label form-label-required" for="sig-typed">…</label><input class="form-control" required></div></code> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COMPONENT NAME:</strong> Signature Pad<br> <strong>PARTS:</strong> .signature-pad | .signature-pad-surface | .signature-pad-canvas | .signature-pad-hint | .signature-pad-baseline | .signature-pad-actions | .is-drawn </p> <p class="tw:mb-0 tw:text-sm"> An <strong>optional</strong> drawing surface under a <strong>required</strong> 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 <code>.form-field</code>. </p> </div> <!-- Default --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Default</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default:</strong> type the name, or draw it. Drawing hides the hint and the baseline (<code>.is-drawn</code>) and writes a PNG data URL into the hidden input. <strong>Clear</strong> is a real <code>.btn.btn-secondary.btn-sm</code> — never a bare icon, because emptying a signature someone just drew is not a thing to guess at. </p> </div> <div class="tw:max-w-lg"> <div class="form-field"> <label class="form-label form-label-required" for="sig-name">Confirm this enquiry</label> <p class="form-text tw:mb-2">Type your full name. You can draw it instead if you prefer.</p> <input type="text" class="form-control" id="sig-name" name="enquiry[signed_name]" aria-required="true" aria-describedby="sig-help" required> <p class="form-text" id="sig-help">This is not a legal signature; it confirms you sent the enquiry.</p> <div class="signature-pad tw:mt-3" 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 pointercancel->signature-pad#end pointerleave->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 type="button" class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button> <span class="form-text">Optional. The typed name above is enough.</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="signature-pad" data-controller="signature-pad" data-action="resize@window->signature-pad#resize"></code><br> <code> <div class="signature-pad-surface" data-signature-pad-target="surface"</code><br> <code> data-action="pointerdown->signature-pad#start pointermove->signature-pad#draw pointerup->signature-pad#end …"></code><br> <code> <canvas class="signature-pad-canvas" data-signature-pad-target="canvas" aria-hidden="true"></canvas></code><br> <code> <span class="signature-pad-hint">Draw your signature here</span></code><br> <code> <span class="signature-pad-baseline"></span></code><br> <code> </div></code><br> <code> <input type="hidden" name="enquiry[signature]" data-signature-pad-target="value"></code><br> <code> <div class="signature-pad-actions"><button class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button>…</div></code><br> <code></div></code> </div> </div> <!-- Invalid --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Required, and not answered</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>The pad is tinted BY the wrapper, never marked itself.</strong> The typed name is the control that failed: it carries <code>aria-invalid="true"</code> and points at the message. Note the wrapper is a <code><div></code> with a <code><label for></code>, not a <code><fieldset></code> with a <code><legend></code> — a legend names a <em>group</em>, and with one real control in it the control itself is left unnamed (axe <code>label</code>, 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 <code>.is-invalid</code>, and there is never a second error message inside it. </p> </div> <div class="tw:max-w-lg"> <div class="form-field is-invalid"> <label class="form-label form-label-required" for="sig-name-invalid">Confirm this enquiry</label> <p class="form-text tw:mb-2">Type your full name. You can draw it instead if you prefer.</p> <input type="text" class="form-control" id="sig-name-invalid" name="enquiry[signed_name]" aria-required="true" aria-invalid="true" aria-describedby="sig-help-invalid sig-error" required> <p class="form-text" id="sig-help-invalid">This is not a legal signature; it confirms you sent the enquiry.</p> <p class="invalid-feedback" id="sig-error">Type your full name to confirm</p> <div class="signature-pad tw:mt-3" 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 pointercancel->signature-pad#end pointerleave->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 type="button" class="btn btn-secondary btn-sm" data-action="signature-pad#clear">Clear</button> <span class="form-text">Optional. The typed name above is enough.</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="form-field is-invalid"></code> … the pad inside keeps no state class of its own </div> </div> <!-- Typed only --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Typed name alone</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>A signature question without the pad is still a signature question.</strong> 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. </p> </div> <div class="tw:max-w-lg"> <div class="form-field"> <label class="form-label form-label-required" for="sig-typed">Confirm this enquiry</label> <input type="text" class="form-control" id="sig-typed" name="enquiry[signed_name]" aria-required="true" aria-describedby="sig-typed-help" required> <p class="form-text" id="sig-typed-help">This is not a legal signature; it confirms you sent the enquiry.</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="form-field"><label class="form-label form-label-required" for="sig-typed">…</label><input class="form-control" required></div></code> </div> </div></div>No notes provided.
No params configured.