From bbd6988fdb46336eadeb7359fdea274e819e384e Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Fri, 9 May 2025 16:07:32 +0100
Subject: [PATCH 1/5] forced `for` attribute in `Hds::Form::Label` to be a
 string

---
 packages/components/src/components/hds/form/label/index.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/hds/form/label/index.hbs b/packages/components/src/components/hds/form/label/index.hbs
index f272d3951f2..5acff47bf86 100644
--- a/packages/components/src/components/hds/form/label/index.hbs
+++ b/packages/components/src/components/hds/form/label/index.hbs
@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<label class={{this.classNames}} for={{@controlId}} id={{this.id}} ...attributes>
+<label class={{this.classNames}} for="{{@controlId}}" id={{this.id}} ...attributes>
   {{yield}}
   <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
 </label>
\ No newline at end of file

From 0496be74e8b09a5c475b1fc33a49298c1f0d52ae Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Fri, 9 May 2025 16:08:21 +0100
Subject: [PATCH 2/5] added special use case for `Hds::Form::Radio::Group` with
 boolean values to showcase

---
 .../app/templates/components/form/radio.hbs     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/showcase/app/templates/components/form/radio.hbs b/showcase/app/templates/components/form/radio.hbs
index c0f9e2f28bd..0faac7c9774 100644
--- a/showcase/app/templates/components/form/radio.hbs
+++ b/showcase/app/templates/components/form/radio.hbs
@@ -327,4 +327,21 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H3>Special cases</Shw::Text::H3>
+
+  <Shw::Flex as |SF|>
+    <SF.Item as |SFI|>
+      <SFI.Label>With <code>true/false</code> as boolean values</SFI.Label>
+      <Hds::Form::Radio::Group @name="control-booleans" as |G|>
+        {{#let (array true false) as |bools|}}
+          {{#each bools as |bool|}}
+            <G.RadioField @id={{bool}} @value={{bool}} as |F|>
+              <F.Label>{{bool}}</F.Label>
+            </G.RadioField>
+          {{/each}}
+        {{/let}}
+      </Hds::Form::Radio::Group>
+    </SF.Item>
+  </Shw::Flex>
+
 </section>
\ No newline at end of file

From 4d8d2af8cb167d8c2c2767a7808324f8305fc000 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Fri, 9 May 2025 16:14:53 +0100
Subject: [PATCH 3/5] added integration test for `Hds::Form::Label` for use
 case when `@controlId` is a boolean

---
 .../components/hds/form/label/index-test.js            | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/showcase/tests/integration/components/hds/form/label/index-test.js b/showcase/tests/integration/components/hds/form/label/index-test.js
index a366e27aecb..95828aa6346 100644
--- a/showcase/tests/integration/components/hds/form/label/index-test.js
+++ b/showcase/tests/integration/components/hds/form/label/index-test.js
@@ -66,6 +66,16 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
     assert.dom('#test-form-label').hasAttribute('for', 'my-control-id');
   });
 
+  test('it renders a label with the "for" attribute even if the @controlId argument is a boolean', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Label @controlId={{true}} id="test-form-label-true">True</Hds::Form::Label>
+        <Hds::Form::Label @controlId={{false}} id="test-form-label-false">False</Hds::Form::Label>
+      `
+    );
+    assert.dom('#test-form-label-true').hasAttribute('for', 'true');
+    assert.dom('#test-form-label-false').hasAttribute('for', 'false');
+  });
+
   // ID
 
   test('it renders a label with the correct "id" attribute if the @controlId argument is provided', async function (assert) {

From b61a9da348ee2f3c9bf660e3be98c9a7c65fe66c Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Fri, 9 May 2025 16:39:23 +0100
Subject: [PATCH 4/5] changeset

---
 .changeset/nine-fans-cough.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-fans-cough.md

diff --git a/.changeset/nine-fans-cough.md b/.changeset/nine-fans-cough.md
new file mode 100644
index 00000000000..ae87ed6241f
--- /dev/null
+++ b/.changeset/nine-fans-cough.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Form::Label` - Forced the `for` HTML attribute to be converted to a string

From 8f55053087338df01cf3366bd88cb1a43e226288 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Fri, 9 May 2025 17:31:52 +0100
Subject: [PATCH 5/5] added missing test for the radio field group

---
 .../components/hds/form/radio/group-test.js   | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/showcase/tests/integration/components/hds/form/radio/group-test.js b/showcase/tests/integration/components/hds/form/radio/group-test.js
index 99e8d97c9cd..3f1a67c6766 100644
--- a/showcase/tests/integration/components/hds/form/radio/group-test.js
+++ b/showcase/tests/integration/components/hds/form/radio/group-test.js
@@ -141,6 +141,31 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
       );
   });
 
+  test('it automatically provides all the ID relations between the elements when dynamically rendered using boolean values', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Radio::Group as |G|>
+            <G.RadioField @value={{true}} @id={{true}} as |F|>
+              <F.Label>This is the label for the 'true' value</F.Label>
+            </G.RadioField>
+            <G.RadioField @value={{false}} @id={{false}} as |F|>
+              <F.Label>This is the label for the 'false' value</F.Label>
+            </G.RadioField>
+          </Hds::Form::Radio::Group>`
+    );
+
+    const inputs = this.element.querySelectorAll('input[type="radio"]');
+    const labels = this.element.querySelectorAll('label');
+
+    // the `true` value should be used for the `id` (input) and `for` (label) attributes
+    assert.dom(inputs[0]).hasAttribute('id', 'true');
+    assert.dom(labels[0]).hasAttribute('for', 'true');
+
+    // the `false` value should not be used, but the `id` (input) attribute should be generated and the `for` (label) attribute should match it
+    const generatedId = inputs[1].id;
+    assert.true(generatedId.startsWith('ember'));
+    assert.dom(labels[1]).hasAttribute('for', generatedId);
+  });
+
   // NAME
 
   test('it renders the defined name on all controls within a group', async function (assert) {