From 0c6060eae799d65892ea51945e9c91ffa0710fe3 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 12:33:39 -0500
Subject: [PATCH 01/10] Add required attribute to radio group and radio

---
 docs/components/radio-group.md            | 44 +++++++++++++++++++++++
 src/components/radio-group/radio-group.ts | 23 ++++++++++++
 src/components/radio/radio.ts             |  4 +++
 3 files changed, 71 insertions(+)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index 0f784721..e879eb85 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -49,4 +49,48 @@ const App = () => (
   </SlRadioGroup>
 );
 ```
+
+### Using the required attribute
+
+Adding a `required` attribute to `sl-radio-group` will require at least one option to be selected.
+
+```html preview
+<sl-radio-group id="radio-group1" label="Select an option" fieldset required>
+  <sl-radio value="1" name="foo">Option 1</sl-radio>
+  <sl-radio value="2" name="foo">Option 2</sl-radio>
+  <sl-radio value="3" name="foo">Option 3</sl-radio>
+</sl-radio-group>
+
+<br />
+
+<sl-button id="group1">Validate Group</sl-button>
+
+<script>
+  const button = document.getElementById('group1');
+  const group = document.getElementById('radio-group1');
+
+  button.addEventListener('click', ()=> group.reportValidity())
+</script>
+```
+
+Alternatively, if any of the `sl-radio` elements has a `required` attribute, `sl-radio-group` mimics the behaviour of the browser and will require at least one selection from the group.
+
+```html preview
+<sl-radio-group id="radio-group2" label="Select an option" fieldset>
+  <sl-radio value="1" name="foo" required>Option 1</sl-radio>
+  <sl-radio value="2" name="foo">Option 2</sl-radio>
+  <sl-radio value="3" name="foo">Option 3</sl-radio>
+</sl-radio-group>
+
+<br />
+
+<sl-button id="group2">Validate Group</sl-button>
+
+<script>
+  const button = document.getElementById('group2');
+  const group = document.getElementById('radio-group2');
+
+  button.addEventListener('click', ()=> group.reportValidity())
+</script>
+```
 [component-metadata:sl-radio-group]
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index f306ac82..a444471d 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -26,6 +26,9 @@ export default class SlRadioGroup extends LitElement {
   /** Shows the fieldset and legend that surrounds the radio group. */
   @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
 
+  /** Indicates that a selection is required. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
   handleFocusIn() {
     // When tabbing into the fieldset, make sure it lands on the checked radio
     requestAnimationFrame(() => {
@@ -39,6 +42,26 @@ export default class SlRadioGroup extends LitElement {
     });
   }
 
+  reportValidity() {
+    const radios = [...(this.defaultSlot.assignedElements({ flatten: true }) as SlRadio[])];
+    let isChecked = true;
+
+    // Set required to true if any of the radio elements are required
+    this.required = this.required || radios.some(el => el.required);
+
+    if (this.required && radios.length > 0) {
+      isChecked = radios.some(el => el.checked);
+
+      if (!isChecked) {
+        radios[0].required = true;
+        // Trigger validity message on first input
+        radios[0].reportValidity();
+      }
+    }
+
+    return isChecked;
+  }
+
   render() {
     return html`
       <fieldset
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 79690c20..916d200d 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -47,6 +47,9 @@ export default class SlRadio extends LitElement {
   /** Draws the radio in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
 
+  /** Indicates that a selection is required. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
   /**
    * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
    * provided by the `setCustomValidity` method.
@@ -161,6 +164,7 @@ export default class SlRadio extends LitElement {
           type="radio"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
+          ?required=${this.required}
           .checked=${live(this.checked)}
           .disabled=${this.disabled}
           aria-checked=${this.checked ? 'true' : 'false'}

From 989e368fb406cba746e59035dad0a5996d451a16 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 14:05:14 -0500
Subject: [PATCH 02/10] Remove required on sl-radio checks from sl-radio-group

---
 docs/components/radio-group.md            | 36 +++++++++--------------
 src/components/radio-group/radio-group.ts | 10 +++----
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index e879eb85..bd3a0ef2 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -55,7 +55,7 @@ const App = () => (
 Adding a `required` attribute to `sl-radio-group` will require at least one option to be selected.
 
 ```html preview
-<sl-radio-group id="radio-group1" label="Select an option" fieldset required>
+<sl-radio-group class="required-radio-group" label="Select an option" fieldset required>
   <sl-radio value="1" name="foo">Option 1</sl-radio>
   <sl-radio value="2" name="foo">Option 2</sl-radio>
   <sl-radio value="3" name="foo">Option 3</sl-radio>
@@ -63,34 +63,26 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
 
 <br />
 
-<sl-button id="group1">Validate Group</sl-button>
+<sl-button class="required-button">Validate Group</sl-button>
 
 <script>
-  const button = document.getElementById('group1');
-  const group = document.getElementById('radio-group1');
+  const button = document.querySelector('sl-button.required-button');
+  const group = document.querySelector('sl-radio-group.required-radio-group');
 
   button.addEventListener('click', ()=> group.reportValidity())
 </script>
 ```
 
-Alternatively, if any of the `sl-radio` elements has a `required` attribute, `sl-radio-group` mimics the behaviour of the browser and will require at least one selection from the group.
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
-```html preview
-<sl-radio-group id="radio-group2" label="Select an option" fieldset>
-  <sl-radio value="1" name="foo" required>Option 1</sl-radio>
-  <sl-radio value="2" name="foo">Option 2</sl-radio>
-  <sl-radio value="3" name="foo">Option 3</sl-radio>
-</sl-radio-group>
-
-<br />
-
-<sl-button id="group2">Validate Group</sl-button>
-
-<script>
-  const button = document.getElementById('group2');
-  const group = document.getElementById('radio-group2');
-
-  button.addEventListener('click', ()=> group.reportValidity())
-</script>
+const App = () => (
+  <SlRadioGroup label="Select an option" fieldset>
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
 ```
+
 [component-metadata:sl-radio-group]
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index a444471d..2ab38862 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -46,16 +46,16 @@ export default class SlRadioGroup extends LitElement {
     const radios = [...(this.defaultSlot.assignedElements({ flatten: true }) as SlRadio[])];
     let isChecked = true;
 
-    // Set required to true if any of the radio elements are required
-    this.required = this.required || radios.some(el => el.required);
-
     if (this.required && radios.length > 0) {
       isChecked = radios.some(el => el.checked);
 
       if (!isChecked) {
+        // This is hacky...
         radios[0].required = true;
-        // Trigger validity message on first input
-        radios[0].reportValidity();
+
+        setTimeout(() => {
+          radios[0].reportValidity();
+        }, 0);
       }
     }
 

From dfaabeead23dbcdc004e8a2aefc50759707cef11 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 14:20:33 -0500
Subject: [PATCH 03/10] Clean up react example

---
 docs/components/radio-group.md | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index bd3a0ef2..e11734f4 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -60,9 +60,7 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
   <sl-radio value="2" name="foo">Option 2</sl-radio>
   <sl-radio value="3" name="foo">Option 3</sl-radio>
 </sl-radio-group>
-
 <br />
-
 <sl-button class="required-button">Validate Group</sl-button>
 
 <script>
@@ -75,13 +73,20 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
 
 ```jsx react
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
-
+const validateGroup = () => {
+  const group = document.querySelector('sl-radio-group.required-radio-group');
+  group.reportValidity();
+}
 const App = () => (
-  <SlRadioGroup label="Select an option" fieldset>
-    <SlRadio value="1" checked>Option 1</SlRadio>
-    <SlRadio value="2">Option 2</SlRadio>
-    <SlRadio value="3">Option 3</SlRadio>
-  </SlRadioGroup>
+  <>
+    <SlRadioGroup label="Select an option" fieldset required>
+      <SlRadio value="1" checked>Option 1</SlRadio>
+      <SlRadio value="2">Option 2</SlRadio>
+      <SlRadio value="3">Option 3</SlRadio>
+    </SlRadioGroup>
+    <br />
+    <sl-button class="required-button" onClick={()=> validateGroup()}>Validate Group</sl-button>
+  </>
 );
 ```
 

From d4c41a2b2746040b4f5b177b0654831757299f9c Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 14:46:10 -0500
Subject: [PATCH 04/10] Move selection logic from radio to radio group

---
 src/components/radio-group/radio-group.ts | 40 +++++++++++++++++++++++
 src/components/radio/radio.ts             | 35 +-------------------
 2 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 2ab38862..ef5ec4bc 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -29,6 +29,23 @@ export default class SlRadioGroup extends LitElement {
   /** Indicates that a selection is required. */
   @property({ type: Boolean, reflect: true }) required = false;
 
+  constructor() {
+    super();
+    this.addEventListener('sl-change', this.syncRadioButtons);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('sl-change', this.syncRadioButtons);
+  }
+
+  syncRadioButtons(ev: CustomEvent) {
+    const currentRadio = ev.target;
+    const radios = this.getAllRadios().filter(el => !el.disabled && el !== currentRadio);
+    radios.forEach(el => {
+      el.checked = false;
+    });
+  }
+
   handleFocusIn() {
     // When tabbing into the fieldset, make sure it lands on the checked radio
     requestAnimationFrame(() => {
@@ -42,6 +59,28 @@ export default class SlRadioGroup extends LitElement {
     });
   }
 
+  getAllRadios(): SlRadio[] {
+    return [...this.querySelectorAll('sl-radio')];
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      const radios = this.getAllRadios().filter(radio => !radio.disabled);
+      const currentIndex = radios.findIndex(el => el.checked);
+
+      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+      let index = currentIndex + incr;
+      if (index < 0) index = radios.length - 1;
+      if (index > radios.length - 1) index = 0;
+
+      this.getAllRadios().map(radio => (radio.checked = false));
+      radios[index].focus();
+      radios[index].checked = true;
+
+      event.preventDefault();
+    }
+  }
+
   reportValidity() {
     const radios = [...(this.defaultSlot.assignedElements({ flatten: true }) as SlRadio[])];
     let isChecked = true;
@@ -72,6 +111,7 @@ export default class SlRadioGroup extends LitElement {
         })}
         role="radiogroup"
         @focusin=${this.handleFocusIn}
