diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md
index 91bcb07ce..aca7da590 100644
--- a/packages/checkbox-group/README.md
+++ b/packages/checkbox-group/README.md
@@ -35,23 +35,3 @@ import '@lion/checkbox-group/lion-checkbox-group.js';
```
-
-### Model value
-
-The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
-
-Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
-
-Then the `modelValue` of the `lion-checkbox-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-checkbox-group');
-groupElement.modelValue;
- => ["Archimedes", "Marie Curie"];
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
diff --git a/packages/checkbox-group/src/LionCheckboxGroup.js b/packages/checkbox-group/src/LionCheckboxGroup.js
index e13ad3142..4a3e1046b 100644
--- a/packages/checkbox-group/src/LionCheckboxGroup.js
+++ b/packages/checkbox-group/src/LionCheckboxGroup.js
@@ -1,6 +1,11 @@
import { ChoiceGroupMixin } from '@lion/choice-input';
import { LionFieldset } from '@lion/fieldset';
+/**
+ * A wrapper around multiple checkboxes
+ *
+ * @extends {LionFieldset}
+ */
export class LionCheckboxGroup extends ChoiceGroupMixin(LionFieldset) {
constructor() {
super();
diff --git a/packages/checkbox-group/stories/index.stories.mdx b/packages/checkbox-group/stories/index.stories.mdx
index 83fe47991..f5397e413 100644
--- a/packages/checkbox-group/stories/index.stories.mdx
+++ b/packages/checkbox-group/stories/index.stories.mdx
@@ -56,7 +56,29 @@ import '@lion/checkbox/lion-checkbox.js';
import '@lion/checkbox-group/lion-checkbox-group.js';
```
-## Pre-select
+### Model value
+
+The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
+
+Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
+
+Then the `modelValue` of the `lion-checkbox-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-checkbox-group');
+groupElement.modelValue;
+ => ["Archimedes", "Marie Curie"];
+```
+
+### The `name` attribute
+
+The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
+
+## Examples
+
+### Pre-select
You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
@@ -98,7 +120,7 @@ You can pre-select options by targeting the `modelValue` object of the option an
```
-## Disabled
+### Disabled
You can disable the entire group by setting the `disabled` attribute on the ``.
@@ -138,7 +160,7 @@ You can disable the entire group by setting the `disabled` attribute on the `
```
-## Validation
+### Validation
You can apply validation to the ``, similar to how you would do so in any fieldset.
The interaction states of the `` are evaluated in order to hide or show feedback messages.
@@ -207,8 +229,7 @@ const validate = () => {
```
-
-## Validation advanced
+### Validation advanced
Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index e8bd615db..78cc2cd8e 100644
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
@@ -35,23 +35,3 @@ import '@lion/radio-group/lion-radio-group.js';
- Make sure that to use a name attribute as it is necessary for the [lion-form](../form)'s serialization result.
- If you have many options for a user to pick from, consider using [`lion-select`](../select) instead
-
-### Model value
-
-The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
-
-Given the dinosaur example above, say that we were to select the last option (diplodocus).
-
-Then the `modelValue` of the `lion-radio-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-radio-group');
-groupElement.modelValue;
- => "diplodocus";
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
diff --git a/packages/radio-group/src/LionRadioGroup.js b/packages/radio-group/src/LionRadioGroup.js
index 0ef441658..080441e57 100644
--- a/packages/radio-group/src/LionRadioGroup.js
+++ b/packages/radio-group/src/LionRadioGroup.js
@@ -2,31 +2,13 @@ import { ChoiceGroupMixin } from '@lion/choice-input';
import { LionFieldset } from '@lion/fieldset';
/**
- * LionRadioGroup: extends the lion-fieldset
+ * A wrapper around multiple radios.
*
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- * You can preselect an option by setting marking an lion-radio checked.
- * Example:
- *
- *
- * It extends LionFieldset so it inherits it's features.
- *
- *
- * @customElement lion-radio-group
* @extends {LionFieldset}
*/
-
export class LionRadioGroup extends ChoiceGroupMixin(LionFieldset) {
connectedCallback() {
+ // eslint-disable-next-line wc/guard-super-call
super.connectedCallback();
this._setRole('radiogroup');
}
diff --git a/packages/radio-group/stories/index.stories.mdx b/packages/radio-group/stories/index.stories.mdx
index c5c432f96..5bc947955 100644
--- a/packages/radio-group/stories/index.stories.mdx
+++ b/packages/radio-group/stories/index.stories.mdx
@@ -52,9 +52,30 @@ import '@lion/radio/lion-radio.js';
import '@lion/radio-group/lion-radio-group.js';
```
+
+### Model value
+
+The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
+
+Given the dinosaur example above, say that we were to select the last option (diplodocus).
+
+Then the `modelValue` of the `lion-radio-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-radio-group');
+groupElement.modelValue;
+ => "diplodocus";
+```
+
+### The `name` attribute
+
+The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
+
## Examples
-## Pre-select
+### Pre-select
You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
@@ -76,7 +97,7 @@ You can pre-select an option by adding the checked attribute to the selected `li
```
-## Disabled
+### Disabled
You can disable a specific `lion-radio` option by adding the `disabled` attribute.
@@ -118,7 +139,7 @@ You can do the same thing for the entire group by setting the `disabled` attribu
```
-## Validation
+### Validation
{() => {