@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

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.
Files changed (136) hide show
  1. package/CHANGELOG.md +13 -4
  2. package/README.md +4 -4
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +2 -2
  5. package/components/bibtemplate/dist/registered.js +2 -2
  6. package/components/checkbox/README.md +62 -62
  7. package/components/checkbox/demo/api.js +1 -1
  8. package/components/checkbox/demo/api.md +127 -84
  9. package/components/checkbox/demo/api.min.js +125 -42
  10. package/components/checkbox/demo/index.md +9 -281
  11. package/components/checkbox/demo/index.min.js +125 -42
  12. package/components/checkbox/demo/readme.html +3 -4
  13. package/components/checkbox/demo/readme.md +62 -62
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +7 -8
  15. package/components/checkbox/dist/auro-checkbox.d.ts +74 -20
  16. package/components/checkbox/dist/index.js +125 -42
  17. package/components/checkbox/dist/registered.js +125 -42
  18. package/components/combobox/README.md +76 -74
  19. package/components/combobox/demo/api.html +1 -0
  20. package/components/combobox/demo/api.js +11 -12
  21. package/components/combobox/demo/api.md +1302 -875
  22. package/components/combobox/demo/api.min.js +416 -492
  23. package/components/combobox/demo/index.html +1 -7
  24. package/components/combobox/demo/index.js +0 -19
  25. package/components/combobox/demo/index.md +43 -723
  26. package/components/combobox/demo/index.min.js +369 -302
  27. package/components/combobox/demo/readme.html +3 -4
  28. package/components/combobox/demo/readme.md +76 -74
  29. package/components/combobox/dist/auro-combobox.d.ts +42 -42
  30. package/components/combobox/dist/index.js +204 -210
  31. package/components/combobox/dist/registered.js +204 -210
  32. package/components/counter/README.md +81 -66
  33. package/components/counter/demo/api.html +1 -2
  34. package/components/counter/demo/api.js +2 -2
  35. package/components/counter/demo/api.md +777 -259
  36. package/components/counter/demo/api.min.js +119 -171
  37. package/components/counter/demo/index.html +0 -2
  38. package/components/counter/demo/index.md +20 -329
  39. package/components/counter/demo/index.min.js +117 -152
  40. package/components/counter/demo/readme.html +3 -4
  41. package/components/counter/demo/readme.md +81 -66
  42. package/components/counter/dist/auro-counter-group.d.ts +21 -36
  43. package/components/counter/dist/auro-counter-wrapper.d.ts +1 -6
  44. package/components/counter/dist/auro-counter.d.ts +5 -8
  45. package/components/counter/dist/index.js +117 -152
  46. package/components/counter/dist/registered.js +117 -152
  47. package/components/datepicker/README.md +57 -61
  48. package/components/datepicker/demo/api.js +8 -8
  49. package/components/datepicker/demo/api.md +720 -561
  50. package/components/datepicker/demo/api.min.js +678 -2769
  51. package/components/datepicker/demo/index.md +65 -117
  52. package/components/datepicker/demo/index.min.js +678 -2769
  53. package/components/datepicker/demo/readme.html +3 -4
  54. package/components/datepicker/demo/readme.md +57 -61
  55. package/components/datepicker/dist/auro-calendar.d.ts +60 -34
  56. package/components/datepicker/dist/auro-datepicker.d.ts +32 -32
  57. package/components/datepicker/dist/iconVersion.d.ts +1 -1
  58. package/components/datepicker/dist/index.js +505 -2596
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +505 -2596
  61. package/components/dropdown/README.md +78 -62
  62. package/components/dropdown/demo/api.js +4 -4
  63. package/components/dropdown/demo/api.md +520 -478
  64. package/components/dropdown/demo/api.min.js +80 -95
  65. package/components/dropdown/demo/index.md +65 -119
  66. package/components/dropdown/demo/index.min.js +70 -85
  67. package/components/dropdown/demo/readme.html +3 -4
  68. package/components/dropdown/demo/readme.md +78 -62
  69. package/components/dropdown/dist/auro-dropdown.d.ts +42 -33
  70. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  71. package/components/dropdown/dist/index.js +70 -85
  72. package/components/dropdown/dist/registered.js +70 -85
  73. package/components/form/README.md +16 -58
  74. package/components/form/demo/api.md +16 -21
  75. package/components/form/demo/api.min.js +13 -8
  76. package/components/form/demo/index.md +38 -39
  77. package/components/form/demo/index.min.js +13 -8
  78. package/components/form/demo/readme.md +16 -58
  79. package/components/form/demo/working.html +1 -1
  80. package/components/form/dist/auro-form.d.ts +15 -3
  81. package/components/form/dist/index.js +13 -8
  82. package/components/form/dist/registered.js +13 -8
  83. package/components/input/README.md +55 -60
  84. package/components/input/demo/api.js +3 -5
  85. package/components/input/demo/api.md +558 -537
  86. package/components/input/demo/api.min.js +102 -115
  87. package/components/input/demo/index.js +0 -1
  88. package/components/input/demo/index.md +90 -203
  89. package/components/input/demo/index.min.js +87 -99
  90. package/components/input/demo/readme.html +3 -4
  91. package/components/input/demo/readme.md +55 -60
  92. package/components/input/dist/auro-input.d.ts +6 -5
  93. package/components/input/dist/base-input.d.ts +68 -69
  94. package/components/input/dist/iconVersion.d.ts +1 -1
  95. package/components/input/dist/index.js +87 -82
  96. package/components/input/dist/registered.js +87 -82
  97. package/components/menu/README.md +61 -61
  98. package/components/menu/demo/api.js +6 -8
  99. package/components/menu/demo/api.md +520 -577
  100. package/components/menu/demo/api.min.js +199 -97
  101. package/components/menu/demo/index.js +0 -5
  102. package/components/menu/demo/index.md +36 -119
  103. package/components/menu/demo/index.min.js +164 -101
  104. package/components/menu/demo/readme.html +3 -4
  105. package/components/menu/demo/readme.md +61 -61
  106. package/components/menu/dist/auro-menu.context.d.ts +5 -0
  107. package/components/menu/dist/auro-menu.d.ts +75 -37
  108. package/components/menu/dist/auro-menuoption.d.ts +38 -13
  109. package/components/menu/dist/index.js +164 -50
  110. package/components/menu/dist/registered.js +164 -50
  111. package/components/radio/README.md +61 -57
  112. package/components/radio/demo/api.js +2 -2
  113. package/components/radio/demo/api.md +241 -170
  114. package/components/radio/demo/api.min.js +154 -77
  115. package/components/radio/demo/index.md +22 -99
  116. package/components/radio/demo/index.min.js +145 -68
  117. package/components/radio/demo/readme.html +3 -4
  118. package/components/radio/demo/readme.md +61 -57
  119. package/components/radio/dist/auro-radio-group.d.ts +67 -35
  120. package/components/radio/dist/auro-radio.d.ts +56 -33
  121. package/components/radio/dist/index.js +145 -68
  122. package/components/radio/dist/registered.js +145 -68
  123. package/components/select/README.md +68 -65
  124. package/components/select/demo/api.html +1 -0
  125. package/components/select/demo/api.js +7 -7
  126. package/components/select/demo/api.md +1305 -625
  127. package/components/select/demo/api.min.js +357 -262
  128. package/components/select/demo/index.html +0 -2
  129. package/components/select/demo/index.md +25 -833
  130. package/components/select/demo/index.min.js +356 -230
  131. package/components/select/demo/readme.html +3 -4
  132. package/components/select/demo/readme.md +68 -65
  133. package/components/select/dist/auro-select.d.ts +99 -90
  134. package/components/select/dist/index.js +192 -180
  135. package/components/select/dist/registered.js +192 -180
  136. package/package.json +9 -4
