@newjersey/njwds 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/css/button.css +1 -1
- package/dist/css/button.css.map +1 -1
- package/dist/css/icon.css +1 -1
- package/dist/css/icon.css.map +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/package.json +1 -1
- package/src/components/07-form/controls/checkboxes/checkboxes--single.njk +4 -0
- package/src/components/07-form/controls/checkboxes/checkboxes--tile.njk +58 -0
- package/src/components/07-form/controls/{checkboxes.njk → checkboxes/checkboxes.njk} +1 -1
- package/src/components/07-form/controls/error-states.config.yml +2 -0
- package/src/components/07-form/controls/error-states.njk +385 -0
- package/src/components/07-form/controls/radio-buttons/radio-buttons--tile.njk +58 -0
- package/src/components/07-form/controls/{radio-buttons.njk → radio-buttons/radio-buttons.njk} +4 -6
- package/src/sass/_uswds-theme-custom-styles.scss +35 -4
- package/src/components/07-form/controls/radio-buttons.config.yml +0 -14
package/package.json
CHANGED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
<fieldset class="usa-fieldset">
|
|
3
|
+
<legend class="usa-legend">Select any historical figure</legend>
|
|
4
|
+
<div class="usa-checkbox">
|
|
5
|
+
<input
|
|
6
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
7
|
+
id="check-historical-truth-2"
|
|
8
|
+
type="checkbox"
|
|
9
|
+
name="historical-figures-2"
|
|
10
|
+
value="sojourner-truth"
|
|
11
|
+
checked="checked"
|
|
12
|
+
/>
|
|
13
|
+
<label class="usa-checkbox__label" for="check-historical-truth-2"
|
|
14
|
+
>Sojourner Truth
|
|
15
|
+
<span class="usa-checkbox__label-description"
|
|
16
|
+
>This is optional text that can be used to describe the label in more
|
|
17
|
+
detail.</span
|
|
18
|
+
></label
|
|
19
|
+
>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="usa-checkbox">
|
|
22
|
+
<input
|
|
23
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
24
|
+
id="check-historical-douglass-2"
|
|
25
|
+
type="checkbox"
|
|
26
|
+
name="historical-figures-2"
|
|
27
|
+
value="frederick-douglass"
|
|
28
|
+
/>
|
|
29
|
+
<label class="usa-checkbox__label" for="check-historical-douglass-2"
|
|
30
|
+
>Frederick Douglass</label
|
|
31
|
+
>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="usa-checkbox">
|
|
34
|
+
<input
|
|
35
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
36
|
+
id="check-historical-washington-2"
|
|
37
|
+
type="checkbox"
|
|
38
|
+
name="historical-figures-2"
|
|
39
|
+
value="booker-t-washington"
|
|
40
|
+
/>
|
|
41
|
+
<label class="usa-checkbox__label" for="check-historical-washington-2"
|
|
42
|
+
>Booker T. Washington</label
|
|
43
|
+
>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="usa-checkbox">
|
|
46
|
+
<input
|
|
47
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
48
|
+
id="check-historical-carver-2"
|
|
49
|
+
type="checkbox"
|
|
50
|
+
name="historical-figures-2"
|
|
51
|
+
value="george-washington-carver"
|
|
52
|
+
/>
|
|
53
|
+
<label class="usa-checkbox__label" for="check-historical-carver-2"
|
|
54
|
+
>George Washington Carver</label
|
|
55
|
+
>
|
|
56
|
+
</div>
|
|
57
|
+
</fieldset>
|
|
58
|
+
</form>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<label class="usa-checkbox__label" for="check-historical-washington">Booker T. Washington</label>
|
|
15
15
|
</div>
|
|
16
16
|
<div class="usa-checkbox">
|
|
17
|
-
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver"
|
|
17
|
+
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver">
|
|
18
18
|
<label class="usa-checkbox__label" for="check-historical-carver">George Washington Carver</label>
|
|
19
19
|
</div>
|
|
20
20
|
</fieldset>
|
|
@@ -0,0 +1,385 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
{# text input #}
|
|
3
|
+
<div class="usa-form-group usa-form-group--error">
|
|
4
|
+
<label class="usa-label usa-label--error" for="input-error">
|
|
5
|
+
Text input label
|
|
6
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
7
|
+
</label>
|
|
8
|
+
<span id="with-hint-input-hint" class="usa-hint"> Helper text </span>
|
|
9
|
+
|
|
10
|
+
<div class="usa-character-count">
|
|
11
|
+
<input
|
|
12
|
+
required
|
|
13
|
+
class="usa-input usa-input--error usa-character-count__field"
|
|
14
|
+
id="input-error"
|
|
15
|
+
maxlength="25"
|
|
16
|
+
name="input-error"
|
|
17
|
+
type="text"
|
|
18
|
+
aria-describedby="with-hint-input-hint input-error-message"
|
|
19
|
+
/>
|
|
20
|
+
<span id="with-hint-input-info" class="usa-character-count__message">
|
|
21
|
+
You can enter up to 25 characters
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="nj-error-message-container">
|
|
25
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
26
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
27
|
+
</svg>
|
|
28
|
+
<span class="usa-error-message" id="input-error-message" role="alert"
|
|
29
|
+
>Helpful error message</span
|
|
30
|
+
>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
{# text area #}
|
|
35
|
+
<div class="usa-form-group usa-form-group--error">
|
|
36
|
+
<label class="usa-label usa-label--error" for="area-error">
|
|
37
|
+
Text area label
|
|
38
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
39
|
+
</label>
|
|
40
|
+
<span id="with-hint-area-hint" class="usa-hint"> Helper text </span>
|
|
41
|
+
|
|
42
|
+
<div class="usa-character-count">
|
|
43
|
+
<textarea
|
|
44
|
+
required
|
|
45
|
+
class="usa-textarea usa-input--error usa-character-count__field"
|
|
46
|
+
id="area-error"
|
|
47
|
+
maxlength="25"
|
|
48
|
+
name="area-error"
|
|
49
|
+
type="text"
|
|
50
|
+
aria-describedby="with-hint-area-hint area-error-message"
|
|
51
|
+
></textarea>
|
|
52
|
+
<span id="with-hint-area-info" class="usa-character-count__message">
|
|
53
|
+
You can enter up to 25 characters
|
|
54
|
+
</span>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="nj-error-message-container">
|
|
57
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
58
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
59
|
+
</svg>
|
|
60
|
+
<span class="usa-error-message" id="area-error-message" role="alert"
|
|
61
|
+
>Helpful error message</span
|
|
62
|
+
>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
{# dropdown select #}
|
|
67
|
+
<div class="usa-form-group usa-form-group--error">
|
|
68
|
+
<label class="usa-label usa-label--error" for="options"
|
|
69
|
+
>Dropdown label
|
|
70
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
71
|
+
</label>
|
|
72
|
+
<span id="with-hint-options-hint" class="usa-hint"> Helper text </span>
|
|
73
|
+
<select
|
|
74
|
+
class="usa-select usa-input--error"
|
|
75
|
+
name="options"
|
|
76
|
+
id="options"
|
|
77
|
+
aria-describedby="with-hint-options-hint options-error-message"
|
|
78
|
+
>
|
|
79
|
+
<option value>- Select -</option>
|
|
80
|
+
<option value="value1">Option A</option>
|
|
81
|
+
<option value="value2">Option B</option>
|
|
82
|
+
<option value="value3">Option C</option>
|
|
83
|
+
</select>
|
|
84
|
+
<div class="nj-error-message-container">
|
|
85
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
86
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
87
|
+
</svg>
|
|
88
|
+
<span class="usa-error-message" id="options-error-message" role="alert"
|
|
89
|
+
>Helpful error message</span
|
|
90
|
+
>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
{# date picker #}
|
|
95
|
+
<div class="usa-form-group usa-form-group--error">
|
|
96
|
+
<label
|
|
97
|
+
class="usa-label usa-label--error"
|
|
98
|
+
id="appointment-date-label"
|
|
99
|
+
for="appointment-date"
|
|
100
|
+
>Appointment date
|
|
101
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
102
|
+
</label>
|
|
103
|
+
<div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
|
|
104
|
+
<div class="usa-date-picker">
|
|
105
|
+
<input
|
|
106
|
+
class="usa-input usa-input--error"
|
|
107
|
+
id="appointment-date"
|
|
108
|
+
name="appointment-date"
|
|
109
|
+
aria-labelledby="appointment-date-label"
|
|
110
|
+
aria-describedby="appointment-date-hint date-error-message"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="nj-error-message-container">
|
|
114
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
115
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
116
|
+
</svg>
|
|
117
|
+
<span class="usa-error-message" id="date-error-message" role="alert"
|
|
118
|
+
>Helpful error message</span
|
|
119
|
+
>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
{# memorable date #}
|
|
124
|
+
<div class="usa-form-group usa-form-group--error">
|
|
125
|
+
<fieldset
|
|
126
|
+
class="usa-fieldset"
|
|
127
|
+
aria-describedby="memorable-date-error-message"
|
|
128
|
+
>
|
|
129
|
+
<legend class="usa-legend usa-label--error">
|
|
130
|
+
Date of birth
|
|
131
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
132
|
+
</legend>
|
|
133
|
+
<span class="usa-hint" id="mdHint">For example: January 19 2000</span>
|
|
134
|
+
<div class="usa-memorable-date">
|
|
135
|
+
<div
|
|
136
|
+
class="usa-form-group usa-form-group--month usa-form-group--select"
|
|
137
|
+
>
|
|
138
|
+
<label class="usa-label usa-label--error" for="date_of_birth_month"
|
|
139
|
+
>Month</label
|
|
140
|
+
>
|
|
141
|
+
<select
|
|
142
|
+
class="usa-select usa-input--error"
|
|
143
|
+
id="date_of_birth_month"
|
|
144
|
+
name="date_of_birth_month"
|
|
145
|
+
aria-describedby="mdHint"
|
|
146
|
+
>
|
|
147
|
+
<option value>- Select -</option>
|
|
148
|
+
<option value="1">January</option>
|
|
149
|
+
<option value="2">February</option>
|
|
150
|
+
<option value="3">March</option>
|
|
151
|
+
<option value="4">April</option>
|
|
152
|
+
<option value="5">May</option>
|
|
153
|
+
<option value="6">June</option>
|
|
154
|
+
<option value="7">July</option>
|
|
155
|
+
<option value="8">August</option>
|
|
156
|
+
<option value="9">September</option>
|
|
157
|
+
<option value="10">October</option>
|
|
158
|
+
<option value="11">November</option>
|
|
159
|
+
<option value="12">December</option>
|
|
160
|
+
</select>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="usa-form-group usa-form-group--day">
|
|
163
|
+
<label class="usa-label usa-label--error" for="date_of_birth_day"
|
|
164
|
+
>Day</label
|
|
165
|
+
>
|
|
166
|
+
<input
|
|
167
|
+
class="usa-input usa-input--error"
|
|
168
|
+
aria-describedby="mdHint"
|
|
169
|
+
id="date_of_birth_day"
|
|
170
|
+
name="date_of_birth_day"
|
|
171
|
+
maxlength="2"
|
|
172
|
+
pattern="[0-9]*"
|
|
173
|
+
inputmode="numeric"
|
|
174
|
+
value=""
|
|
175
|
+
/>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="usa-form-group usa-form-group--year">
|
|
178
|
+
<label class="usa-label usa-label--error" for="date_of_birth_year"
|
|
179
|
+
>Year</label
|
|
180
|
+
>
|
|
181
|
+
<input
|
|
182
|
+
class="usa-input usa-input--error"
|
|
183
|
+
aria-describedby="mdHint"
|
|
184
|
+
id="date_of_birth_year"
|
|
185
|
+
name="date_of_birth_year"
|
|
186
|
+
minlength="4"
|
|
187
|
+
maxlength="4"
|
|
188
|
+
pattern="[0-9]*"
|
|
189
|
+
inputmode="numeric"
|
|
190
|
+
value=""
|
|
191
|
+
/>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</fieldset>
|
|
195
|
+
<div class="nj-error-message-container">
|
|
196
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
197
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
198
|
+
</svg>
|
|
199
|
+
<span
|
|
200
|
+
class="usa-error-message"
|
|
201
|
+
id="memorable-date-error-message"
|
|
202
|
+
role="alert"
|
|
203
|
+
>Helpful error message</span
|
|
204
|
+
>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
{# checkboxes #}
|
|
209
|
+
<div class="usa-form-group usa-form-group--error">
|
|
210
|
+
<fieldset
|
|
211
|
+
class="usa-fieldset"
|
|
212
|
+
aria-describedby="checkboxes-hint checkboxes-error-message"
|
|
213
|
+
>
|
|
214
|
+
<legend class="usa-legend usa-label--error">
|
|
215
|
+
Select any historical figure
|
|
216
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
217
|
+
</legend>
|
|
218
|
+
<span class="usa-hint" id="checkboxes-hint">Helper text</span>
|
|
219
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
220
|
+
<input
|
|
221
|
+
class="usa-checkbox__input"
|
|
222
|
+
id="check-historical-truth"
|
|
223
|
+
type="checkbox"
|
|
224
|
+
name="historical-figures"
|
|
225
|
+
value="sojourner-truth"
|
|
226
|
+
checked="checked"
|
|
227
|
+
/>
|
|
228
|
+
<label class="usa-checkbox__label" for="check-historical-truth"
|
|
229
|
+
>Sojourner Truth</label
|
|
230
|
+
>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
233
|
+
<input
|
|
234
|
+
class="usa-checkbox__input"
|
|
235
|
+
id="check-historical-douglass"
|
|
236
|
+
type="checkbox"
|
|
237
|
+
name="historical-figures"
|
|
238
|
+
value="frederick-douglass"
|
|
239
|
+
/>
|
|
240
|
+
<label class="usa-checkbox__label" for="check-historical-douglass"
|
|
241
|
+
>Frederick Douglass</label
|
|
242
|
+
>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
245
|
+
<input
|
|
246
|
+
class="usa-checkbox__input"
|
|
247
|
+
id="check-historical-washington"
|
|
248
|
+
type="checkbox"
|
|
249
|
+
name="historical-figures"
|
|
250
|
+
value="booker-t-washington"
|
|
251
|
+
/>
|
|
252
|
+
<label class="usa-checkbox__label" for="check-historical-washington"
|
|
253
|
+
>Booker T. Washington</label
|
|
254
|
+
>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
257
|
+
<input
|
|
258
|
+
class="usa-checkbox__input"
|
|
259
|
+
id="check-historical-carver"
|
|
260
|
+
type="checkbox"
|
|
261
|
+
name="historical-figures"
|
|
262
|
+
value="george-washington-carver"
|
|
263
|
+
/>
|
|
264
|
+
<label class="usa-checkbox__label" for="check-historical-carver"
|
|
265
|
+
>George Washington Carver</label
|
|
266
|
+
>
|
|
267
|
+
</div>
|
|
268
|
+
</fieldset>
|
|
269
|
+
<div class="nj-error-message-container">
|
|
270
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
271
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
272
|
+
</svg>
|
|
273
|
+
<span class="usa-error-message" id="checkboxes-error-message" role="alert"
|
|
274
|
+
>Helpful error message</span
|
|
275
|
+
>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
{# checkbox tile list #}
|
|
280
|
+
<div class="usa-form-group usa-form-group--error">
|
|
281
|
+
<fieldset class="usa-fieldset" aria-describedby="checkboxes-hint--tile checkboxes-error-message--tile">
|
|
282
|
+
<legend class="usa-legend usa-label--error">
|
|
283
|
+
Select any historical figure
|
|
284
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
285
|
+
</legend>
|
|
286
|
+
<span class="usa-hint" id="checkboxes-hint--tile">Helper text</span>
|
|
287
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
288
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-truth-2--tile" type="checkbox" name="historical-figures-2" value="sojourner-truth" checked>
|
|
289
|
+
<label class="usa-checkbox__label" for="check-historical-truth-2--tile">
|
|
290
|
+
Sojourner Truth
|
|
291
|
+
</label>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
294
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-douglass-2--tile" type="checkbox" name="historical-figures-2" value="frederick-douglass">
|
|
295
|
+
<label class="usa-checkbox__label" for="check-historical-douglass-2--tile">Frederick Douglass</label>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
298
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-washington-2--tile" type="checkbox" name="historical-figures-2" value="booker-t-washington">
|
|
299
|
+
<label class="usa-checkbox__label" for="check-historical-washington-2--tile">Booker T. Washington</label>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="usa-checkbox nj-checkbox--error">
|
|
302
|
+
<input class="usa-checkbox__input usa-checkbox__input--tile" id="check-historical-carver-2--tile" type="checkbox" name="historical-figures-2" value="george-washington-carver">
|
|
303
|
+
<label class="usa-checkbox__label" for="check-historical-carver-2--tile">George Washington Carver</label>
|
|
304
|
+
</div>
|
|
305
|
+
</fieldset>
|
|
306
|
+
<div class="nj-error-message-container">
|
|
307
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
308
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
309
|
+
</svg>
|
|
310
|
+
<span class="usa-error-message" id="checkboxes-error-message--tile" role="alert">
|
|
311
|
+
Helpful error message
|
|
312
|
+
</span>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
|
|
316
|
+
{# radio buttons #}
|
|
317
|
+
<div class="usa-form-group usa-form-group--error">
|
|
318
|
+
<fieldset class="usa-fieldset" aria-describedby="radio-hint radio-error-message">
|
|
319
|
+
<legend class="usa-legend usa-label--error">
|
|
320
|
+
Select one historical figure
|
|
321
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
322
|
+
</legend>
|
|
323
|
+
<span class="usa-hint" id="radio-hint">Helper text</span>
|
|
324
|
+
<div class="usa-radio nj-radio--error">
|
|
325
|
+
<input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth" checked>
|
|
326
|
+
<label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="usa-radio nj-radio--error">
|
|
329
|
+
<input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
|
|
330
|
+
<label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
|
|
331
|
+
</div>
|
|
332
|
+
<div class="usa-radio nj-radio--error">
|
|
333
|
+
<input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
|
|
334
|
+
<label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="usa-radio nj-radio--error">
|
|
337
|
+
<input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver">
|
|
338
|
+
<label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
|
|
339
|
+
</div>
|
|
340
|
+
</fieldset>
|
|
341
|
+
<div class="nj-error-message-container">
|
|
342
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
343
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
344
|
+
</svg>
|
|
345
|
+
<span class="usa-error-message" id="radio-error-message" role="alert">
|
|
346
|
+
Helpful error message
|
|
347
|
+
</span>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
{# radio tile list #}
|
|
352
|
+
<div class="usa-form-group usa-form-group--error">
|
|
353
|
+
<fieldset class="usa-fieldset" aria-describedby="radio-hint--tile radio-error-message--tile">
|
|
354
|
+
<legend class="usa-legend usa-label--error">
|
|
355
|
+
Select one historical figure
|
|
356
|
+
<abbr title="required" class="usa-label--required">*</abbr>
|
|
357
|
+
</legend>
|
|
358
|
+
<span class="usa-hint" id="radio-hint--tile">Helper text</span>
|
|
359
|
+
<div class="usa-radio nj-radio--error">
|
|
360
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-truth--tile" type="radio" name="historical-figures" value="sojourner-truth" checked>
|
|
361
|
+
<label class="usa-radio__label" for="historical-truth--tile">Sojourner Truth</label>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="usa-radio nj-radio--error">
|
|
364
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-douglass--tile" type="radio" name="historical-figures" value="frederick-douglass">
|
|
365
|
+
<label class="usa-radio__label" for="historical-douglass--tile">Frederick Douglass</label>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="usa-radio nj-radio--error">
|
|
368
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-washington--tile" type="radio" name="historical-figures" value="booker-t-washington">
|
|
369
|
+
<label class="usa-radio__label" for="historical-washington--tile">Booker T. Washington</label>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="usa-radio nj-radio--error">
|
|
372
|
+
<input class="usa-radio__input usa-radio__input--tile" id="historical-carver--tile" type="radio" name="historical-figures" value="george-washington-carver">
|
|
373
|
+
<label class="usa-radio__label" for="historical-carver--tile">George Washington Carver</label>
|
|
374
|
+
</div>
|
|
375
|
+
</fieldset>
|
|
376
|
+
<div class="nj-error-message-container">
|
|
377
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
378
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
379
|
+
</svg>
|
|
380
|
+
<span class="usa-error-message" id="radio-error-message--tile" role="alert">
|
|
381
|
+
Helpful error message
|
|
382
|
+
</span>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
</form>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
<fieldset class="usa-fieldset">
|
|
3
|
+
<legend class="usa-legend">Select one historical figure</legend>
|
|
4
|
+
<div class="usa-radio">
|
|
5
|
+
<input
|
|
6
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
7
|
+
id="historical-truth-2"
|
|
8
|
+
type="radio"
|
|
9
|
+
name="historical-figures-2"
|
|
10
|
+
value="sojourner-truth"
|
|
11
|
+
checked="checked"
|
|
12
|
+
/>
|
|
13
|
+
<label class="usa-radio__label" for="historical-truth-2"
|
|
14
|
+
>Sojourner Truth</label
|
|
15
|
+
>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="usa-radio">
|
|
18
|
+
<input
|
|
19
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
20
|
+
id="historical-douglass-2"
|
|
21
|
+
type="radio"
|
|
22
|
+
name="historical-figures-2"
|
|
23
|
+
value="frederick-douglass"
|
|
24
|
+
/>
|
|
25
|
+
<label class="usa-radio__label" for="historical-douglass-2"
|
|
26
|
+
>Frederick Douglass
|
|
27
|
+
<span class="usa-checkbox__label-description"
|
|
28
|
+
>This is optional text that can be used to describe the label in more
|
|
29
|
+
detail.</span
|
|
30
|
+
></label
|
|
31
|
+
>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="usa-radio">
|
|
34
|
+
<input
|
|
35
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
36
|
+
id="historical-washington-2"
|
|
37
|
+
type="radio"
|
|
38
|
+
name="historical-figures-2"
|
|
39
|
+
value="booker-t-washington"
|
|
40
|
+
/>
|
|
41
|
+
<label class="usa-radio__label" for="historical-washington-2"
|
|
42
|
+
>Booker T. Washington</label
|
|
43
|
+
>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="usa-radio">
|
|
46
|
+
<input
|
|
47
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
48
|
+
id="historical-carver-2"
|
|
49
|
+
type="radio"
|
|
50
|
+
name="historical-figures-2"
|
|
51
|
+
value="george-washington-carver"
|
|
52
|
+
/>
|
|
53
|
+
<label class="usa-radio__label" for="historical-carver-2"
|
|
54
|
+
>George Washington Carver</label
|
|
55
|
+
>
|
|
56
|
+
</div>
|
|
57
|
+
</fieldset>
|
|
58
|
+
</form>
|
package/src/components/07-form/controls/{radio-buttons.njk → radio-buttons/radio-buttons.njk}
RENAMED
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
{%- set inputClasses = 'usa-radio__input ' + classes -%}
|
|
2
|
-
|
|
3
1
|
<form class="usa-form">
|
|
4
2
|
<fieldset class="usa-fieldset">
|
|
5
3
|
<legend class="usa-legend usa-legend">Select one historical figure</legend>
|
|
6
4
|
<div class="usa-radio">
|
|
7
|
-
<input class="
|
|
5
|
+
<input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth">
|
|
8
6
|
<label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
|
|
9
7
|
</div>
|
|
10
8
|
<div class="usa-radio">
|
|
11
|
-
<input class="
|
|
9
|
+
<input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
|
|
12
10
|
<label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
|
|
13
11
|
</div>
|
|
14
12
|
<div class="usa-radio">
|
|
15
|
-
<input class="
|
|
13
|
+
<input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
|
|
16
14
|
<label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
|
|
17
15
|
</div>
|
|
18
16
|
<div class="usa-radio">
|
|
19
|
-
<input class="
|
|
17
|
+
<input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver">
|
|
20
18
|
<label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
|
|
21
19
|
</div>
|
|
22
20
|
</fieldset>
|
|
@@ -279,14 +279,45 @@ i.e.
|
|
|
279
279
|
box-shadow: 0 0 0 2px color($theme-color-base);
|
|
280
280
|
}
|
|
281
281
|
|
|
282
|
-
// Radio
|
|
283
|
-
.usa-radio__input--tile:checked + [class*="__label"]
|
|
282
|
+
// Radio & Checkbox tile variants
|
|
283
|
+
.usa-radio__input--tile:checked + [class*="__label"],
|
|
284
|
+
.usa-checkbox__input--tile:checked + [class*="__label"] {
|
|
284
285
|
background-color: color($theme-color-primary-lighter);
|
|
285
286
|
}
|
|
286
287
|
|
|
287
|
-
.usa-radio__input--tile + [class*="__label"]
|
|
288
|
+
.usa-radio__input--tile + [class*="__label"],
|
|
289
|
+
.usa-checkbox__input--tile + [class*="__label"] {
|
|
288
290
|
border-color: color($theme-color-base-light);
|
|
289
291
|
}
|
|
290
|
-
.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before
|
|
292
|
+
.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before,
|
|
293
|
+
.usa-checkbox__input.usa-checkbox__input--tile:checked + [class*="__label"]::before{
|
|
291
294
|
box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #cfe8ff;
|
|
292
295
|
}
|
|
296
|
+
|
|
297
|
+
.nj-error-message-container {
|
|
298
|
+
margin-top: units(1.5);
|
|
299
|
+
display: flex;
|
|
300
|
+
align-items: flex-start;
|
|
301
|
+
color: color($theme-color-error-dark);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.nj-error-message-container > svg {
|
|
305
|
+
flex-shrink: 0;
|
|
306
|
+
margin-right: units(1);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.usa-error-message {
|
|
310
|
+
padding: units(0);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.usa-form-group--error {
|
|
314
|
+
padding-left: units(2.5);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.nj-checkbox--error > .usa-checkbox__label::before {
|
|
318
|
+
box-shadow: 0 0 0 2px color($theme-color-error-dark);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.nj-radio--error > .usa-radio__label::before {
|
|
322
|
+
box-shadow: 0 0 0 2px color($theme-color-error-dark);
|
|
323
|
+
}
|