+        @keydown=${this.handleKeyDown}
       >
         <legend part="label" class="radio-group__label">
           <slot name="label">${this.label}</slot>
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 916d200d..dcb8c8e2 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -82,21 +82,6 @@ export default class SlRadio extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
-  getAllRadios() {
-    const radioGroup = this.closest('sl-radio-group');
-
-    // Radios must be part of a radio group
-    if (!radioGroup) {
-      return [this];
-    }
-
-    return [...radioGroup.querySelectorAll('sl-radio')].filter((radio: this) => radio.name === this.name) as this[];
-  }
-
-  getSiblingRadios() {
-    return this.getAllRadios().filter(radio => radio !== this) as this[];
-  }
-
   handleBlur() {
     this.hasFocus = false;
     emit(this, 'sl-blur');
@@ -105,7 +90,7 @@ export default class SlRadio extends LitElement {
   @watch('checked', { waitUntilFirstUpdate: true })
   handleCheckedChange() {
     if (this.checked) {
-      this.getSiblingRadios().map(radio => (radio.checked = false));
+      emit(this, 'sl-change');
     }
   }
 
@@ -128,23 +113,6 @@ export default class SlRadio extends LitElement {
     emit(this, 'sl-focus');
   }
 
-  handleKeyDown(event: KeyboardEvent) {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      const radios = this.getAllRadios().filter(radio => !radio.disabled);
-      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-      let index = radios.indexOf(this) + incr;
-      if (index < 0) index = radios.length - 1;
-      if (index > radios.length - 1) index = 0;
-
-      this.getAllRadios().map(radio => (radio.checked = false));
-      radios[index].focus();
-      radios[index].checked = true;
-      emit(radios[index], 'sl-change');
-
-      event.preventDefault();
-    }
-  }
-
   render() {
     return html`
       <label
@@ -156,7 +124,6 @@ export default class SlRadio extends LitElement {
           'radio--focused': this.hasFocus
         })}
         for=${this.inputId}
-        @keydown=${this.handleKeyDown}
       >
         <input
           id=${this.inputId}

From b36d2edfdee8eb2e66899c096447168f0fcbcb77 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 17:17:31 -0500
Subject: [PATCH 05/10] Clean up tests

---
 .../radio-group/radio-group.test.ts           | 88 +++++++++++++++++++
 src/components/radio/radio.test.ts            | 17 ----
 src/components/radio/radio.ts                 |  7 --
 3 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 src/components/radio-group/radio-group.test.ts

diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
new file mode 100644
index 00000000..60f58ebc
--- /dev/null
+++ b/src/components/radio-group/radio-group.test.ts
@@ -0,0 +1,88 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '../../../dist/shoelace.js';
+import type SlRadio from '../radio/radio';
+import type SlRadioGroup from './radio-group';
+
+describe('<sl-radio-group>', () => {
+  it('should toggle selected radio when toggled via keyboard - arrow right key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1" checked></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowRight' });
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow down key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1" checked></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowDown' });
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow left key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2" checked></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+  });
+
+  it('should toggle selected radio when toggled via keyboard - arrow up key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2" checked></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+
+    expect(radio2.checked).to.be.true;
+    expect(radio1.checked).to.be.false;
+
+    radio1.focus();
+    await sendKeys({ press: 'ArrowUp' });
+
+    expect(radio2.checked).to.be.false;
+    expect(radio1.checked).to.be.true;
+  });
+});
diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts
index f76c1288..37dbd3bb 100644
--- a/src/components/radio/radio.test.ts
+++ b/src/components/radio/radio.test.ts
@@ -37,23 +37,6 @@ describe('<sl-radio>', () => {
     expect(el.checked).to.be.true;
   });
 
-  it('should fire sl-change when toggled via keyboard - arrow key', async () => {
-    const radioGroup = await fixture<SlRadioGroup>(html`
-      <sl-radio-group>
-        <sl-radio id="radio-1"></sl-radio>
-        <sl-radio id="radio-2"></sl-radio>
-      </sl-radio-group>
-    `);
-    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
-    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
-    const input1 = radio1.shadowRoot?.querySelector('input');
-    input1.focus();
-    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
-    const event = await oneEvent(radio2, 'sl-change');
-    expect(event.target).to.equal(radio2);
-    expect(radio2.checked).to.be.true;
-  });
-
   it('should not fire sl-change when checked is set by javascript', async () => {
     const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
     el.addEventListener('sl-change', () => expect.fail('event fired'));
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index dcb8c8e2..a36d018a 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -87,13 +87,6 @@ export default class SlRadio extends LitElement {
     emit(this, 'sl-blur');
   }
 
-  @watch('checked', { waitUntilFirstUpdate: true })
-  handleCheckedChange() {
-    if (this.checked) {
-      emit(this, 'sl-change');
-    }
-  }
-
   handleClick() {
     this.checked = true;
     emit(this, 'sl-change');

From 2ace7d41610aa644a9354b49c8b645a1e23aefe2 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <Trendy@users.noreply.github.com>
Date: Mon, 22 Nov 2021 18:10:45 -0500
Subject: [PATCH 06/10] Update src/components/radio-group/radio-group.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 src/components/radio-group/radio-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index ef5ec4bc..a43a78df 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -38,7 +38,7 @@ export default class SlRadioGroup extends LitElement {
     this.removeEventListener('sl-change', this.syncRadioButtons);
   }
 
-  syncRadioButtons(ev: CustomEvent) {
+  syncRadioButtons(event: CustomEvent) {
     const currentRadio = ev.target;
     const radios = this.getAllRadios().filter(el => !el.disabled && el !== currentRadio);
     radios.forEach(el => {

From 6eb79aacdb938655b7e5c770103282af58e2af25 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 18:58:43 -0500
Subject: [PATCH 07/10] Review feedback updates

---
 docs/components/radio-group.md            |  7 +++-
 src/components/radio-group/radio-group.ts | 47 ++++++++++++++++++++---
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index e11734f4..957d125c 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -42,7 +42,7 @@ You can show a fieldset and legend that wraps the radio group using the `fieldse
 import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlRadioGroup label="Select an option" fieldset>
+  <SlRadioGroup label="Select an option" fieldset value="1">
     <SlRadio value="1" checked>Option 1</SlRadio>
     <SlRadio value="2">Option 2</SlRadio>
     <SlRadio value="3">Option 3</SlRadio>
@@ -62,12 +62,15 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
 </sl-radio-group>
 <br />
 <sl-button class="required-button">Validate Group</sl-button>
+<sl-button class="required-reset-button">Reset Group</sl-button>
 
 <script>
   const button = document.querySelector('sl-button.required-button');
+  const resetButton = document.querySelector('sl-button.required-reset-button');
   const group = document.querySelector('sl-radio-group.required-radio-group');
 
-  button.addEventListener('click', ()=> group.reportValidity())
+  button.addEventListener('click', ()=> group.reportValidity());
+  resetButton.addEventListener('click', () => { group.value = ''})
 </script>
 ```
 
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index a43a78df..3c738943 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -17,20 +17,40 @@ import styles from './radio-group.styles';
 @customElement('sl-radio-group')
 export default class SlRadioGroup extends LitElement {
   static styles = styles;
+  private _value: string;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
 
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
   @property() label = '';
 
+  set value(newValue) {
+    const index = this.getAllRadios().findIndex(el => el.value === newValue);
+    const oldValue = this._value;
+
+    if (index > -1) {
+      this.checkRadioByIndex(index);
+      this._value = newValue;
+      this.requestUpdate('value', oldValue);
+    } else {
+      this._value = '';
+      this.deselectAll();
+    }
+  }
+
+  /** The current value of the radio group. */
+  @property()
+  get value() {
+    return this._value;
+  }
+
   /** Shows the fieldset and legend that surrounds the radio group. */
   @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
 
   /** Indicates that a selection is required. */
   @property({ type: Boolean, reflect: true }) required = false;
 
-  constructor() {
-    super();
+  connectedCallback() {
     this.addEventListener('sl-change', this.syncRadioButtons);
   }
 
@@ -39,7 +59,7 @@ export default class SlRadioGroup extends LitElement {
   }
 
   syncRadioButtons(event: CustomEvent) {
-    const currentRadio = ev.target;
+    const currentRadio = event.target;
     const radios = this.getAllRadios().filter(el => !el.disabled && el !== currentRadio);
     radios.forEach(el => {
       el.checked = false;
@@ -63,6 +83,23 @@ export default class SlRadioGroup extends LitElement {
     return [...this.querySelectorAll('sl-radio')];
   }
 
+  checkRadioByIndex(index: number): SlRadio[] {
+    const radios = this.deselectAll();
+
+    radios[index].focus();
+    radios[index].checked = true;
+    this._value = radios[index].value;
+
+    return radios;
+  }
+
+  deselectAll(): SlRadio[] {
+    return this.getAllRadios().map(radio => {
+      radio.checked = false;
+      return radio;
+    });
+  }
+
   handleKeyDown(event: KeyboardEvent) {
     if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       const radios = this.getAllRadios().filter(radio => !radio.disabled);
@@ -73,9 +110,7 @@ export default class SlRadioGroup extends LitElement {
       if (index < 0) index = radios.length - 1;
       if (index > radios.length - 1) index = 0;
 
-      this.getAllRadios().map(radio => (radio.checked = false));
-      radios[index].focus();
-      radios[index].checked = true;
+      this.checkRadioByIndex(index);
 
       event.preventDefault();
     }

From cfa800c1cd58242cb5e7005f325402b1fcddbd1c Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 19:18:07 -0500
Subject: [PATCH 08/10] Fix getter

---
 src/components/radio-group/radio-group.ts | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 3c738943..dfc5b282 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -24,6 +24,14 @@ export default class SlRadioGroup extends LitElement {
   /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
   @property() label = '';
 
+  /** The current value of the radio group. */
+  @property()
+  get value() {
+    if (!this._value) return this.getCurrentValue();
+
+    return this._value;
+  }
+
   set value(newValue) {
     const index = this.getAllRadios().findIndex(el => el.value === newValue);
     const oldValue = this._value;
@@ -38,12 +46,6 @@ export default class SlRadioGroup extends LitElement {
     }
   }
 
-  /** The current value of the radio group. */
-  @property()
-  get value() {
-    return this._value;
-  }
-
   /** Shows the fieldset and legend that surrounds the radio group. */
   @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
 
@@ -66,6 +68,12 @@ export default class SlRadioGroup extends LitElement {
     });
   }
 
+  getCurrentValue() {
+    const valRadio = this.getAllRadios().filter(el => el.checked);
+    this._value = valRadio.length === 1 ? valRadio[0].value : '';
+    return this._value;
+  }
+
   handleFocusIn() {
     // When tabbing into the fieldset, make sure it lands on the checked radio
     requestAnimationFrame(() => {

From 3141590d28d416247e7d72fc4f09006b8a1256bd Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 19:27:12 -0500
Subject: [PATCH 09/10] Update react example

---
 docs/components/radio-group.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
index 957d125c..17241de5 100644
--- a/docs/components/radio-group.md
+++ b/docs/components/radio-group.md
@@ -80,6 +80,12 @@ const validateGroup = () => {
   const group = document.querySelector('sl-radio-group.required-radio-group');
   group.reportValidity();
 }
+
+const resetGroup = () => {
+  const group = document.querySelector('sl-radio-group.required-radio-group');
+  group.value = "";
+}
+
 const App = () => (
   <>
     <SlRadioGroup label="Select an option" fieldset required>
@@ -89,6 +95,7 @@ const App = () => (
     </SlRadioGroup>
     <br />
     <sl-button class="required-button" onClick={()=> validateGroup()}>Validate Group</sl-button>
+    <sl-button class="required-button" onClick={()=> resetGroup()}>Reset Group</sl-button>
   </>
 );
 ```

From e9f7c5ed5aeb88a0be473884ed240a5ff2f594f8 Mon Sep 17 00:00:00 2001
From: Jeremiah Hoyet <jerhoyet@gmail.com>
Date: Mon, 22 Nov 2021 19:30:51 -0500
Subject: [PATCH 10/10] Make the default the same as the getter default

---
 src/components/radio-group/radio-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index dfc5b282..e3aca1ef 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -17,7 +17,7 @@ import styles from './radio-group.styles';
 @customElement('sl-radio-group')
 export default class SlRadioGroup extends LitElement {
   static styles = styles;
-  private _value: string;
+  private _value: string = '';
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;