From dae07b60948852da9770d37de13a1086dc06d289 Mon Sep 17 00:00:00 2001
From: AmauryD <deflorenne.amaury@gmail.com>
Date: Mon, 2 Dec 2024 10:44:15 +0100
Subject: [PATCH] feat: daisyui radio-group prefab

---
 .../docs/ember-input-validation/checkbox.ts   |  2 +-
 .../docs/ember-input-validation/input.ts      |  2 +-
 .../ember-input-validation/prefabs/bic.ts     |  4 +-
 .../prefabs/checkbox.ts                       |  2 +-
 .../prefabs/currency.ts                       |  2 +-
 .../prefabs/datepicker-range.ts               |  2 +-
 .../ember-input-validation/prefabs/email.ts   |  2 +-
 .../ember-input-validation/prefabs/file.ts    |  4 +-
 .../ember-input-validation/prefabs/iban.ts    |  2 +-
 .../ember-input-validation/prefabs/input.ts   |  4 +-
 .../ember-input-validation/prefabs/integer.ts |  4 +-
 .../ember-input-validation/prefabs/mobile.ts  |  2 +-
 .../prefabs/national-number.ts                |  4 +-
 .../ember-input-validation/prefabs/number.ts  |  4 +-
 .../prefabs/password.ts                       |  4 +-
 .../prefabs/radio-group.js                    | 26 ---------
 .../prefabs/radio-group.ts                    | 30 +++++++++++
 .../ember-input-validation/prefabs/radio.js   | 15 ------
 .../ember-input-validation/prefabs/radio.ts   | 29 ++++++++++
 .../prefabs/select-create.ts                  |  4 +-
 .../prefabs/select-search.ts                  |  3 +-
 .../ember-input-validation/prefabs/select.ts  |  6 +--
 .../prefabs/textarea.ts                       |  4 +-
 .../prefabs/timepicker.ts                     |  2 +-
 .../ember-input-validation/prefabs/vat.ts     |  2 +-
 .../ember-input-validation/radio-group.js     |  2 +-
 .../docs/ember-input-validation/radio.js      |  2 +-
 doc-app/app/router.ts                         |  1 +
 doc-app/app/templates/docs.hbs                | 14 +++--
 .../prefabs/radio-group.md                    | 22 ++++++--
 .../ember-input-validation/prefabs/radio.md   |  4 +-
 .../tpk-validation-radio-group-test.gts       | 43 +++++++++++----
 packages/ember-input-validation/src/app.css   |  2 +
 .../prefabs/styles/tpk-radio-group.css        | 16 ++++++
 .../components/prefabs/styles/tpk-radio.css   | 15 ++++++
 .../prefabs/tpk-validation-errors.gts         |  1 +
 .../prefabs/tpk-validation-radio-group.gts    | 35 +++++++-----
 .../prefabs/tpk-validation-radio.gts          | 14 +++--
 .../components/tpk-validation-radio-group.gts | 54 +++++++------------
 39 files changed, 243 insertions(+), 147 deletions(-)
 delete mode 100644 doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.js
 create mode 100644 doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.ts
 delete mode 100644 doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.js
 create mode 100644 doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.ts
 create mode 100644 packages/ember-input-validation/src/components/prefabs/styles/tpk-radio-group.css
 create mode 100644 packages/ember-input-validation/src/components/prefabs/styles/tpk-radio.css

