diff --git a/README.md b/README.md
index 7605811..7231477 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ import "@aurodesignsystem/auro-radio";
```html
-` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `` that meets all use case and accessibility standards.
The following examples illustrate fully functional `` elements wrapped with the `` element. The `` element is REQUIRED in order to mantain the relationship between individual `` elements for functional radio button actions.
+
+**Note**: The `` element is only for to for use as a set of two or more `` elements within an `` element.
## API Code Examples
@@ -127,7 +129,7 @@ The following examples illustrate fully functional `` elements wrapp
```html
-
Form label goes here
-
diff --git a/apiExamples/basic2.html b/apiExamples/checked.html
similarity index 51%
rename from apiExamples/basic2.html
rename to apiExamples/checked.html
index 170a037..5b0be6a 100644
--- a/apiExamples/basic2.html
+++ b/apiExamples/checked.html
@@ -1,6 +1,6 @@
- Are you willing to volunteer resources?
- Volunteering is AWESOME!
- Sorry, I do not have the time or resources
- Please send me more information
+ Form label goes here
+ Yes
+ No
+ Maybe
diff --git a/apiExamples/customRadio.html b/apiExamples/customRadio.html
index 1420cb6..afdbd6a 100644
--- a/apiExamples/customRadio.html
+++ b/apiExamples/customRadio.html
@@ -1,6 +1,6 @@
Form label goes here
-
diff --git a/apiExamples/disabled.html b/apiExamples/disabled.html
index fff1889..c60979e 100644
--- a/apiExamples/disabled.html
+++ b/apiExamples/disabled.html
@@ -1,6 +1,14 @@
Form label goes here
-
+
+
+ Form label goes here
+
+
diff --git a/apiExamples/disabledGroup.html b/apiExamples/disabledGroup.html
deleted file mode 100644
index f07e24f..0000000
--- a/apiExamples/disabledGroup.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
- Form label goes here
-
diff --git a/apiExamples/dynamic.html b/apiExamples/dynamic.html
new file mode 100644
index 0000000..a700fcc
--- /dev/null
+++ b/apiExamples/dynamic.html
@@ -0,0 +1,3 @@
+
+ Form label goes here
+
diff --git a/apiExamples/dynamic.js b/apiExamples/dynamic.js
new file mode 100644
index 0000000..47e8a64
--- /dev/null
+++ b/apiExamples/dynamic.js
@@ -0,0 +1,16 @@
+export function dynamicExample() {
+ const values = ['Yes', 'No', 'Maybe'];
+ const radioGroup = document.getElementById('dynamicExample');
+
+ for (let i = 0; i < values.length; i++) {
+ const radio = document.createElement('auro-radio');
+
+ radio.id = `dynamicRadio${i}`;
+ radio.label = values[i];
+ radio.name = 'radioDemo';
+ radio.value = values[i];
+ radio.textContent = values[i];
+
+ radioGroup.appendChild(radio);
+ }
+}
diff --git a/apiExamples/error.html b/apiExamples/error.html
index 4e4b95a..ec4b469 100644
--- a/apiExamples/error.html
+++ b/apiExamples/error.html
@@ -1,6 +1,6 @@
-
+
Form label goes here
-
diff --git a/apiExamples/errorGroup.html b/apiExamples/errorGroup.html
deleted file mode 100644
index 086c5ca..0000000
--- a/apiExamples/errorGroup.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
- Form label goes here
-
diff --git a/apiExamples/horizontal.html b/apiExamples/horizontal.html
index 994a02e..04c751d 100644
--- a/apiExamples/horizontal.html
+++ b/apiExamples/horizontal.html
@@ -1,6 +1,6 @@
Form label goes here
-
diff --git a/apiExamples/optionalLabel.html b/apiExamples/optionalLabel.html
index d4df562..3817a2c 100644
--- a/apiExamples/optionalLabel.html
+++ b/apiExamples/optionalLabel.html
@@ -1,7 +1,7 @@
Form label goes here
(add custom label here)
-
diff --git a/apiExamples/required.html b/apiExamples/required.html
index 41da280..8f4a314 100644
--- a/apiExamples/required.html
+++ b/apiExamples/required.html
@@ -1,6 +1,6 @@
-
+
Form label goes here
-
diff --git a/demo/api.html b/demo/api.html
index 19ecb13..e0ec445 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -3,7 +3,7 @@
See LICENSE in the project root for license information.
HTML in this document is standardized and NOT to be edited.
- All demo code should be added/edited in ./demo/apiExamples.md
+ All demo code should be added/edited in ./demo/api.md
With the exception of adding custom elements if needed for the demo.
@@ -22,7 +22,6 @@
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
/>
` custom element. `
+The following example illustrates the default use of the `` custom element.
@@ -83,23 +90,23 @@ The following example illustrates the default use of the `` custom e
```html
-
### Default Group
-The following illustrates a default use of the `... /` pattern.
+This is a default configuration using the `` and `` elements. Notice the use of the `slot` attribute to set the group title of the ``.
Form label goes here
-
@@ -111,44 +118,83 @@ The following illustrates a default use of the `..
```html
Form label goes here
-
```
-### Disabled
+### Checked
-Use the `disabled` attribute to disable singular `` elements or the entire ``.
+Use the `checked` attribute to pre-select a `` element.
+
+
+
+
+
+ Form label goes here
+ Yes
+ No
+ Maybe
+
+
+
+ See code
+
+
-#### Group
+```html
+
+ Form label goes here
+ Yes
+ No
+ Maybe
+
+```
+
+
+
+### Disabled
-The `disabled` attribute used to disable the entire ``.
+Use the `disabled` attribute to disable singular `` elements or the entire ``.
-
-
+
+
+
+ Form label goes here
+
Form label goes here
-
See code
-
-
+
+
```html
+
+ Form label goes here
+
Form label goes here
-
```
@@ -156,40 +202,36 @@ The `disabled` attribute used to disable the entire ``.
### Error
-Use the `error` attribute to set an error state on the entire ``.
-
-#### Group
-
-The `error` attribute used to set an error state on the entire ``.
+Use the `error` attribute to set an error state on the entire ``.
-
-
+
+
Form label goes here
-
See code
-
-
+
+
```html
Form label goes here
-
```
-### horizontal
+### Horizontal Group
Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
@@ -200,9 +242,9 @@ Using the `horizontal` attribute will render the `auro-radio` elements in a hori
Form label goes here
-
@@ -214,9 +256,9 @@ Using the `horizontal` attribute will render the `auro-radio` elements in a hori
```html
Form label goes here
-
```
@@ -224,16 +266,16 @@ Using the `horizontal` attribute will render the `auro-radio` elements in a hori
### Required
-When present, the `required` attribute specifies that an `` within the `` must be checked.
+When present, the `required` attribute specifies that an `` within the `` must be checked. There is no error message associated with the `required` attribute by default. Use `setCustomValidityValueMissing` to set a custom error message.
-
+
Form label goes here
-
` within t
```html
-
+
Form label goes here
-
```
@@ -263,9 +305,9 @@ The `` supports an `optionalLabel` slot, where users can can o
Form label goes here
(add custom label here)
-
@@ -278,10 +320,59 @@ The `` supports an `optionalLabel` slot, where users can can o
Form label goes here
(add custom label here)
-
+```
+
+
+
+### Dynamic Example
+
+This example demonstrates a data drive approach to rendering `` buttons.
+
+**Note**: When dynamically creating `` elements, make sure to add an `id` attribute, as it is a required part of the HTML5 spec for all form elements.
+
+
+
+
+
+ Form label goes here
+
+
+
+ See code
+
+
+
+```html
+
+ Form label goes here
```
+
+
+
+```js
+export function dynamicExample() {
+ const values = ['Yes', 'No', 'Maybe'];
+ const radioGroup = document.getElementById('dynamicExample');
+
+ for (let i = 0; i < values.length; i++) {
+ const radio = document.createElement('auro-radio');
+
+ radio.id = `dynamicRadio${i}`;
+ radio.label = values[i];
+ radio.name = 'radioDemo';
+ radio.value = values[i];
+ radio.textContent = values[i];
+
+ radioGroup.appendChild(radio);
+ }
+}
+```
+
diff --git a/demo/api.min.js b/demo/api.min.js
new file mode 100644
index 0000000..818c1a2
--- /dev/null
+++ b/demo/api.min.js
@@ -0,0 +1,33 @@
+function dynamicExample() {
+ const values = ['Yes', 'No', 'Maybe'];
+ const radioGroup = document.getElementById('dynamicExample');
+
+ for (let i = 0; i < values.length; i++) {
+ const radio = document.createElement('auro-radio');
+
+ radio.id = `dynamicRadio${i}`;
+ radio.label = values[i];
+ radio.name = 'radioDemo';
+ radio.value = values[i];
+ radio.textContent = values[i];
+
+ radioGroup.appendChild(radio);
+ }
+}
+
+function initExamples(initCount) {
+ initCount = initCount || 0;
+
+ try {
+ dynamicExample();
+ } catch (error) {
+ if (initCount <= 20) {
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
+ setTimeout(() => {
+ initExamples(initCount + 1);
+ }, 100);
+ }
+ }
+}
+
+export { initExamples };
diff --git a/demo/index.html b/demo/index.html
index 0a8dc79..3f4e7e4 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,7 +3,7 @@
See LICENSE in the project root for license information.
HTML in this document is standardized and NOT to be edited.
- All demo code should be added/edited in ./demo/demo.md
+ All demo code should be added/edited in ./demo/index.md
With the exception of adding custom elements if needed for the demo.
@@ -23,7 +23,6 @@
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
/>