A-One Design System

Previews

No matching results.

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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<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>PATTERN NAME:</strong> Choice Matrix<br>
      <strong>COMPOSES:</strong> .table | .form-check / .form-check-input / .form-check-label | .form-label (on the legend) | .form-field
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Several questions that share one answer scale — a school's yes/no enquiry questions. A matrix on
      a laptop, one labelled question per row on a phone, from <strong>one</strong> markup: the table is
      reflowed below <code>sm</code>, never duplicated. Narrow this window past 640px and watch a row
      you have already answered keep its answer.
    </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> the whole set is a <code><fieldset></code> with a
        <code><legend class="form-label"></code> — never a bare <code><div></code> with a
        heading. <strong>Each row is its own radio group</strong>: one <code>name</code> per row, never
        one name across the table, or answering the second question would unanswer the first.
      </p>
    </div>
    <fieldset class="form-field">
      <legend class="form-label form-label-optional">Please answer each one</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cm-yes">Yes</th>
            <th class="choice-matrix-col" id="cm-no">No</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cm-q1">Would you like a tour of the school</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-yes" value="yes" aria-labelledby="cm-q1 cm-yes">
                <label class="form-check-label" for="cm-tour-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-no" value="no" aria-labelledby="cm-q1 cm-no">
                <label class="form-check-label" for="cm-tour-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm-q2">Would you like our prospectus posted</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-prospectus" id="cm-prospectus-yes" value="yes" aria-labelledby="cm-q2 cm-yes">
                <label class="form-check-label" for="cm-prospectus-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-prospectus" id="cm-prospectus-no" value="no" aria-labelledby="cm-q2 cm-no">
                <label class="form-check-label" for="cm-prospectus-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm-q3">May we contact you about open days</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-opendays" id="cm-opendays-yes" value="yes" aria-labelledby="cm-q3 cm-yes">
                <label class="form-check-label" for="cm-opendays-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-opendays" id="cm-opendays-no" value="no" aria-labelledby="cm-q3 cm-no">
                <label class="form-check-label" for="cm-opendays-no">No</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><fieldset class="form-field"></code><br>
      <code>  <legend class="form-label form-label-optional">Please answer each one</legend></code><br>
      <code>  <table class="table choice-matrix"></code><br>
      <code>    <thead><tr><th><span class="tw:sr-only">Question</span></th><th class="choice-matrix-col" id="cm-yes">Yes</th>…</tr></thead></code><br>
      <code>    <tbody><tr></code><br>
      <code>      <td class="choice-matrix-question" id="cm-q1">Would you like a tour of the school</td></code><br>
      <code>      <td class="choice-matrix-col"><div class="form-check"></code><br>
      <code>        <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-yes" aria-labelledby="cm-q1 cm-yes"></code><br>
      <code>        <label class="form-check-label" for="cm-tour-yes">Yes</label></code><br>
      <code>      </div></td>…</code>
    </div>
  </div>
  <!-- What a screen reader hears -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">The accessible name</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Two ids, one name:</strong> every radio carries
        <code>aria-labelledby="<question cell id> <column header id>"</code>, so it announces as
        <em>"Would you like a tour of the school, Yes"</em> — identical at both widths, because the name
        never comes from the in-cell label. That label exists so the answer is tappable on a phone; above
        <code>sm</code> the column header is what the eye reads and the label is out of the document, so a
        screen reader in table mode does not hear "Yes" twice.
      </p>
    </div>
  </div>
  <!-- Three answers -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">A wider answer scale</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Not only yes/no:</strong> any shared scale works — the columns are whatever the school
        asked. Column width is <code>--choice-matrix-col</code> (5.5rem); override it on the table when a
        scale needs wider headings.
      </p>
    </div>
    <fieldset class="form-field">
      <legend class="form-label">How would you prefer we contact you about each of these</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cm3-email">Email</th>
            <th class="choice-matrix-col" id="cm3-post">Post</th>
            <th class="choice-matrix-col" id="cm3-never">Never</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cm3-q1">Open day invitations</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-email" value="email" aria-labelledby="cm3-q1 cm3-email">
                <label class="form-check-label" for="cm3-opendays-email">Email</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-post" value="post" aria-labelledby="cm3-q1 cm3-post">
                <label class="form-check-label" for="cm3-opendays-post">Post</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-never" value="never" aria-labelledby="cm3-q1 cm3-never">
                <label class="form-check-label" for="cm3-opendays-never">Never</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm3-q2">Admissions deadlines</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-email" value="email" aria-labelledby="cm3-q2 cm3-email">
                <label class="form-check-label" for="cm3-deadlines-email">Email</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-post" value="post" aria-labelledby="cm3-q2 cm3-post">
                <label class="form-check-label" for="cm3-deadlines-post">Post</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-never" value="never" aria-labelledby="cm3-q2 cm3-never">
                <label class="form-check-label" for="cm3-deadlines-never">Never</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><table class="table choice-matrix"></code> — one <code><th class="choice-matrix-col"></code> per answer, one <code><td class="choice-matrix-col"></code> per answer per row
    </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>State lives once, on the wrapper:</strong> <code>.form-field.is-invalid</code> tints every
        control in the set and reveals the <code>.invalid-feedback</code>. The message names what to do,
        not what went wrong with the machine.
      </p>
    </div>
    <fieldset class="form-field is-invalid">
      <legend class="form-label form-label-required">Please answer each one</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cmi-yes">Yes</th>
            <th class="choice-matrix-col" id="cmi-no">No</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cmi-q1">Would you like a tour of the school</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-tour" id="cmi-tour-yes" value="yes" aria-labelledby="cmi-q1 cmi-yes" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-tour-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-tour" id="cmi-tour-no" value="no" aria-labelledby="cmi-q1 cmi-no" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-tour-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cmi-q2">Would you like our prospectus posted</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-prospectus" id="cmi-prospectus-yes" value="yes" aria-labelledby="cmi-q2 cmi-yes" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-prospectus-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-prospectus" id="cmi-prospectus-no" value="no" aria-labelledby="cmi-q2 cmi-no" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-prospectus-no">No</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="invalid-feedback" id="cmi-error">Choose Yes or No for each question</p>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><fieldset class="form-field is-invalid"></code> … <code><p class="invalid-feedback" id="cmi-error"></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
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<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>PATTERN NAME:</strong> Choice Matrix<br>
      <strong>COMPOSES:</strong> .table | .form-check / .form-check-input / .form-check-label | .form-label (on the legend) | .form-field
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Several questions that share one answer scale — a school's yes/no enquiry questions. A matrix on
      a laptop, one labelled question per row on a phone, from <strong>one</strong> markup: the table is
      reflowed below <code>sm</code>, never duplicated. Narrow this window past 640px and watch a row
      you have already answered keep its answer.
    </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> the whole set is a <code><fieldset></code> with a
        <code><legend class="form-label"></code> — never a bare <code><div></code> with a
        heading. <strong>Each row is its own radio group</strong>: one <code>name</code> per row, never
        one name across the table, or answering the second question would unanswer the first.
      </p>
    </div>
    <fieldset class="form-field">
      <legend class="form-label form-label-optional">Please answer each one</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cm-yes">Yes</th>
            <th class="choice-matrix-col" id="cm-no">No</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cm-q1">Would you like a tour of the school</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-yes" value="yes" aria-labelledby="cm-q1 cm-yes">
                <label class="form-check-label" for="cm-tour-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-no" value="no" aria-labelledby="cm-q1 cm-no">
                <label class="form-check-label" for="cm-tour-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm-q2">Would you like our prospectus posted</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-prospectus" id="cm-prospectus-yes" value="yes" aria-labelledby="cm-q2 cm-yes">
                <label class="form-check-label" for="cm-prospectus-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-prospectus" id="cm-prospectus-no" value="no" aria-labelledby="cm-q2 cm-no">
                <label class="form-check-label" for="cm-prospectus-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm-q3">May we contact you about open days</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-opendays" id="cm-opendays-yes" value="yes" aria-labelledby="cm-q3 cm-yes">
                <label class="form-check-label" for="cm-opendays-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm-opendays" id="cm-opendays-no" value="no" aria-labelledby="cm-q3 cm-no">
                <label class="form-check-label" for="cm-opendays-no">No</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><fieldset class="form-field"></code><br>
      <code>  <legend class="form-label form-label-optional">Please answer each one</legend></code><br>
      <code>  <table class="table choice-matrix"></code><br>
      <code>    <thead><tr><th><span class="tw:sr-only">Question</span></th><th class="choice-matrix-col" id="cm-yes">Yes</th>…</tr></thead></code><br>
      <code>    <tbody><tr></code><br>
      <code>      <td class="choice-matrix-question" id="cm-q1">Would you like a tour of the school</td></code><br>
      <code>      <td class="choice-matrix-col"><div class="form-check"></code><br>
      <code>        <input class="form-check-input" type="radio" name="cm-tour" id="cm-tour-yes" aria-labelledby="cm-q1 cm-yes"></code><br>
      <code>        <label class="form-check-label" for="cm-tour-yes">Yes</label></code><br>
      <code>      </div></td>…</code>
    </div>
  </div>
  <!-- What a screen reader hears -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">The accessible name</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Two ids, one name:</strong> every radio carries
        <code>aria-labelledby="<question cell id> <column header id>"</code>, so it announces as
        <em>"Would you like a tour of the school, Yes"</em> — identical at both widths, because the name
        never comes from the in-cell label. That label exists so the answer is tappable on a phone; above
        <code>sm</code> the column header is what the eye reads and the label is out of the document, so a
        screen reader in table mode does not hear "Yes" twice.
      </p>
    </div>
  </div>
  <!-- Three answers -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">A wider answer scale</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Not only yes/no:</strong> any shared scale works — the columns are whatever the school
        asked. Column width is <code>--choice-matrix-col</code> (5.5rem); override it on the table when a
        scale needs wider headings.
      </p>
    </div>
    <fieldset class="form-field">
      <legend class="form-label">How would you prefer we contact you about each of these</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cm3-email">Email</th>
            <th class="choice-matrix-col" id="cm3-post">Post</th>
            <th class="choice-matrix-col" id="cm3-never">Never</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cm3-q1">Open day invitations</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-email" value="email" aria-labelledby="cm3-q1 cm3-email">
                <label class="form-check-label" for="cm3-opendays-email">Email</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-post" value="post" aria-labelledby="cm3-q1 cm3-post">
                <label class="form-check-label" for="cm3-opendays-post">Post</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-opendays" id="cm3-opendays-never" value="never" aria-labelledby="cm3-q1 cm3-never">
                <label class="form-check-label" for="cm3-opendays-never">Never</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cm3-q2">Admissions deadlines</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-email" value="email" aria-labelledby="cm3-q2 cm3-email">
                <label class="form-check-label" for="cm3-deadlines-email">Email</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-post" value="post" aria-labelledby="cm3-q2 cm3-post">
                <label class="form-check-label" for="cm3-deadlines-post">Post</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cm3-deadlines" id="cm3-deadlines-never" value="never" aria-labelledby="cm3-q2 cm3-never">
                <label class="form-check-label" for="cm3-deadlines-never">Never</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><table class="table choice-matrix"></code> — one <code><th class="choice-matrix-col"></code> per answer, one <code><td class="choice-matrix-col"></code> per answer per row
    </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>State lives once, on the wrapper:</strong> <code>.form-field.is-invalid</code> tints every
        control in the set and reveals the <code>.invalid-feedback</code>. The message names what to do,
        not what went wrong with the machine.
      </p>
    </div>
    <fieldset class="form-field is-invalid">
      <legend class="form-label form-label-required">Please answer each one</legend>
      <table class="table choice-matrix">
        <thead>
          <tr>
            <th><span class="tw:sr-only">Question</span></th>
            <th class="choice-matrix-col" id="cmi-yes">Yes</th>
            <th class="choice-matrix-col" id="cmi-no">No</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="choice-matrix-question" id="cmi-q1">Would you like a tour of the school</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-tour" id="cmi-tour-yes" value="yes" aria-labelledby="cmi-q1 cmi-yes" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-tour-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-tour" id="cmi-tour-no" value="no" aria-labelledby="cmi-q1 cmi-no" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-tour-no">No</label>
              </div>
            </td>
          </tr>
          <tr>
            <td class="choice-matrix-question" id="cmi-q2">Would you like our prospectus posted</td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-prospectus" id="cmi-prospectus-yes" value="yes" aria-labelledby="cmi-q2 cmi-yes" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-prospectus-yes">Yes</label>
              </div>
            </td>
            <td class="choice-matrix-col">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="cmi-prospectus" id="cmi-prospectus-no" value="no" aria-labelledby="cmi-q2 cmi-no" aria-invalid="true" aria-describedby="cmi-error">
                <label class="form-check-label" for="cmi-prospectus-no">No</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="invalid-feedback" id="cmi-error">Choose Yes or No for each question</p>
    </fieldset>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><fieldset class="form-field is-invalid"></code> … <code><p class="invalid-feedback" id="cmi-error"></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.