diff --git a/doc-app/app/controllers/docs/ember-input-validation/checkbox.ts b/doc-app/app/controllers/docs/ember-input-validation/checkbox.ts
index 6e669093..e784734c 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/checkbox.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/checkbox.ts
@@ -5,7 +5,7 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 
 export default class DocsCheckboxValidationController extends Controller {
   label = "I'm a beast";
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     checked: true,
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/input.ts b/doc-app/app/controllers/docs/ember-input-validation/input.ts
index 551d6312..ce66ba62 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/input.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/input.ts
@@ -5,7 +5,7 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 
 export default class DocsInputValidationController extends Controller {
   label = 'Clear it';
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     delete_text: 'Delete my text',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/bic.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/bic.ts
index 6a0fcdc9..36c6b23e 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/bic.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/bic.ts
@@ -4,12 +4,12 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsIBANController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     bic: '',
     disabled: 'UKIO0000',
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     bic: 'UKIO0000',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/checkbox.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/checkbox.ts
index 83afc2d0..1414f9a8 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/checkbox.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/checkbox.ts
@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsCheckboxController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     disabled: true,
     unchecked: false,
     checked: true,
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/currency.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/currency.ts
index c9615f85..bb5c7ec5 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/currency.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/currency.ts
@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsCurrencyController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     value: undefined,
     disabled: 0.03,
     error: 34020.03,
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/datepicker-range.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/datepicker-range.ts
index eca38ca6..313d3871 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/datepicker-range.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/datepicker-range.ts
@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsDatepickerRangeController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     range: undefined,
     disabled: undefined,
     error: undefined,
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/email.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/email.ts
index ea603ccd..ae603148 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/email.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/email.ts
@@ -5,7 +5,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsEmailController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     email: undefined,
     disabled: 'email@disabled.true',
     error: 'hyperloop.com',
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
index 53309b38..6bb94494 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts
@@ -5,7 +5,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsFileController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     file: undefined,
     disabled: '',
     error: '',
@@ -21,4 +21,4 @@ export default class DocsEmberInputValidationPrefabsFileController extends Contr
     });
   }
 
-}
\ No newline at end of file
+}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/iban.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/iban.ts
index 51d29c94..9c3dabf4 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/iban.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/iban.ts
@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsIBANController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     iban: '',
     error: 'bad iban',
     disabled: 'disabled',
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/input.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/input.ts
index 5b991b19..0af0e429 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/input.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/input.ts
@@ -4,12 +4,12 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsInputController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     something: '',
     disabled: 'text',
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     something: '',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/integer.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/integer.ts
index c8b2bc01..d0cc4b90 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/integer.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/integer.ts
@@ -5,12 +5,12 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsIntegerController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     integer: 0,
     uInteger: 0,
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     integer: 0,
     uInteger: 0,
   });
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts
index d7ba4fa3..4a2eb4d2 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts
@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsPhoneController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     phone: '',
     error: '',
     disabled: '',
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/national-number.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/national-number.ts
index a848d50f..e69cfb9e 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/national-number.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/national-number.ts
@@ -4,11 +4,11 @@ import { tracked } from '@glimmer/tracking';
 import type Owner from '@ember/owner';
 
 export default class DocsEmberInputValidationPrefabsNationalNumberController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     nationalNumber: '',
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     nationalNumber: '',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/number.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/number.ts
index 4b45005b..b51b4040 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/number.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/number.ts
@@ -5,12 +5,12 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsNumberController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     number: 0,
     uNumber: 0,
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     number: 0,
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/password.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/password.ts
index 2cc7d34e..f7d0a413 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/password.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/password.ts
@@ -4,11 +4,11 @@ import { tracked } from '@glimmer/tracking';
 import type Owner from '@ember/owner';
 
 export default class DocsEmberInputValidationPrefabsPasswordController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     name: '',
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     name: '',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.js b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.js
deleted file mode 100644
index a0ca50a0..00000000
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { tracked } from 'tracked-built-ins';
-import { ImmerChangeset } from 'ember-immer-changeset';
-
-export default class DocsEmberInputValidationPrefabsRadioGroupController extends Controller {
-  @tracked changeset = new ImmerChangeset({
-    radio: undefined,
-  });
-
-  @action
-  onChange(value) {
-    this.changeset.set('radio', value);
-    this.changeset.save();
-    if (!this.changeset.get('radio')) {
-      this.changeset.addError({
-        message: 'Select a radio',
-        value: true,
-        originalValue: true,
-        key: 'radio',
-      });
-    } else {
-      this.changeset.removeError('radio');
-    }
-  }
-}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.ts
new file mode 100644
index 00000000..bafd9b26
--- /dev/null
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio-group.ts
@@ -0,0 +1,30 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from 'tracked-built-ins';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import type Owner from '@ember/owner';
+
+export default class DocsEmberInputValidationPrefabsRadioGroupController extends Controller {
+  changeset = new ImmerChangeset({
+    radio: undefined,
+  });
+
+  changesetWithErrors = new ImmerChangeset({
+    radio: undefined,
+  });
+
+  public constructor(owner: Owner) {
+    super(owner);
+    this.changesetWithErrors.addError({
+      key: 'radio',
+      message: 'Invalid value',
+      value: 'Invalid value',
+      originalValue : ''
+    });
+  }
+
+  @action
+  onChange() {
+
+  }
+}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.js b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.js
deleted file mode 100644
index 02e1315a..00000000
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Controller from '@ember/controller';
-import { ImmerChangeset } from 'ember-immer-changeset';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class DocsEmberInputValidationPrefabsRadioController extends Controller {
-  @tracked changeset = new ImmerChangeset({
-    radio: '',
-  });
-
-  @action
-  onChange(changeset) {
-    console.log('onChange', changeset);
-  }
-}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.ts
new file mode 100644
index 00000000..d3cf9c78
--- /dev/null
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/radio.ts
@@ -0,0 +1,29 @@
+import Controller from '@ember/controller';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import { action } from '@ember/object';
+import type Owner from '@ember/owner';
+
+export default class DocsEmberInputValidationPrefabsRadioController extends Controller {
+  changeset = new ImmerChangeset({
+    radio: '',
+  });
+
+  changesetWithErrors = new ImmerChangeset({
+    radio: '',
+  });
+
+  public constructor(owner: Owner) {
+    super(owner);
+    this.changesetWithErrors.addError({
+      key: 'radio',
+      message: 'Invalid value',
+      value: 'Invalid value',
+      originalValue : ''
+    });
+  }
+
+  @action
+  onChange(e: Event) {
+    console.log('onChange', e);
+  }
+}
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-create.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-create.ts
index 995c08f7..edb2500e 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-create.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-create.ts
@@ -34,13 +34,13 @@ export default class DocsEmberInputValidationPrefabsSelectCreateController exten
     });
   }
 
