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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>CONSENT BLOCK:</strong> Tinted container for privacy/consent copy + required checkbox<br> <strong>COMPOSES:</strong> .collapsible-content (collapsible_controller.js) | .form-check .form-check-lg | .form-label-required | .invalid-feedback idiom </p> <p class="tw:mb-0 tw:text-sm"> Pairs a short consent summary with an expandable full-policy detail and a required consent checkbox. Use wherever a parent or applicant must actively agree to a privacy notice, data-sharing statement, or terms before submitting a form. No new Stimulus controller — the expand/collapse toggle reuses <code>collapsible_controller.js</code>. </p> <p class="tw:mb-0 tw:text-sm"> <strong>House style:</strong> the consent row is <code>.form-check .form-check-lg .consent-block-check</code> — the 24px check box, not the 14px default. The DS default is deliberately unchanged; consent is the one place that opts up. These users are parents and applicants, usually first-time, often on a phone, making a one-off tick with real consequences, and <code>.form-check-lg</code> is the only step whose control clears WCAG 2.5.8's 24px target on its own rather than leaning on the row-spacing exception. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Privacy consent — collapsed detail</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default state:</strong> summary + collapsed detail behind a link-styled toggle. The detail starts closed (<code>aria-expanded="false"</code>) so the block stays short. The checkbox's <code>aria-describedby</code> points at the summary paragraph. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-1-summary"> We'll use your child's name, date of birth, and contact details to process this application and contact you about the outcome. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-1"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-1"> <div class="tw:overflow-hidden"> <p>Applicaa CIC processes the information in this form to assess your child's application and to keep you updated on its progress. We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> <p>You can ask to see, correct, or remove your data at any time by contacting the school's admissions office. Full details are in our <a href="https://applicaaone.com/privacy" class="link">privacy policy</a>.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-privacy-1" aria-required="true" aria-describedby="consent-privacy-1-summary"> <label class="form-check-label form-label-required" for="consent-privacy-1">I agree to the privacy notice above</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible"><p class="consent-block-summary" id="…-summary">…<button class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="…">…</button></p><div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="…"><div class="tw:overflow-hidden">…</div></div><div class="form-check form-check-lg consent-block-check"><input class="form-check-input" type="checkbox" aria-required="true" aria-describedby="…-summary"><label class="form-check-label form-label-required">…</label></div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Expanded detail</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Expanded state:</strong> after the toggle is clicked, <code>.collapsible-content</code> gains <code>.show</code>, <code>aria-expanded</code> flips to <code>true</code>, and the chevron rotates 180°. Shown here pre-opened for reference. </p> </div> <div class="consent-block" data-controller="collapsible" data-collapsible-open-value="true"> <p class="consent-block-summary" id="consent-updates-1-summary"> We'll use your details to send updates about upcoming open days and application deadlines for schools you've shown interest in. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="true" aria-controls="consent-detail-2"> Hide full privacy notice <i class="fa-regular fa-chevron-down tw:rotate-180" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content show" data-collapsible-target="content" id="consent-detail-2"> <div class="tw:overflow-hidden"> <p>We only contact you about schools and events you've asked to hear from. You can unsubscribe from these updates at any time using the link in any email we send.</p> <p>We keep this contact preference on file until you withdraw it or your application is closed, whichever comes first.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-updates-1" checked aria-describedby="consent-updates-1-summary"> <label class="form-check-label" for="consent-updates-1">I'd like to receive updates about open days and deadlines</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible" data-collapsible-open-value="true"><p class="consent-block-summary" id="…-summary">…<button class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="true" aria-controls="…">Hide full privacy notice<i class="fa-regular fa-chevron-down tw:rotate-180" data-collapsible-target="icon" aria-hidden="true"></i></button></p><div class="consent-block-detail collapsible-content show" data-collapsible-target="content" id="…"><div class="tw:overflow-hidden">…</div></div><div class="form-check form-check-lg consent-block-check"><input class="form-check-input" type="checkbox" checked aria-describedby="…-summary"><label class="form-check-label">…</label></div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Required — error state</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Validation:</strong> unchecked required consent on submit. Checkbox gets <code>.is-invalid</code> + <code>aria-invalid="true"</code>, and <code>.consent-block-error</code> follows the same visual idiom as <code>.invalid-feedback</code> — added to <code>aria-describedby</code> alongside the summary. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-error-summary"> We'll use your contact details to process this application and get in touch about its progress. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-3"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-3"> <div class="tw:overflow-hidden"> <p>Applicaa CIC processes the information in this form to assess your child's application. We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input is-invalid" type="checkbox" id="consent-privacy-error" aria-required="true" aria-describedby="consent-privacy-error-summary consent-privacy-error-msg" aria-invalid="true"> <label class="form-check-label form-label-required" for="consent-privacy-error">I agree to the privacy notice above</label> </div> <p class="consent-block-error" id="consent-privacy-error-msg"> Please agree to the privacy notice to continue with this application. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><input class="form-check-input is-invalid" aria-required="true" aria-describedby="…-summary …-msg" aria-invalid="true">…<p class="consent-block-error" id="…-msg">Please agree to the privacy notice to continue with this application.</p></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Two stacked blocks</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Stacking:</strong> a required privacy consent above an optional marketing consent — a common pairing at the end of an application form. Adjacent blocks get <code>tw:mt-4</code> spacing automatically. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-stack-summary"> We'll use your child's name, date of birth, and contact details to process this application and contact you about the outcome. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-stack-1"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-stack-1"> <div class="tw:overflow-hidden"> <p>We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-privacy-stack" aria-required="true" aria-describedby="consent-privacy-stack-summary"> <label class="form-check-label form-label-required" for="consent-privacy-stack">I agree to the privacy notice above</label> </div> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-marketing-stack-summary"> We'd also like to keep you informed about other schools and events that might suit your child, based on this application. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-stack-2"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-stack-2"> <div class="tw:overflow-hidden"> <p>This is entirely optional and separate from processing your application. You can change your mind at any time from your account settings.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-marketing-stack" aria-describedby="consent-marketing-stack-summary"> <label class="form-check-label" for="consent-marketing-stack">I'd like to hear about other schools and events</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible">…</div><div class="consent-block" data-controller="collapsible">…</div></code> — adjacent <code>.consent-block</code> elements get <code>tw:mt-4</code> spacing automatically via <code>.consent-block + .consent-block</code>, no wrapper needed. </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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<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>CONSENT BLOCK:</strong> Tinted container for privacy/consent copy + required checkbox<br> <strong>COMPOSES:</strong> .collapsible-content (collapsible_controller.js) | .form-check .form-check-lg | .form-label-required | .invalid-feedback idiom </p> <p class="tw:mb-0 tw:text-sm"> Pairs a short consent summary with an expandable full-policy detail and a required consent checkbox. Use wherever a parent or applicant must actively agree to a privacy notice, data-sharing statement, or terms before submitting a form. No new Stimulus controller — the expand/collapse toggle reuses <code>collapsible_controller.js</code>. </p> <p class="tw:mb-0 tw:text-sm"> <strong>House style:</strong> the consent row is <code>.form-check .form-check-lg .consent-block-check</code> — the 24px check box, not the 14px default. The DS default is deliberately unchanged; consent is the one place that opts up. These users are parents and applicants, usually first-time, often on a phone, making a one-off tick with real consequences, and <code>.form-check-lg</code> is the only step whose control clears WCAG 2.5.8's 24px target on its own rather than leaning on the row-spacing exception. </p> </div> <%# Collapsed detail (default) %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Privacy consent — collapsed detail</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Default state:</strong> summary + collapsed detail behind a link-styled toggle. The detail starts closed (<code>aria-expanded="false"</code>) so the block stays short. The checkbox's <code>aria-describedby</code> points at the summary paragraph. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-1-summary"> We'll use your child's name, date of birth, and contact details to process this application and contact you about the outcome. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-1"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-1"> <div class="tw:overflow-hidden"> <p>Applicaa CIC processes the information in this form to assess your child's application and to keep you updated on its progress. We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> <p>You can ask to see, correct, or remove your data at any time by contacting the school's admissions office. Full details are in our <a href="https://applicaaone.com/privacy" class="link">privacy policy</a>.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-privacy-1" aria-required="true" aria-describedby="consent-privacy-1-summary"> <label class="form-check-label form-label-required" for="consent-privacy-1">I agree to the privacy notice above</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible"><p class="consent-block-summary" id="…-summary">…<button class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="…">…</button></p><div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="…"><div class="tw:overflow-hidden">…</div></div><div class="form-check form-check-lg consent-block-check"><input class="form-check-input" type="checkbox" aria-required="true" aria-describedby="…-summary"><label class="form-check-label form-label-required">…</label></div></div></code> </div> </div> <%# Expanded detail %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Expanded detail</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Expanded state:</strong> after the toggle is clicked, <code>.collapsible-content</code> gains <code>.show</code>, <code>aria-expanded</code> flips to <code>true</code>, and the chevron rotates 180°. Shown here pre-opened for reference. </p> </div> <div class="consent-block" data-controller="collapsible" data-collapsible-open-value="true"> <p class="consent-block-summary" id="consent-updates-1-summary"> We'll use your details to send updates about upcoming open days and application deadlines for schools you've shown interest in. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="true" aria-controls="consent-detail-2"> Hide full privacy notice <i class="fa-regular fa-chevron-down tw:rotate-180" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content show" data-collapsible-target="content" id="consent-detail-2"> <div class="tw:overflow-hidden"> <p>We only contact you about schools and events you've asked to hear from. You can unsubscribe from these updates at any time using the link in any email we send.</p> <p>We keep this contact preference on file until you withdraw it or your application is closed, whichever comes first.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-updates-1" checked aria-describedby="consent-updates-1-summary"> <label class="form-check-label" for="consent-updates-1">I'd like to receive updates about open days and deadlines</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible" data-collapsible-open-value="true"><p class="consent-block-summary" id="…-summary">…<button class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="true" aria-controls="…">Hide full privacy notice<i class="fa-regular fa-chevron-down tw:rotate-180" data-collapsible-target="icon" aria-hidden="true"></i></button></p><div class="consent-block-detail collapsible-content show" data-collapsible-target="content" id="…"><div class="tw:overflow-hidden">…</div></div><div class="form-check form-check-lg consent-block-check"><input class="form-check-input" type="checkbox" checked aria-describedby="…-summary"><label class="form-check-label">…</label></div></div></code> </div> </div> <%# Required — error state %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Required — error state</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Validation:</strong> unchecked required consent on submit. Checkbox gets <code>.is-invalid</code> + <code>aria-invalid="true"</code>, and <code>.consent-block-error</code> follows the same visual idiom as <code>.invalid-feedback</code> — added to <code>aria-describedby</code> alongside the summary. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-error-summary"> We'll use your contact details to process this application and get in touch about its progress. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-3"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-3"> <div class="tw:overflow-hidden"> <p>Applicaa CIC processes the information in this form to assess your child's application. We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input is-invalid" type="checkbox" id="consent-privacy-error" aria-required="true" aria-describedby="consent-privacy-error-summary consent-privacy-error-msg" aria-invalid="true"> <label class="form-check-label form-label-required" for="consent-privacy-error">I agree to the privacy notice above</label> </div> <p class="consent-block-error" id="consent-privacy-error-msg"> Please agree to the privacy notice to continue with this application. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><input class="form-check-input is-invalid" aria-required="true" aria-describedby="…-summary …-msg" aria-invalid="true">…<p class="consent-block-error" id="…-msg">Please agree to the privacy notice to continue with this application.</p></code> </div> </div> <%# Two stacked blocks %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Two stacked blocks</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Stacking:</strong> a required privacy consent above an optional marketing consent — a common pairing at the end of an application form. Adjacent blocks get <code>tw:mt-4</code> spacing automatically. </p> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-privacy-stack-summary"> We'll use your child's name, date of birth, and contact details to process this application and contact you about the outcome. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-stack-1"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-stack-1"> <div class="tw:overflow-hidden"> <p>We share the minimum necessary details with the admitting school and local authority, and we never sell your data to third parties.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-privacy-stack" aria-required="true" aria-describedby="consent-privacy-stack-summary"> <label class="form-check-label form-label-required" for="consent-privacy-stack">I agree to the privacy notice above</label> </div> </div> <div class="consent-block" data-controller="collapsible"> <p class="consent-block-summary" id="consent-marketing-stack-summary"> We'd also like to keep you informed about other schools and events that might suit your child, based on this application. <button type="button" class="consent-block-toggle" data-action="click->collapsible#toggle" aria-expanded="false" aria-controls="consent-detail-stack-2"> Read our full privacy notice <i class="fa-regular fa-chevron-down" data-collapsible-target="icon" aria-hidden="true"></i> </button> </p> <div class="consent-block-detail collapsible-content" data-collapsible-target="content" id="consent-detail-stack-2"> <div class="tw:overflow-hidden"> <p>This is entirely optional and separate from processing your application. You can change your mind at any time from your account settings.</p> </div> </div> <div class="form-check form-check-lg consent-block-check"> <input class="form-check-input" type="checkbox" id="consent-marketing-stack" aria-describedby="consent-marketing-stack-summary"> <label class="form-check-label" for="consent-marketing-stack">I'd like to hear about other schools and events</label> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="consent-block" data-controller="collapsible">…</div><div class="consent-block" data-controller="collapsible">…</div></code> — adjacent <code>.consent-block</code> elements get <code>tw:mt-4</code> spacing automatically via <code>.consent-block + .consent-block</code>, no wrapper needed. </div> </div></div>No notes provided.
No params configured.