diff --git a/packages/webawesome/src/components/details/details.test.ts b/packages/webawesome/src/components/details/details.test.ts
index 75bba1a17..7ceb952dd 100644
--- a/packages/webawesome/src/components/details/details.test.ts
+++ b/packages/webawesome/src/components/details/details.test.ts
@@ -24,6 +24,13 @@ describe('<wa-details>', () => {
         });
       });
 
+      it('should reflect the name property', async () => {
+        const el = await fixture<WaDetails>(html`<wa-details></wa-details>`);
+        el.name = 'test'
+        await el.updateComplete;
+        expect(el.getAttribute('name')).to.equal('test');
+      });
+
       it('should be visible with the open attribute', async () => {
         const el = await fixture<WaDetails>(html`
           <wa-details open>
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 13ad982cf..3b1799d82 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -70,7 +70,7 @@ export default class WaDetails extends WebAwesomeElement {
   @property() summary: string;
 
   /** Groups related details elements. When one opens, others with the same name will close. */
-  @property() name: string;
+  @property({ reflect: true }) name: string;
 
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;