@aurodesignsystem/auro-formkit 5.9.1 → 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 (127) hide show
  1. package/CHANGELOG.md +16 -4
  2. package/components/checkbox/README.md +62 -62
  3. package/components/checkbox/demo/api.js +1 -1
  4. package/components/checkbox/demo/api.md +127 -84
  5. package/components/checkbox/demo/api.min.js +125 -42
  6. package/components/checkbox/demo/index.md +9 -281
  7. package/components/checkbox/demo/index.min.js +125 -42
  8. package/components/checkbox/demo/readme.html +3 -4
  9. package/components/checkbox/demo/readme.md +62 -62
  10. package/components/checkbox/dist/auro-checkbox-group.d.ts +7 -8
  11. package/components/checkbox/dist/auro-checkbox.d.ts +74 -20
  12. package/components/checkbox/dist/index.js +125 -42
  13. package/components/checkbox/dist/registered.js +125 -42
  14. package/components/combobox/README.md +76 -74
  15. package/components/combobox/demo/api.html +1 -0
  16. package/components/combobox/demo/api.js +11 -12
  17. package/components/combobox/demo/api.md +1302 -875
  18. package/components/combobox/demo/api.min.js +348 -420
  19. package/components/combobox/demo/index.html +1 -7
  20. package/components/combobox/demo/index.js +0 -19
  21. package/components/combobox/demo/index.md +43 -723
  22. package/components/combobox/demo/index.min.js +301 -230
  23. package/components/combobox/demo/readme.html +3 -4
  24. package/components/combobox/demo/readme.md +76 -74
  25. package/components/combobox/dist/auro-combobox.d.ts +39 -40
  26. package/components/combobox/dist/index.js +159 -143
  27. package/components/combobox/dist/registered.js +159 -143
  28. package/components/counter/README.md +81 -66
  29. package/components/counter/demo/api.html +1 -2
  30. package/components/counter/demo/api.js +2 -2
  31. package/components/counter/demo/api.md +777 -259
  32. package/components/counter/demo/api.min.js +84 -112
  33. package/components/counter/demo/index.html +0 -2
  34. package/components/counter/demo/index.md +20 -329
  35. package/components/counter/demo/index.min.js +82 -93
  36. package/components/counter/demo/readme.html +3 -4
  37. package/components/counter/demo/readme.md +81 -66
  38. package/components/counter/dist/auro-counter-group.d.ts +21 -36
  39. package/components/counter/dist/auro-counter-wrapper.d.ts +1 -6
  40. package/components/counter/dist/auro-counter.d.ts +5 -8
  41. package/components/counter/dist/index.js +82 -93
  42. package/components/counter/dist/registered.js +82 -93
  43. package/components/datepicker/README.md +57 -61
  44. package/components/datepicker/demo/api.js +8 -8
  45. package/components/datepicker/demo/api.md +720 -561
  46. package/components/datepicker/demo/api.min.js +427 -2424
  47. package/components/datepicker/demo/index.md +65 -117
  48. package/components/datepicker/demo/index.min.js +427 -2424
  49. package/components/datepicker/demo/readme.html +3 -4
  50. package/components/datepicker/demo/readme.md +57 -61
  51. package/components/datepicker/dist/auro-calendar.d.ts +60 -34
  52. package/components/datepicker/dist/auro-datepicker.d.ts +31 -31
  53. package/components/datepicker/dist/index.js +256 -2253
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +256 -2253
  56. package/components/dropdown/README.md +78 -62
  57. package/components/dropdown/demo/api.js +4 -4
  58. package/components/dropdown/demo/api.md +520 -478
  59. package/components/dropdown/demo/api.min.js +48 -39
  60. package/components/dropdown/demo/index.md +65 -119
  61. package/components/dropdown/demo/index.min.js +38 -29
  62. package/components/dropdown/demo/readme.html +3 -4
  63. package/components/dropdown/demo/readme.md +78 -62
  64. package/components/dropdown/dist/auro-dropdown.d.ts +42 -33
  65. package/components/dropdown/dist/index.js +38 -29
  66. package/components/dropdown/dist/registered.js +38 -29
  67. package/components/form/README.md +16 -58
  68. package/components/form/demo/api.md +16 -21
  69. package/components/form/demo/api.min.js +13 -8
  70. package/components/form/demo/index.md +38 -39
  71. package/components/form/demo/index.min.js +13 -8
  72. package/components/form/demo/readme.md +16 -58
  73. package/components/form/dist/auro-form.d.ts +15 -3
  74. package/components/form/dist/index.js +13 -8
  75. package/components/form/dist/registered.js +13 -8
  76. package/components/input/README.md +55 -60
  77. package/components/input/demo/api.js +3 -5
  78. package/components/input/demo/api.md +558 -537
  79. package/components/input/demo/api.min.js +100 -113
  80. package/components/input/demo/index.js +0 -1
  81. package/components/input/demo/index.md +90 -203
  82. package/components/input/demo/index.min.js +85 -97
  83. package/components/input/demo/readme.html +3 -4
  84. package/components/input/demo/readme.md +55 -60
  85. package/components/input/dist/auro-input.d.ts +6 -5
  86. package/components/input/dist/base-input.d.ts +67 -68
  87. package/components/input/dist/index.js +85 -80
  88. package/components/input/dist/registered.js +85 -80
  89. package/components/menu/README.md +61 -61
  90. package/components/menu/demo/api.js +6 -8
  91. package/components/menu/demo/api.md +520 -572
  92. package/components/menu/demo/api.min.js +176 -92
  93. package/components/menu/demo/index.js +0 -5
  94. package/components/menu/demo/index.md +36 -119
  95. package/components/menu/demo/index.min.js +141 -96
  96. package/components/menu/demo/readme.html +3 -4
  97. package/components/menu/demo/readme.md +61 -61
  98. package/components/menu/dist/auro-menu.d.ts +70 -37
  99. package/components/menu/dist/auro-menuoption.d.ts +36 -11
  100. package/components/menu/dist/index.js +141 -45
  101. package/components/menu/dist/registered.js +141 -45
  102. package/components/radio/README.md +61 -57
  103. package/components/radio/demo/api.js +2 -2
  104. package/components/radio/demo/api.md +241 -170
  105. package/components/radio/demo/api.min.js +154 -77
  106. package/components/radio/demo/index.md +22 -99
  107. package/components/radio/demo/index.min.js +145 -68
  108. package/components/radio/demo/readme.html +3 -4
  109. package/components/radio/demo/readme.md +61 -57
  110. package/components/radio/dist/auro-radio-group.d.ts +67 -35
  111. package/components/radio/dist/auro-radio.d.ts +56 -33
  112. package/components/radio/dist/index.js +145 -68
  113. package/components/radio/dist/registered.js +145 -68
  114. package/components/select/README.md +68 -65
  115. package/components/select/demo/api.html +1 -0
  116. package/components/select/demo/api.js +7 -7
  117. package/components/select/demo/api.md +1305 -625
  118. package/components/select/demo/api.min.js +300 -199
  119. package/components/select/demo/index.html +0 -2
  120. package/components/select/demo/index.md +25 -833
  121. package/components/select/demo/index.min.js +299 -167
  122. package/components/select/demo/readme.html +3 -4
  123. package/components/select/demo/readme.md +68 -65
  124. package/components/select/dist/auro-select.d.ts +99 -90
  125. package/components/select/dist/index.js +158 -122
  126. package/components/select/dist/registered.js +158 -122
  127. package/package.json +3 -3
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>