From acb7a96b727c9bc6d4599dcd06e2448c10e82d0f Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Sun, 13 Aug 2023 11:17:45 +0100
Subject: [PATCH] feat: support booleans in radios and selects

---
 README.md                                     |  4 +--
 .../core/components/InputOrGroup/index.tsx    | 28 ++++++++++++++++---
 packages/core/types/Config.tsx                |  2 +-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 93f508e781..a5d44c4f96 100644
--- a/README.md
+++ b/README.md
@@ -155,9 +155,9 @@ A `Field` represents a user input field shown in the Puck interface.
   - **[fieldName]** (`Field`): The Field objects describing the input data for each item
 - **getItemSummary** (`(object, number) => string` [optional]): Function to get the name of each item when using the `array` or `external` field types
 - **defaultItemProps** (`object` [optional]): Default props to pass to each new item added, when using a `array` field type
-- **options** (`object[]`): array of items to render for select-type inputs
+- **options** (`object[]`): array of items to render for select or radio inputs
   - **label** (`string`)
-  - **value** (`string`)
+  - **value** (`string` | `number` | `boolean`)
 - **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
 - **adaptorParams** (`object`): Paramaters passed to the adaptor
 
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
index 28a8ab4204..5e4417ea84 100644
--- a/packages/core/components/InputOrGroup/index.tsx
+++ b/packages/core/components/InputOrGroup/index.tsx
@@ -140,14 +140,24 @@ export const InputOrGroup = ({
         </div>
         <select
           className={getClassName("input")}
-          onChange={(e) => onChange(e.currentTarget.value)}
+          onChange={(e) => {
+            if (
+              e.currentTarget.value === "true" ||
+              e.currentTarget.value === "false"
+            ) {
+              onChange(Boolean(e.currentTarget.value));
+              return;
+            }
+
+            onChange(e.currentTarget.value);
+          }}
           value={value}
         >
           {field.options.map((option) => (
             <option
               key={option.label + option.value}
               label={option.label}
-              value={option.value}
+              value={option.value as string | number}
             />
           ))}
         </select>
@@ -200,9 +210,19 @@ export const InputOrGroup = ({
               >
                 <input
                   type="radio"
-                  value={option.value}
+                  value={option.value as string | number}
                   name={name}
-                  onChange={(e) => onChange(e.currentTarget.value)}
+                  onChange={(e) => {
+                    if (
+                      e.currentTarget.value === "true" ||
+                      e.currentTarget.value === "false"
+                    ) {
+                      onChange(JSON.parse(e.currentTarget.value));
+                      return;
+                    }
+
+                    onChange(e.currentTarget.value);
+                  }}
                   readOnly={readOnly}
                   defaultChecked={value === option.value}
                 />
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
index 910e5775a3..f31649619f 100644
--- a/packages/core/types/Config.tsx
+++ b/packages/core/types/Config.tsx
@@ -29,7 +29,7 @@ export type Field<
   defaultItemProps?: Props;
   options?: {
     label: string;
-    value: string | number;
+    value: string | number | boolean;
   }[];
 };