package/components/checkbox/demo/index.md CHANGED
@@ -1,18 +1,18 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Checkbox
8
-
7
+ # Checkbox
8
+
9
9
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
10
  <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
11
  `<auro-checkbox>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## auro-checkbox use cases
15
-
14
+ ## Use Cases
15
+
16
16
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
17
  <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
18
  The `<auro-checkbox>` element should be used in situations where users may:
@@ -21,12 +21,10 @@ The `<auro-checkbox>` element should be used in situations where users may:
21
21
  * Need to select one or more options
22
22
  <!-- AURO-GENERATED-CONTENT:END -->
23
23
 
24
- ## Additional Information
25
-
26
24
  ## Example(s)
27
25
 
28
- ### Default
29
-
26
+ ### Basic
27
+
30
28
  <div class="exampleWrapper">
31
29
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
32
30
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
@@ -39,18 +37,6 @@ The `<auro-checkbox>` element should be used in situations where users may:
39
37
  </auro-checkbox-group>
40
38
  <!-- AURO-GENERATED-CONTENT:END -->
41
39
  </div>
42
- <div class="exampleWrapper--ondark" aria-hidden>
43
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
44
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
45
- <auro-checkbox-group appearance="inverse">
46
- <span slot="legend">Form label goes here</span>
47
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
48
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
49
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
50
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
51
- </auro-checkbox-group>
52
- <!-- AURO-GENERATED-CONTENT:END -->
53
- </div>
54
40
  <auro-accordion alignRight>
55
41
  <span slot="trigger">See code</span>
56
42
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -66,262 +52,4 @@ The `<auro-checkbox>` element should be used in situations where users may:
66
52
  </auro-checkbox-group>
67
53
  ```
