feat(modal): add radio element support

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"

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",

src/components/modal/dependencies/style/elements.css

@@ -190,6 +190,30 @@
   gap: 0.5rem;
   cursor: pointer;
 }
+.modal-radio-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.7rem;   
+  width: 100%;
+  align-items: center;
+}
+.modal-radio-legend {
+  font-size: 1rem;
+  font-weight: 500;
+  opacity: 0.85;
+  margin-right: 0.2rem;
+}
+.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;

src/components/modal/modal.jsx

@@ -26,6 +26,7 @@ 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);
@@ -388,12 +389,11 @@ function Modal({
                       ariaAttributes['aria-required'] =
                         ariaProps['aria-required'];
                     }
-                    const options =
-                      Tag === 'select' || elementDef.tag === 'DyvixSelect'
-                        ? 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 +474,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] !== '!/' && (
+                                <DyvixLabel className="modal-radio-legend" animation={null} theme={theme}>
+                                  {field.placeholder[j]}
+                                </DyvixLabel>
+                              )}
+                            {options.map((opt, index) => (
+                              <DyvixLabel key={index} className="modal-radio-label" animation={null} theme={theme}>
+                                <input
+                                  type="radio"
+                                  className="modal-radio"
+                                  name={name}
+                                  value={opt}
+                                  checked={data[name] === opt}
+                                  onChange={() => handleInputChange(name, opt)}
+                                  {...(id &&
+                                    id !== '!/' && { id: `${id}-${index}` })}
+                                />
+                                {opt}
+                              </DyvixLabel>
+                            ))}
+                          </div>
                         ) : field.type === 'checkbox' ? (
                           <label
                             key={j}

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 = {