From 8107f1c8d2314efee77184f89534f07e4f6cdf48 Mon Sep 17 00:00:00 2001
From: uttam12331 <uttam12331@users.noreply.github.com>
Date: Mon, 29 Jun 2026 14:57:57 +0530
Subject: [PATCH 1/3] feat(modal): add radio element support

Add a new `radio` input type to the modal component. A radio field renders
its `options` as a single-selection group sharing one name; the selected
option's value is stored in `data[name]`.

- elements.json: register the `radio` element (`requires-options`, input
  tag, radiogroup aria role).
- constants.js: expose `DYVIX_MODAL_ELEMENT.RADIO`.
- modal.jsx: compute options for any `requires-options` element (covers
  select, d-select and radio) and render a dedicated accessible radiogroup
  with per-option labels and checked state bound to `data`.
- elements.css: styles for the radio group, legend and inputs.
- devbench: add a radio example.

Closes #85
---
 devbench/src/component/modal.jsx              | 34 +++++++++++++++
 .../modal/dependencies/elements.json          | 16 ++++++++
 .../modal/dependencies/style/elements.css     | 22 ++++++++++
 src/components/modal/modal.jsx                | 41 ++++++++++++++++---
 src/constants.js                              |  1 +
 5 files changed, 108 insertions(+), 6 deletions(-)

diff --git a/devbench/src/component/modal.jsx b/devbench/src/component/modal.jsx
index fa34e097..07688733 100644
--- a/devbench/src/component/modal.jsx
+++ b/devbench/src/component/modal.jsx
@@ -39,6 +39,40 @@ export function ModalTest() {
     return props;
   });
 
+  // Radio element example. Toggle `useRadio` to preview the new `radio`
+  // input type (single-selection group, value is the chosen option).
+  const useRadio = true;
+  const radioElements = [
+    {
+      type: 'text',
+      name: 'fullName',
+      placeholder: 'Full Name',
+      amount: 1
+    },
+    {
+      type: 'radio',
+      name: 'plan',
+      placeholder: 'Choose a plan',
+      options: ['Free', 'Pro', 'Enterprise'],
+      amount: 1
+    }
+  ];
+
+  if (useRadio) {
+    return (
+      <Modal
+        title="Sign up"
+        Id="radio-modal"
+        className="testmodal"
+        theme={'Crimson'}
+        type="form"
+        elements={radioElements}
+        onSubmit={(data) => console.log('submitted', data)}
+        onChange={(data) => console.log(data)}
+      />
+    );
+  }
+
   return (
     <Modal
       title="Register"
diff --git a/src/components/modal/dependencies/elements.json b/src/components/modal/dependencies/elements.json
index 73e5e2f3..4fc2e190 100644
--- a/src/components/modal/dependencies/elements.json
+++ b/src/components/modal/dependencies/elements.json
@@ -86,6 +86,22 @@
     "requires-options": false,
     "r-variant": true
   },
+  {
+    "element": "radio",
+    "tag": "input",
+    "tag-type": "radio",
+    "default-class": "modal-radio",
+    "aria": {
+      "role": "radiogroup",
+      "aria-label": ""
+    },
+    "supports-placeholder": true,
+    "supports_type": true,
+    "supports_autocomplete": false,
+    "is_custom": false,
+    "requires-options": true,
+    "r-variant": true
+  },
   {
     "element": "file",
     "tag": "DyvixFile",
diff --git a/src/components/modal/dependencies/style/elements.css b/src/components/modal/dependencies/style/elements.css
index 119b1ed1..3b53ce0d 100644
--- a/src/components/modal/dependencies/style/elements.css
+++ b/src/components/modal/dependencies/style/elements.css
@@ -190,6 +190,28 @@
   gap: 0.5rem;
   cursor: pointer;
 }