-  @tracked changeset = new ImmerChangeset<ChangesetType>({
+  changeset = new ImmerChangeset<ChangesetType>({
     ceo: undefined,
     disabled: undefined,
     error: undefined,
   });
 
-  @tracked changesetBis = new ImmerChangeset<ChangesetBisType>({
+  changesetBis = new ImmerChangeset<ChangesetBisType>({
     ceo: [],
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-search.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-search.ts
index b2d18e28..d63cfd81 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-search.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select-search.ts
@@ -26,7 +26,8 @@ export default class DocsEmberInputValidationPrefabsSelectSearchController exten
       key: 'error',
     });
   }
-  @tracked changeset = new ImmerChangeset<Changeset>({
+
+  changeset = new ImmerChangeset<Changeset>({
     repository: undefined,
     disabled: undefined,
     error: undefined,
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select.ts
index de47b414..63e68a2e 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/select.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/select.ts
@@ -22,7 +22,7 @@ export default class DocsEmberInputValidationPrefabsSelectController extends Con
       key: 'error',
     });
   }
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     ceo: configureDisplay(
       { firstname: 'Patrick', lastname: 'Pagnoulle' },
       (option) => `${option.firstname} ${option.lastname}`,
@@ -37,11 +37,11 @@ export default class DocsEmberInputValidationPrefabsSelectController extends Con
     ),
   });
 
-  @tracked changesetBis = new ImmerChangeset({
+  changesetBis = new ImmerChangeset({
     ceo: undefined,
   });
 
-  @tracked changesetTris = new ImmerChangeset({
+  changesetTris = new ImmerChangeset({
     ceo: [],
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/textarea.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/textarea.ts
index b49bb608..9e96dee3 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/textarea.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/textarea.ts
@@ -4,11 +4,11 @@ import { tracked } from '@glimmer/tracking';
 import type Owner from '@ember/owner';
 
 export default class DocsEmberInputValidationPrefabsTextareaController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     ember: '',
   });
 
-  @tracked changesetWithErrors = new ImmerChangeset({
+  changesetWithErrors = new ImmerChangeset({
     ember: '',
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/timepicker.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/timepicker.ts
index e53e028a..04b410c7 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/timepicker.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/timepicker.ts
@@ -3,7 +3,7 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 import { tracked } from '@glimmer/tracking';
 
 export default class DocsEmberInputValidationPrefabsTimepickerController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     time: undefined,
   });
 }
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/vat.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/vat.ts
index dedd1aa9..e463ac40 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/vat.ts
+++ b/doc-app/app/controllers/docs/ember-input-validation/prefabs/vat.ts
@@ -3,7 +3,7 @@ import { ImmerChangeset } from 'ember-immer-changeset';
 import { tracked } from '@glimmer/tracking';
 
 export default class DocsEmberInputValidationPrefabsVATController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     vat: '',
   });
 }
diff --git a/doc-app/app/controllers/docs/ember-input-validation/radio-group.js b/doc-app/app/controllers/docs/ember-input-validation/radio-group.js
index d09b7d4e..cf987c17 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/radio-group.js
+++ b/doc-app/app/controllers/docs/ember-input-validation/radio-group.js
@@ -4,7 +4,7 @@ import { tracked } from 'tracked-built-ins';
 import { ImmerChangeset } from 'ember-immer-changeset';
 
 export default class DocsRadioGroupValidationController extends Controller {
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     radio: undefined,
   });
 
diff --git a/doc-app/app/controllers/docs/ember-input-validation/radio.js b/doc-app/app/controllers/docs/ember-input-validation/radio.js
index 92da5c5f..80d9d72e 100644
--- a/doc-app/app/controllers/docs/ember-input-validation/radio.js
+++ b/doc-app/app/controllers/docs/ember-input-validation/radio.js
@@ -8,7 +8,7 @@ export default class DocsRadioValidationController extends Controller {
   second = 'It the good choice!';
   third = 'You don t regret it!';
 
-  @tracked changeset = new ImmerChangeset({
+  changeset = new ImmerChangeset({
     radio: undefined,
   });
 
diff --git a/doc-app/app/router.ts b/doc-app/app/router.ts
index 1fa10415..0df55c70 100644
--- a/doc-app/app/router.ts
+++ b/doc-app/app/router.ts
@@ -37,6 +37,7 @@ Router.map(function (this: RouterDSL) {
         this.route('input');
         this.route('textarea');
         this.route('checkbox');
+        this.route('radio');
         this.route('radio-group');
         this.route('password');
         this.route('mobile');
diff --git a/doc-app/app/templates/docs.hbs b/doc-app/app/templates/docs.hbs
index 17121f4f..605c9a62 100644
--- a/doc-app/app/templates/docs.hbs
+++ b/doc-app/app/templates/docs.hbs
@@ -12,7 +12,7 @@
     <nav.item @label="Stack list" @route="docs.ember-ui.stack-list" />
     <nav.item @label="Stepper" @route="docs.ember-ui.stepper" />
     <nav.item @label="Table generic" @route="docs.ember-ui.table-generic" />
-    
+
     {{!-- prefab section --}}
     <nav.section @label="Ember Input Validation Prefabs" />
     <nav.item @label="Bic" @route="docs.ember-input-validation.prefabs.bic" />
@@ -55,6 +55,10 @@
       @label="Password"
       @route="docs.ember-input-validation.prefabs.password"
     />
+    <nav.item
+      @label="Radio"
+      @route="docs.ember-input-validation.prefabs.radio"
+    />
     <nav.item
       @label="Radio group"
       @route="docs.ember-input-validation.prefabs.radio-group"
@@ -63,7 +67,7 @@
       @label="Select"
       @route="docs.ember-input-validation.prefabs.select"
     />
-   
+
     <nav.item
       @label="Select create"
       @route="docs.ember-input-validation.prefabs.select-create"
@@ -78,7 +82,7 @@
       @route="docs.ember-input-validation.prefabs.timepicker"
     />
     <nav.item @label="Vat" @route="docs.ember-input-validation.prefabs.vat" />
- 
+
     {{!-- validation section --}}
     <nav.section @label="Ember Input Validation" />
     <nav.item
@@ -98,14 +102,14 @@
     />
     <nav.item @label="Select" @route="docs.ember-input-validation.select" />
     <nav.item @label="Textarea" @route="docs.ember-input-validation.textarea" />
-    
+
      {{!-- form section --}}
     <nav.section @label="Ember Form" />
     <nav.item @label="TpkForm" @route="docs.ember-input-validation.tpk-form" />
 
     {{!-- input section --}}
      <nav.section @label="Ember Input" />
-    <nav.item @label="Install" @route="docs.ember-input.installation" />   
+    <nav.item @label="Install" @route="docs.ember-input.installation" />
     <nav.item @label="Button" @route="docs.ember-input.button" />
     <nav.item @label="Checkbox" @route="docs.ember-input.checkbox" />
     <nav.item @label="Datepicker" @route="docs.ember-input.datepicker" />
diff --git a/doc-app/app/templates/docs/ember-input-validation/prefabs/radio-group.md b/doc-app/app/templates/docs/ember-input-validation/prefabs/radio-group.md
index 35e4ebbf..146703cd 100644
--- a/doc-app/app/templates/docs/ember-input-validation/prefabs/radio-group.md
+++ b/doc-app/app/templates/docs/ember-input-validation/prefabs/radio-group.md
@@ -13,9 +13,25 @@ This component provides a group of radio buttons.
         as |Radio|>
         <Radio @value="applati" @label="applati" @selected="applati" />
         <Radio @value="creux" @label="creux" />
-      </Prefabs::TpkValidationRadioGroup>
-
+    </Prefabs::TpkValidationRadioGroup>
+    <p>
     selected : {{changeset-get this.changeset 'radio'}}
+    </p>
+    <hr/>
+
+    <Prefabs::TpkValidationRadioGroup 
+        @changeset={{this.changesetWithErrors}} 
+        @validationField="radio" 
+        @groupLabel="groupLabel"
+        
+        as |Radio|>
+        <Radio @value="applati" @label="applati" @selected="applati" />
+        <Radio @value="creux" @label="creux" />
+    </Prefabs::TpkValidationRadioGroup>
+
+    <p>
+    selected : {{changeset-get this.changesetWithErrors 'radio'}}
+    </p>
   </demo.example>
   <demo.snippet @name="tpk-validation-prefab-radio-group.hbs"/>
 </DocsDemo>
@@ -44,4 +60,4 @@ The `TpkValidationRadioGroup` component is used for a group of radio button.
 - `.tpk-validation-radio-group-label` : CSS class for the label of the group
 - `.tpk-validation-radio-group-group` : CSS class for the group of radio buttons
 - `.tpk-radio` : CSS class for styling the input of the radio button (label and input box).
-- `.tpk-radio-label` : CSS class for styling the label of the input.
\ No newline at end of file
+- `.tpk-radio-label` : CSS class for styling the label of the input.
diff --git a/doc-app/app/templates/docs/ember-input-validation/prefabs/radio.md b/doc-app/app/templates/docs/ember-input-validation/prefabs/radio.md
index 3f64ec7f..87ca8692 100644
--- a/doc-app/app/templates/docs/ember-input-validation/prefabs/radio.md
+++ b/doc-app/app/templates/docs/ember-input-validation/prefabs/radio.md
@@ -6,6 +6,8 @@ This component provides a radio button.
   <demo.example @name="tpk-validation-prefab-radio.hbs">
     <Prefabs::TpkValidationRadio @changeset={{this.changeset}} @validationField="radio" @label="This" @mandatory={{true}} @value="selected one" @classless=true />
     <Prefabs::TpkValidationRadio @changeset={{this.changeset}} @validationField="radio" @label="That" @mandatory={{true}} @value="selected two"/>
+    <hr>
+    <Prefabs::TpkValidationRadio @changeset={{this.changesetWithErrors}} @validationField="radio" @label="That" @mandatory={{true}} @value="selected one"/>
 
     selected : {{changeset-get this.changeset 'radio'}}
   </demo.example>
@@ -33,4 +35,4 @@ The `TpkValidationRadio` component is used for a simple radio button.
 ## Css classes
 
 - `.tpk-radio` : CSS class for styling the input of the radio button (label and input box).
-- `.tpk-radio-label` : CSS class for styling the label of the input.
\ No newline at end of file
+- `.tpk-radio-label` : CSS class for styling the label of the input.
diff --git a/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-radio-group-test.gts b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-radio-group-test.gts
index d26943da..69e0d22f 100644
--- a/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-radio-group-test.gts
+++ b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-radio-group-test.gts
@@ -4,6 +4,7 @@ import {  render } from '@ember/test-helpers';
 import { ImmerChangeset } from 'ember-immer-changeset';
 import { setupIntl } from 'ember-intl/test-support';
 import TpkValidationRadioGroup from '@triptyk/ember-input-validation/components/prefabs/tpk-validation-radio-group';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 
 
 
@@ -13,15 +14,19 @@ module(
     setupRenderingTest(hooks);
     setupIntl(hooks, 'fr-fr');
 
-    async function renderComponent(
-
+    async function renderComponent({
+      changeset,
+      disabled
+    }: {
       changeset: ImmerChangeset,
-    ) {
+      disabled?: boolean,
+    }) {
       await render(
         <template><TpkValidationRadioGroup
         @changeset={{changeset}}
         @validationField="radio"
         @groupLabel="groupLabel"
+        @disabled={{disabled}}
         @mandatory={{true}}
 
         as |Radio|>
@@ -32,13 +37,13 @@ module(
       );
       return changeset;
     }
-    test('render radio with default structure and with mandatory', async function (assert) {
+    test('CSS classes exists', async function (assert) {
       const changeset = new ImmerChangeset({
         radio: '',
       });
-      await renderComponent( changeset);
-      assert.dom('[data-test-tpk-radio-group-label]').exists();
-      assert.dom('[data-test-tpk-radio-input]').exists();
+      await renderComponent({changeset});
+      assert.dom('.tpk-radio-group-container').exists();
+      assert.dom('.tpk-radio-group-label').exists();
     });
 
     test('Error prefab appears if an error is added to changeset', async function (assert) {
@@ -51,10 +56,30 @@ module(
         originalValue: undefined,
         key: 'radio',
       });
-      await renderComponent( changeset);
+      await renderComponent({changeset});
       assert
-        .dom('[data-test-prefab-radio-group]')
+        .dom('[data-test-tpk-prefab-radio-group-container]')
         .hasAttribute('data-has-error', 'true');
     });
+
+    test('@disabled disables the input', async function(assert) {
+      const changeset = new ImmerChangeset({
+        radio: 'applati',
+      });
+      await renderComponent({
+        disabled: true,
+        changeset
+      });
+      assert.dom(`[data-test-tpk-prefab-tpk-radio-container] input`).hasAttribute('disabled');
+    });
+
+    test('Accessibility', async function (assert) {
+      assert.expect(0);
+      const changeset = new ImmerChangeset({
+        radio: 'applati',
+      });
+      await renderComponent( {changeset});
+      await a11yAudit();
+    })
   },
 );
diff --git a/packages/ember-input-validation/src/app.css b/packages/ember-input-validation/src/app.css
index 22bc6ef5..6638a706 100644
--- a/packages/ember-input-validation/src/app.css
+++ b/packages/ember-input-validation/src/app.css
@@ -15,3 +15,5 @@
 @import url('./components/prefabs/styles/tpk-select.css');
 @import url('./components/prefabs/styles/tpk-select-create.css');
 @import url('./components/prefabs/styles/tpk-select-search.css');
+@import url('./components/prefabs/styles/tpk-radio.css');
+@import url('./components/prefabs/styles/tpk-radio-group.css');
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio-group.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio-group.css
new file mode 100644
index 00000000..4801614b
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio-group.css
@@ -0,0 +1,16 @@
+.tpk-radio-group-container {
+  @apply form-control relative pb-4;
+}
+
+.tpk-radio-group-label {
+  @apply label label-text text-base;
+}
+
+.tpk-radio-group-container[data-has-error~="true"]
+.tpk-validation-errors {
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
+}
+
+.tpk-radio-group-container[data-has-error~="true"] .tpk-radio-group-label {
+  @apply text-error label;
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio.css
new file mode 100644
index 00000000..325166f5
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/styles/tpk-radio.css
@@ -0,0 +1,15 @@
+.tpk-radio-container {
+  @apply form-control;
+}
+
+.tpk-radio-label {
+  @apply label cursor-pointer;
+}
+
+.tpk-radio-label > span {
+  @apply label-text;
+}
+
+.tpk-radio-input {
+  @apply radio;
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
index 4ff92a82..8a9e3868 100644
--- a/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
@@ -35,6 +35,7 @@ export default class TpkValidationErrorsComponent extends Component<TpkValidatio
 
   <template>
     <div class="tpk-validation-errors"
+    data-test-tpk-validation-errors
     ...attributes>
       {{#each this.errorMessages as |error|}}
         <span>
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio-group.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio-group.gts
index 9d70304c..6dd8f989 100644
--- a/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio-group.gts
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio-group.gts
@@ -9,7 +9,7 @@ export interface TpkValidationRadioGroupPrefabComponentSignature
   extends BaseValidationSignature{
   Args: BaseValidationSignature['Args']& TpkValidationRadioGroupComponentSignature['Args'] & {
     label: string;
-    groupLabel: string; 
+    groupLabel: string;
     options: string[];
   };
   Blocks: {
@@ -31,20 +31,27 @@ const TpkValidationRadioGroupPrefabComponent: TOC<TpkValidationRadioGroupPrefabC
     @mandatory={{@mandatory}}
     @groupLabel={{@groupLabel}}
     @requiredFields={{@requiredFields}}
-    data-test-prefab-radio-group
     as |V|>
-     {{yield (component 
-      TpkValidationRadioPrefabComponent
-        selected=V.selected
-        validationField=@validationField
-        changeset=@changeset
-        disabled=@disabled
-        mandatory=@mandatory    
-      )}}
-     <TpkValidationErrorsComponent
-      @errors={{V.errors}}
-    />
+    <fieldset class="tpk-radio-group-container"
+      data-has-error='{{V.hasError}}'
+      anchorScrollUp={{@validationField}}
+      data-test-tpk-prefab-radio-group-container
+    >
+      <legend class="tpk-radio-group-label">{{@groupLabel}}*</legend>
+      {{yield (component
+        TpkValidationRadioPrefabComponent
+          selected=V.selected
+          validationField=@validationField
+          changeset=@changeset
+          disabled=@disabled
+          mandatory=@mandatory
+        )}}
+      <TpkValidationErrorsComponent
+        class="tpk-validation-errors"
+        @errors={{V.errors}}
+      />
+    </fieldset>
   </TpkValidationRadioGroupComponent>
 </template>
 
-  export default TpkValidationRadioGroupPrefabComponent;
\ No newline at end of file
+  export default TpkValidationRadioGroupPrefabComponent;
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio.gts
index 98b81d1a..3a38b04b 100644
--- a/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio.gts
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-radio.gts
@@ -25,10 +25,16 @@ const TpkValidationRadioPrefabComponent: TOC<TpkValidationRadioPrefabComponentSi
       @onChange={{@onChange}}
       @requiredFields={{@requiredFields}}
   as |V|>
-  
-    <V.Label @label={{@label}}/>
-    <V.Input />
+    <div
+      class="tpk-radio-container"
+      data-test-tpk-prefab-tpk-radio-container
+    >
+      <V.Label class="tpk-radio-label">
+        <span>{{@label}}</span>
+        <V.Input class="tpk-radio-input" />
+      </V.Label>
+    </div>
   </TpkValidationRadioComponent>
 </template>
 
-export default TpkValidationRadioPrefabComponent;
\ No newline at end of file
+export default TpkValidationRadioPrefabComponent;
diff --git a/packages/ember-input-validation/src/components/tpk-validation-radio-group.gts b/packages/ember-input-validation/src/components/tpk-validation-radio-group.gts
index 39b6ecf6..4282f67e 100644
--- a/packages/ember-input-validation/src/components/tpk-validation-radio-group.gts
+++ b/packages/ember-input-validation/src/components/tpk-validation-radio-group.gts
@@ -7,7 +7,6 @@ import TpkRadio from '@triptyk/ember-input/components/tpk-radio';
 import { hash } from '@ember/helper';
 import type { WithBoundArgs } from '@glint/template';
 import { assert } from '@ember/debug';
-import MandatoryLabelComponent from './prefabs/mandatory-label.gts';
 
 export interface TpkValidationRadioGroupComponentSignature
   extends BaseValidationSignature {
@@ -60,40 +59,23 @@ export default class TpkValidationRadioGroupComponent extends BaseValidationComp
   }
 
   <template>
-    <div
-      class='tpk-validation-radio-container'
-      data-has-error='{{this.hasError}}'
-      ...attributes
-    >
-      <div
-        class={{unless @classless 'tpk-validation-radio-group-label'}}
-        data-test-tpk-radio-group-label
-      >
-        <MandatoryLabelComponent
-          @label={{@groupLabel}}
-          @mandatory={{@mandatory}}
-        />
-      </div>
-      <div class={{unless @classless 'tpk-validation-radio-group-group'}}>
-        {{yield
-          (hash
-            Radio=(component
-              TpkRadio
-              classless=@classless
-              disabled=@disabled
-              name=@validationField
-              selected=this.selected
-              onChange=this.onChange
-            )
-            selected=this.selected
-            onChange=this.onChange
-            errors=this.errors
-            hasError=this.hasError
-            firstError=this.firstError
-            mandatory=this.mandatory
-          )
-        }}
-      </div>
-    </div>
+    {{yield
+      (hash
+        Radio=(component
+          TpkRadio
+          classless=@classless
+          disabled=@disabled
+          name=@validationField
+          selected=this.selected
+          onChange=this.onChange
+        )
+        selected=this.selected
+        onChange=this.onChange
+        errors=this.errors
+        hasError=this.hasError
+        firstError=this.firstError
+        mandatory=this.mandatory
+      )
+    }}
   </template>
 }