1694: Adds radio field

Author: Ruben van Leeuwen

backend/main.py

@@ -82,6 +82,12 @@ class DropdownChoices(Choice):
     _4 = ("4", "Option 4")
 
 
+class RadioChoices(Choice):
+    _1 = ("1", "Option 1")
+    _2 = ("2", "Option 2")
+    _3 = ("3", "Option 3")
+
+
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
@@ -94,7 +100,12 @@ class TestForm(FormPage):
             divider: Divider
             label: Label = "Label"
             hidden: Hidden = "Hidden"
-            dropdown: DropdownChoices = "2"
+            dropdown: DropdownChoices = (
+                "2"  # When there are > 3 choices a dropdown will be rendered
+            )
+            radio: RadioChoices = (
+                "3"  # When there are <= 3 choices a radio group will be rendered
+            )
 
         form_data_1 = yield TestForm
 

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -9,6 +9,7 @@ import {
     HiddenField,
     IntegerField,
     LabelField,
+    RadioField,
     TextAreaField,
 } from '@/components/fields';
 import {
@@ -84,17 +85,32 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             );
         },
     },
+    {
+        id: 'radio',
+        ElementMatch: {
+            Element: RadioField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons.
+            return (
+                field.type === PydanticFormFieldType.STRING &&
+                field.options.length > 0 &&
+                field.options.length <= 3
+            );
+        },
+    },
     {
         id: 'dropdown',
         ElementMatch: {
             Element: DropdownField,
             isControlledElement: true,
         },
         matcher(field) {
-            // We are looking for a single value from a set list of options. Use a dropdown.
+            // We are looking for a single value from a set list of options. With more than 3 options, use a dropdown.
             return (
                 field.type === PydanticFormFieldType.STRING &&
-                field.options.length > 0
+                field.options.length >= 4
             );
         },
     },

frontend/packages/pydantic-forms/src/components/fields/RadioField.tsx

@@ -0,0 +1,34 @@
+/**
+ * Pydantic Forms
+ *
+ * Text component
+ */
+import React from 'react';
+
+import { PydanticFormControlledElementProps } from '@/types';
+
+export const RadioField = ({
+    value,
+    onChange,
+    pydanticFormField,
+}: PydanticFormControlledElementProps) => {
+    const { options, id } = pydanticFormField;
+
+    return (
+        <div>
+            {options.map((option, key) => (
+                <div key={key}>
+                    <input
+                        type="radio"
+                        id={option.value}
+                        name={id}
+                        value={option.value}
+                        checked={value === option.value}
+                        onChange={(e) => onChange(e.target.value)}
+                    />
+                     <label htmlFor={option.value}>{option.label}</label>
+                </div>
+            ))}
+        </div>
+    );
+};

frontend/packages/pydantic-forms/src/components/fields/index.ts

@@ -7,3 +7,4 @@ export * from './LabelField';
 export * from './DividerField';
 export * from './HiddenField';
 export * from './DropdownField';
+export * from './RadioField';