+.modal-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  align-items: flex-start;
+}
+.modal-radio-legend {
+  font-size: 0.8rem;
+  font-weight: 500;
+  opacity: 0.85;
+}
+.modal-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.modal-radio {
+  accent-color: #0ea5e9;
+  cursor: pointer;
+}
 .modal-textarea {
   max-height: 70px;
   min-height: 35px;
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 653191c6..48894937 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -388,12 +388,11 @@ function Modal({
                       ariaAttributes['aria-required'] =
                         ariaProps['aria-required'];
                     }
-                    const options =
-                      Tag === 'select' || elementDef.tag === 'DynamicSelect'
-                        ? Array.isArray(field.options[0])
-                          ? field.options[j]
-                          : field.options
-                        : [];
+                    const options = elementDef['requires-options']
+                      ? Array.isArray(field.options[0])
+                        ? field.options[j]
+                        : field.options
+                      : [];
                     const fieldError = errors[name];
                     const ErrorId =
                       `${id && id !== '!/' ? id : field.placeholder[j]}-error`
@@ -474,6 +473,36 @@ function Modal({
                               </option>
                             ))}
                           </Tag>
+                        ) : field.type === 'radio' ? (
+                          <div
+                            key={j}
+                            className="modal-radio-group"
+                            role="radiogroup"
+                            aria-label={field.placeholder?.[j]}
+                            style={themeTextStyle}
+                          >
+                            {field.placeholder?.[j] &&
+                              field.placeholder[j] !== '!/' && (
+                                <span className="modal-radio-legend">
+                                  {field.placeholder[j]}
+                                </span>
+                              )}
+                            {options.map((opt, index) => (
+                              <label key={index} className="modal-radio-label">
+                                <input
+                                  type="radio"
+                                  className="modal-radio"
+                                  name={name}
+                                  value={opt}
+                                  checked={data[name] === opt}
+                                  onChange={() => handleInputChange(name, opt)}
+                                  {...(id &&
+                                    id !== '!/' && { id: `${id}-${index}` })}
+                                />
+                                {opt}
+                              </label>
+                            ))}
+                          </div>
                         ) : field.type === 'checkbox' ? (
                           <label
                             key={j}
diff --git a/src/constants.js b/src/constants.js
index ff7d14e0..81e636f8 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -52,6 +52,7 @@ export const DYVIX_MODAL_ELEMENT = {
   D_SELECT: 'd-select',
   AUTOCOMPLETE: 'autocomplete',
   CHECKBOX: 'checkbox',
+  RADIO: 'radio',
   FILE: 'file'
 };
 export const DYVIX_MODAL_PRESET = {

From d29c7aaadee889b24df6438461f79d9ef064fced Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Sat, 4 Jul 2026 02:54:19 +0300
Subject: [PATCH 2/3] Adjust modal radio group layout and styles

---
 src/components/modal/dependencies/style/elements.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/dependencies/style/elements.css b/src/components/modal/dependencies/style/elements.css
index 3b53ce0d..1d9ce8f9 100644
--- a/src/components/modal/dependencies/style/elements.css
+++ b/src/components/modal/dependencies/style/elements.css
@@ -192,15 +192,17 @@
 }
 .modal-radio-group {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.7rem;   
   width: 100%;
-  align-items: flex-start;
+  align-items: center;
 }
 .modal-radio-legend {
-  font-size: 0.8rem;
+  font-size: 1rem;
   font-weight: 500;
   opacity: 0.85;
+  margin-right: 0.2rem;
 }
 .modal-radio-label {
   display: flex;

From 5079fe1acb2a7f074e1eeeb1a9ac49035d985d25 Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Sat, 4 Jul 2026 02:55:41 +0300
Subject: [PATCH 3/3] Use themed Dyvixlabel for the radio element label in
 modal.jsx.

---
 src/components/modal/modal.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 48894937..6936f2f4 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -1,5 +1,5 @@
 import elementsData from './dependencies/elements.json';
-import DynamicSelect from '../select/SelectCompiler';
+import DyvixSelect from '../select/SelectCompiler';
 import validationData from './dependencies/validator/validators.json';
 import typesData from './dependencies/types.json';
 import './dependencies/style/elements.css';
@@ -26,13 +26,14 @@ import DyvixButton from '../button/button';
 import DyvixFile from '../file/file';
 import DyvixInput from '../input/input';
 import { values } from 'idb-keyval';
+import DyvixLabel from '../label/label';
 
 export const validType = typesData.map((e) => e.type);
 export const validRules = validationData.map((e) => e.preset);
 
 export const eleData = elementsData;
 const componentsMap = {
-  DynamicSelect: DynamicSelect,
+  DyvixSelect: DyvixSelect,
   DyvixFile: DyvixFile,
   DyvixInput: DyvixInput
 };
@@ -483,12 +484,12 @@ function Modal({
                           >
                             {field.placeholder?.[j] &&
                               field.placeholder[j] !== '!/' && (
-                                <span className="modal-radio-legend">
+                                <DyvixLabel className="modal-radio-legend" animation={null} theme={theme}>
                                   {field.placeholder[j]}
-                                </span>
+                                </DyvixLabel>
                               )}
                             {options.map((opt, index) => (
-                              <label key={index} className="modal-radio-label">
+                              <DyvixLabel key={index} className="modal-radio-label" animation={null} theme={theme}>
                                 <input
                                   type="radio"
                                   className="modal-radio"
@@ -500,7 +501,7 @@ function Modal({
                                     id !== '!/' && { id: `${id}-${index}` })}
                                 />
                                 {opt}
-                              </label>
+                              </DyvixLabel>
                             ))}
                           </div>
                         ) : field.type === 'checkbox' ? (