Input specific propType source

src/lib/props/property-sources/createFormPropertySource.test.ts

@@ -1,3 +1,4 @@
+import dedent from 'ts-dedent';
 import type { PropTypeInfo } from '../propDefinitions.types';
 import { createFormPropertySource } from './createFormPropertySource';
 import { getFullPropTypeInfo } from './createFormPropertySource.testutils';
@@ -166,6 +167,35 @@ describe('createFormPropertySource', () => {
       });
     });
 
+    describe('radio', () => {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input id="onBoolean" value="single" name="maritalStatus" type="radio" checked/>
+        <input id="offBoolean" value="married" name="maritalStatus" type="radio" />
+      `;
+
+      const radioDirectValue = getFullPropTypeInfo('offBoolean', form);
+      const radioFormDataValue = getFullPropTypeInfo('onBoolean', form, 'maritalStatus');
+
+      it('Should show a warning message and return the input value when trying to get a radio button value directly', () => {
+        const consoleSpy = jest.spyOn(console, 'warn');
+
+        expect(createFormPropertySource()(form).getProp(radioDirectValue.string.asInput)).toBe(
+          'married',
+        );
+
+        expect(consoleSpy)
+          .toHaveBeenCalledWith(dedent`The property "offBoolean" is trying to get a radio button value but the target is not the parent form, if you have multiple radio buttons with a shared name use the parent form as target
+          Returning the input value "married" despite the fact it could be unchecked.`);
+      });
+
+      it('Should return the selected radio value when using the parent form as a target', () => {
+        expect(createFormPropertySource()(form).getProp(radioFormDataValue.string.asForm)).toBe(
+          'single',
+        );
+      });
+    });
+
     describe('select', () => {
       it('Should return the select value if the target is a select that is not multiple', () => {
         const form = document.createElement('form');

src/lib/props/property-sources/createFormPropertySource.ts

@@ -11,6 +11,8 @@ export function createFormPropertySource(): PropertySource {
         const element = propInfo.source.target!;
         const isCheckbox =
           element.nodeName === 'INPUT' && (element as HTMLInputElement).type === 'checkbox';
+        const isRadio =
+          element.nodeName === 'INPUT' && (element as HTMLInputElement).type === 'radio';
         const isForm = element.nodeName === 'FORM';
         const isInput =
           ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) &&
@@ -57,6 +59,15 @@ export function createFormPropertySource(): PropertySource {
 
         const textInput = (previousValue: unknown) => {
           const input = element as HTMLInputElement;
+
+          if (isRadio && !isForm) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              dedent`The property "${propInfo.name}" is trying to get a radio button value but the target is not the parent form, if you have multiple radio buttons with a shared name use the parent form as target
+                    Returning the input value "${input.value}" despite the fact it could be unchecked.`,
+            );
+          }
+
           if (isInput && !input.multiple) return convertSourceValue(propInfo, input.value);
           return previousValue;
         };