Merge pull request #23 from workfloworchestrator/1710-Pydanticforms-basic--Boolean-checkbox-field

[1710] add Checkbox field

Author: pboers1988

.gitignore

@@ -18,4 +18,5 @@ __pycache__/
 .vscode
 test
 .idea
-todo.md
+todo.md
+venv

backend/main.py

@@ -101,9 +101,10 @@ class TestForm(FormPage):
             label: Label = "Label"
             hidden: Hidden = "Hidden"
             # When there are > 3 choices a dropdown will be rendered
-            dropdown: DropdownChoices = ("2")
+            dropdown: DropdownChoices = "2"
             # When there are <= 3 choices a radio group will be rendered
-            radio: RadioChoices = ("3")
+            radio: RadioChoices = "3"
+            checkbox: bool = True
 
         form_data_1 = yield TestForm
 

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

@@ -4,6 +4,7 @@
  * We will search for the first field that returns a positive match
  */
 import {
+    CheckboxField,
     DividerField,
     DropdownField,
     HiddenField,
@@ -114,6 +115,17 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             );
         },
     },
+    {
+        id: 'checkbox',
+        ElementMatch: {
+            Element: CheckboxField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            return field.type === PydanticFormFieldType.BOOLEAN;
+        },
+    },
 ];
+
 // If nothing  matches, it defaults to Text field in the mapToComponent function
 export default defaultComponentMatchers;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { PydanticFormControlledElementProps } from '@/types';
+
+export const CheckboxField = ({
+    onChange,
+    onBlur,
+    value,
+    name,
+    disabled,
+}: PydanticFormControlledElementProps) => {
+    return (
+        <input
+            type="checkbox"
+            checked={value}
+            onChange={() => onChange(!value)}
+            onBlur={onBlur}
+            name={name}
+            disabled={disabled}
+        />
+    );
+};

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

@@ -3,6 +3,7 @@ export * from './FormRow';
 export * from './TextField';
 export * from './IntegerField';
 export * from './TextAreaField';
+export * from './CheckboxField';
 export * from './LabelField';
 export * from './DividerField';
 export * from './HiddenField';