diff --git a/helpers/unique-id.js b/helpers/unique-id.js
new file mode 100644
index 0000000000..e0cd307643
--- /dev/null
+++ b/helpers/unique-id.js
@@ -0,0 +1,8 @@
+/* eslint unicorn/prefer-module: 0, eqeqeq: 0 */
+module.exports = function (Handlebars) {
+ Handlebars.registerHelper('unique-id', function () {
+ const crypto = require('node:crypto');
+
+ return `id-${crypto.randomUUID()}`;
+ });
+};
diff --git a/source/_patterns/01-elements/radio/radio.hbs b/source/_patterns/01-elements/radio/_radio.hbs
similarity index 65%
rename from source/_patterns/01-elements/radio/radio.hbs
rename to source/_patterns/01-elements/radio/_radio.hbs
index 4d60367f11..c704188402 100644
--- a/source/_patterns/01-elements/radio/radio.hbs
+++ b/source/_patterns/01-elements/radio/_radio.hbs
@@ -1,10 +1,11 @@
+ {{#if invalid}} aria-invalid="true"{{/if }}
+ {{#if required}} required{{/if}}>
diff --git a/source/_patterns/01-elements/radio/_radio.json b/source/_patterns/01-elements/radio/_radio.json
new file mode 100644
index 0000000000..bc2edeb4d3
--- /dev/null
+++ b/source/_patterns/01-elements/radio/_radio.json
@@ -0,0 +1,5 @@
+{
+ "label": "Radio",
+ "id": "radio",
+ "name": "radio"
+}
diff --git a/source/_patterns/01-elements/radio/_radio.md b/source/_patterns/01-elements/radio/_radio.md
index 19ea5b87f0..c402e8ae58 100644
--- a/source/_patterns/01-elements/radio/_radio.md
+++ b/source/_patterns/01-elements/radio/_radio.md
@@ -1,5 +1,5 @@
---
-title: Textarea
+title: Radio
state: complete
---
diff --git a/source/_patterns/01-elements/radio/radio.json b/source/_patterns/01-elements/radio/radio.json
deleted file mode 100644
index 2946dc20ee..0000000000
--- a/source/_patterns/01-elements/radio/radio.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "id": "radio01",
- "label": "Radio"
-}
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
index e85bf7a6d9..0a9cdcc7da 100644
--- a/source/_patterns/01-elements/radio/radio.scss
+++ b/source/_patterns/01-elements/radio/radio.scss
@@ -39,7 +39,7 @@
border-width: to-em($pxValue: 6);
}
// * the invalid style using the :invalid pseudo class (and [aria-invalid="true"] equivalent, see #136 and #141)
- &:invalid,
+ &:is(:user-invalid),
&[aria-invalid="true"] {
border-color: #c13e34;
}
diff --git a/source/_patterns/01-elements/radio/radios.hbs b/source/_patterns/01-elements/radio/radios.hbs
new file mode 100644
index 0000000000..72d987a589
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios.hbs
@@ -0,0 +1,3 @@
+{{#each radios }}
+ {{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}
+{{/each }}
diff --git a/source/_patterns/01-elements/radio/radios.json b/source/_patterns/01-elements/radio/radios.json
new file mode 100644
index 0000000000..7d4abf5148
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios.json
@@ -0,0 +1,14 @@
+{
+ "name": "radio",
+ "radios": [
+ {
+ "label": "Radio 01"
+ },
+ {
+ "label": "Radio 02"
+ },
+ {
+ "label": "Radio 03"
+ }
+ ]
+}
diff --git a/source/_patterns/01-elements/radio/radios~checked.json b/source/_patterns/01-elements/radio/radios~checked.json
new file mode 100644
index 0000000000..49272c2913
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios~checked.json
@@ -0,0 +1,14 @@
+{
+ "name": "radioChecked",
+ "radios": [
+ {
+ "checked": true
+ },
+ {
+ "checked": false
+ },
+ {
+ "checked": false
+ }
+ ]
+}
diff --git a/source/_patterns/01-elements/radio/radios~disabled-checked.json b/source/_patterns/01-elements/radio/radios~disabled-checked.json
new file mode 100644
index 0000000000..0b3b34ba25
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios~disabled-checked.json
@@ -0,0 +1,15 @@
+{
+ "disabled": true,
+ "name": "radioDisabledChecked",
+ "radios": [
+ {
+ "checked": true
+ },
+ {
+ "checked": false
+ },
+ {
+ "checked": false
+ }
+ ]
+}
diff --git a/source/_patterns/01-elements/radio/radios~disabled.json b/source/_patterns/01-elements/radio/radios~disabled.json
new file mode 100644
index 0000000000..4186649610
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios~disabled.json
@@ -0,0 +1,4 @@
+{
+ "disabled": true,
+ "name": "radioDisabled"
+}
diff --git a/source/_patterns/01-elements/radio/radios~invalid-attribute.json b/source/_patterns/01-elements/radio/radios~invalid-attribute.json
new file mode 100644
index 0000000000..996f7ef64b
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios~invalid-attribute.json
@@ -0,0 +1,4 @@
+{
+ "invalid": true,
+ "name": "radioInvalid"
+}
diff --git a/source/_patterns/01-elements/radio/radios~required.json b/source/_patterns/01-elements/radio/radios~required.json
new file mode 100644
index 0000000000..914767a51e
--- /dev/null
+++ b/source/_patterns/01-elements/radio/radios~required.json
@@ -0,0 +1,4 @@
+{
+ "required": true,
+ "name": "radioRequired"
+}
diff --git a/source/_patterns/01-elements/radio/radio~checked.json b/source/_patterns/01-elements/radio/radio~checked.json
deleted file mode 100644
index d5a2c8a4bc..0000000000
--- a/source/_patterns/01-elements/radio/radio~checked.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "id": "radio02",
- "checked": true
-}
diff --git a/source/_patterns/01-elements/radio/radio~disabled-checked.json b/source/_patterns/01-elements/radio/radio~disabled-checked.json
deleted file mode 100644
index a062e3978e..0000000000
--- a/source/_patterns/01-elements/radio/radio~disabled-checked.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "id": "radio04",
- "checked": true,
- "disabled": true
-}
diff --git a/source/_patterns/01-elements/radio/radio~disabled.json b/source/_patterns/01-elements/radio/radio~disabled.json
deleted file mode 100644
index b503f8b96a..0000000000
--- a/source/_patterns/01-elements/radio/radio~disabled.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "id": "radio03",
- "disabled": true
-}
diff --git a/source/_patterns/01-elements/radio/radio~invalid.json b/source/_patterns/01-elements/radio/radio~invalid.json
deleted file mode 100644
index f5e594bc0b..0000000000
--- a/source/_patterns/01-elements/radio/radio~invalid.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "id": "radio05",
- "invalid": true
-}