68
54
  <!-- AURO-GENERATED-CONTENT:END -->
69
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
70
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
71
- <auro-checkbox-group appearance="inverse">
72
- <span slot="legend">Form label goes here</span>
73
- <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
74
- <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
75
- <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
76
- <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
77
- </auro-checkbox-group>
78
- <!-- AURO-GENERATED-CONTENT:END -->
79
- </auro-accordion>
80
-
81
- ### Disabled
82
-
83
- Use the `disabled` attribute to disable individual `<auro-checkbox>` elements or the entire `<auro-checkbox-group>`.
84
-
85
- #### Disabled Checkbox within Group
86
-
87
- The `disabled` attribute used to disable a single `<auro-checkbox>` element.
88
-
89
- <div class="exampleWrapper">
90
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
91
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
92
- <auro-checkbox-group>
93
- <span slot="legend">Form label goes here</span>
94
- <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
95
- <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
96
- <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
97
- <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
98
- </auro-checkbox-group>
99
- <!-- AURO-GENERATED-CONTENT:END -->
100
- </div>
101
- <auro-accordion alignRight>
102
- <span slot="trigger">See code</span>
103
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
104
- <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
105
-
106
- ```html
107
- <auro-checkbox-group>
108
- <span slot="legend">Form label goes here</span>
109
- <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
110
- <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
111
- <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
112
- <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
113
- </auro-checkbox-group>
114
- ```
115
- <!-- AURO-GENERATED-CONTENT:END -->
116
- </auro-accordion>
117
-
118
- #### Disabled Group
119
-
120
- The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
121
-
122
- <div class="exampleWrapper">
123
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
124
- <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
125
- <auro-checkbox-group disabled>
126
- <span slot="legend">Form label goes here</span>
127
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
128
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
129
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
130
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
131
- </auro-checkbox-group>
132
- <!-- AURO-GENERATED-CONTENT:END -->
133
- </div>
134
- <div class="exampleWrapper--ondark" aria-hidden>
135
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
136
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
137
- <auro-checkbox-group appearance="inverse" disabled>
138
- <span slot="legend">Form label goes here</span>
139
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
140
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
141
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
142
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
143
- </auro-checkbox-group>
144
- <!-- AURO-GENERATED-CONTENT:END -->
145
- </div>
146
- <auro-accordion alignRight>
147
- <span slot="trigger">See code</span>
148
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
149
- <!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
150
-
151
- ```html
152
- <auro-checkbox-group disabled>
153
- <span slot="legend">Form label goes here</span>
154
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
155
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
156
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
157
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
158
- </auro-checkbox-group>
159
- ```
160
- <!-- AURO-GENERATED-CONTENT:END -->
161
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDisabled.html) -->
162
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDisabled.html -->
163
- <auro-checkbox-group appearance="inverse" disabled>
164
- <span slot="legend">Form label goes here</span>
165
- <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
166
- <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
167
- <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
168
- <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
169
- </auro-checkbox-group>
170
- <!-- AURO-GENERATED-CONTENT:END -->
171
- </auro-accordion>
172
-
173
- ### Error
174
-
175
- Use the `error` attribute to force an error state on the element.
176
-
177
- #### Checkbox Group with Error
178
-
179
- The `error` attribute used to set error state on the entire `<auro-checkbox-group>`. If using the `error` attribute on an `<auro-checkbox-group>`, a string with the error message needs to be passed along with the attribute.
180
-
181
- <div class="exampleWrapper">
182
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorGroup.html) -->
183
- <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
184
- <auro-checkbox-group error="custom error">
185
- <span slot="legend">Form label goes here</span>
186
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
187
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
188
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
189
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
190
- </auro-checkbox-group>
191
- <!-- AURO-GENERATED-CONTENT:END -->
192
- </div>
193
- <div class="exampleWrapper--ondark" aria-hidden>
194
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
195
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
196
- <auro-checkbox-group appearance="inverse" error="custom error">
197
- <span slot="legend">Form label goes here</span>
198
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
199
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
200
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
201
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
202
- </auro-checkbox-group>
203
- <!-- AURO-GENERATED-CONTENT:END -->
204
- </div>
205
- <auro-accordion alignRight>
206
- <span slot="trigger">See code</span>
207
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorGroup.html) -->
208
- <!-- The below code snippet is automatically added from ./../apiExamples/errorGroup.html -->
209
-
210
- ```html
211
- <auro-checkbox-group error="custom error">
212
- <span slot="legend">Form label goes here</span>
213
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
214
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
215
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
216
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
217
- </auro-checkbox-group>
218
- ```
219
- <!-- AURO-GENERATED-CONTENT:END -->
220
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceError.html) -->
221
- <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceError.html -->
222
- <auro-checkbox-group appearance="inverse" error="custom error">
223
- <span slot="legend">Form label goes here</span>
224
- <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
225
- <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
226
- <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
227
- <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
228
- </auro-checkbox-group>
229
- <!-- AURO-GENERATED-CONTENT:END -->
230
- </auro-accordion>
231
-
232
- #### Required Group
233
-
234
- When present, the `required` attribute specifies that at least one or more `<auro-checkbox>` elements within the `<auro-checkbox-group>` must be checked.
235
-
236
- <div class="exampleWrapper">
237
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
238
- <!-- The below content is automatically added from ./../apiExamples/required.html -->
239
- <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
240
- <span slot="legend">Form label goes here</span>
241
- <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
242
- <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
243
- <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
244
- <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
245
- </auro-checkbox-group>
246
- <!-- AURO-GENERATED-CONTENT:END -->
247
- </div>
248
- <auro-accordion alignRight>
249
- <span slot="trigger">See code</span>
250
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
251
- <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
252
-
253
- ```html
254
- <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
255
- <span slot="legend">Form label goes here</span>
256
- <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
257
- <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
258
- <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
259
- <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
260
- </auro-checkbox-group>
261
- ```
262
- <!-- AURO-GENERATED-CONTENT:END -->
263
- </auro-accordion>
264
-
265
- ### Horizontal Group
266
-
267
- Using the `horizontal` attribute will render the checkbox options on a horizontal line.
268
-
269
- <div class="exampleWrapper">
270
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
271
- <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
272
- <auro-checkbox-group horizontal>
273
- <span slot="legend">Form label goes here</span>
274
- <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
275
- <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
276
- <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
277
- </auro-checkbox-group>
278
- <!-- AURO-GENERATED-CONTENT:END -->
279
- </div>
280
- <auro-accordion alignRight>
281
- <span slot="trigger">See code</span>
282
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
283
- <!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
284
-
285
- ```html
286
- <auro-checkbox-group horizontal>
287
- <span slot="legend">Form label goes here</span>
288
- <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
289
- <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
290
- <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
291
- </auro-checkbox-group>
292
- ```
293
- <!-- AURO-GENERATED-CONTENT:END -->
294
- </auro-accordion>
295
-
296
- ### Horizontal Group Limitation
297
-
298
- Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
299
-
300
- <div class="exampleWrapper">
301
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontalLimit.html) -->
302
- <!-- The below content is automatically added from ./../apiExamples/horizontalLimit.html -->
303
- <auro-checkbox-group horizontal>
304
- <span slot="legend">Form label goes here</span>
305
- <auro-checkbox value="yes" name="horizontalLimit" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
306
- <auro-checkbox value="no" name="horizontalLimit" id="checkbox-horizontalLimit2">No</auro-checkbox>
307
- <auro-checkbox value="maybe" name="horizontalLimit" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
308
- <auro-checkbox value="not sure" name="horizontalLimit" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
309
- </auro-checkbox-group>
310
- <!-- AURO-GENERATED-CONTENT:END -->
311
- </div>
312
- <auro-accordion alignRight>
313
- <span slot="trigger">See code</span>
314
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontalLimit.html) -->
315
- <!-- The below code snippet is automatically added from ./../apiExamples/horizontalLimit.html -->
316
-
317
- ```html
318
- <auro-checkbox-group horizontal>
319
- <span slot="legend">Form label goes here</span>
320
- <auro-checkbox value="yes" name="horizontalLimit" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
321
- <auro-checkbox value="no" name="horizontalLimit" id="checkbox-horizontalLimit2">No</auro-checkbox>
322
- <auro-checkbox value="maybe" name="horizontalLimit" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
323
- <auro-checkbox value="not sure" name="horizontalLimit" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
324
- </auro-checkbox-group>
325
- ```
326
- <!-- AURO-GENERATED-CONTENT:END -->
327
55
  </auro-accordion>