@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.0

package/components/radio/demo/api.md

@@ -0,0 +1,562 @@
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
+<!-- The below content is automatically added from ./../docs/api.md -->
+
+# auro-radio-group
+
+## Properties
+
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled)                      | `disabled`                      | `boolean` | false       |                                                  |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       |                                                  |
+| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| [onDark](#onDark)                        | `onDark`                        | `Boolean` | false       | Applies dark mode styles to the component.       |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected radio button.     |
+| [required](#required)                      | `required`                      | `Boolean` | false       | Populates the `required` attribute on the element. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `string`  | "undefined" |                                                  |
+
+## Methods
+
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+
+## Events
+
+| Event                       | Type               | Description                                      |
+|-----------------------------|--------------------|--------------------------------------------------|
+| `auroFormElement-validated` |                    | Notifies that the element has been validated.    |
+| [input](#input)                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
+
+## Slots
+
+| Name            | Description                                     |
+|-----------------|-------------------------------------------------|
+| [helpText](#helpText)      | Allows for the helper text to be overridden.    |
+| [legend](#legend)        | Allows for the legend to be overridden.         |
+| [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. |
+
+## CSS Shadow Parts
+
+| Part          | Description                                      |
+|---------------|--------------------------------------------------|
+| `radio-group` | Apply css to the fieldset element in the shadow DOM |
+
+# auro-radio
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| [checked](#checked)  | `checked`  | `Boolean` | false   | If set to true, the radio button will be filled. |
+| [disabled](#disabled) | `disabled` | `Boolean` | false   | If set to true, the radio button will be non-clickable. |
+| [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the radio button. |
+| [id](#id)       | `id`       | `string`  |         | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [label](#label)    | `label`    | `string`  |         |                                                  |
+| [name](#name)     | `name`     | `string`  |         |                                                  |
+| [onDark](#onDark)   | `onDark`   | `Boolean` | false   | If set to true, the component will render with a dark theme. |
+| [required](#required) | `required` | `Boolean` | false   | Defines element as required.                     |
+| [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
+| [value](#value)    | `value`    | `string`  |         |                                                  |
+
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
+## Events
+
+| Event                | Type               | Description                                      |
+|----------------------|--------------------|--------------------------------------------------|
+| `auroRadio-blur`     | `CustomEvent<any>` | Notifies that the component has lost focus.      |
+| `auroRadio-selected` | `CustomEvent<any>` | Notifies that the component has been marked as checked/selected. |
+| [focusSelected](#focusSelected)      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
+| [resetRadio](#resetRadio)         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
+| [toggleSelected](#toggleSelected)     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Examples
+
+### Default
+
+The following example illustrates the default use of the `<auro-radio>` custom element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" onDark></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes" onDark></auro-radio>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+
+### Default Group
+
+This is a default configuration using the `<auro-radio-group>` and `<auro-radio>` elements. Notice the use of the `slot` attribute to set the group title of the `<auro-radio-group>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basicGroup.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicGroup.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/basicGroup.html -->
+  ```html
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Checked
+
+Use the `checked` attribute to pre-select a `<auro-radio>` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/checked.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+    <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkChecked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkChecked.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+    <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checked.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/checked.html -->
+  ```html
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+    <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkChecked.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkChecked.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+    <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+    <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Disabled
+
+Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <auro-radio-group disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <auro-radio-group onDark disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+  ```html
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <auro-radio-group disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
+  <auro-radio-group onDark>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="disabledRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <auro-radio-group onDark disabled>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
+    <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Error
+
+Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
+
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/error.html -->
+  <auro-radio-group error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+  <auro-radio-group onDark error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+  <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+  ```html
+  <auro-radio-group error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
+  <auro-radio-group onDark error="There is an error with this form entry">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Horizontal Group
+
+Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
+
+**Note**: Using the horizontal attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/horizontal.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/horizontal.html -->
+  <auro-radio-group horizontal>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/horizontal.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/horizontal.html -->
+
+```html
+<auro-radio-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Required
+
+When present, the `required` attribute specifies that an `<auro-radio>` within the `<auro-radio-group>` must be checked. There is no error message associated with the `required` attribute by default. Use `setCustomValidityValueMissing` to set a custom error message.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/required.html -->
+  <auro-radio-group required setCustomValidityValueMissing="value missing">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
+
+```html
+<auro-radio-group required setCustomValidityValueMissing="value missing">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Custom optional label
+
+The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <span slot="optionalLabel">(add custom label here)</span>
+    <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <span slot="optionalLabel">(add custom label here)</span>
+  <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Reset State
+
+Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dynamic Example
+
+This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.
+
+**Note**: When dynamically creating `<auro-radio>` elements, make sure to add an `id` attribute, as it is a required part of the HTML5 spec for all form elements.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dynamic.html -->
+  <auro-radio-group required id="dynamicExample">
+    <span slot="legend">Form label goes here</span>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic.html -->
+
+```html
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic.js -->
+
+```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);
+  }
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
+
+```scss
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+
+:host {
+  // auro-radio-group colors
+  --ds-auro-radio-group-label-color: inherit;
+
+  // auro-radio colors
+  --ds-auro-radio-btn-border-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
+  --ds-auro-radio-btn-fill-color: transparent;
+  --ds-auro-radio-btn-inset-color: transparent;
+  --ds-auro-radio-label-color: inherit;
+  --ds-auro-radio-tap-color: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->