From 6aa1556a6d3e89d4f25f34e3da5e179a68f4c0b7 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Tue, 14 Jan 2025 14:08:01 +0000
Subject: [PATCH] feat: exclusive 'or' checklist with grouped options (#4116)

---
 .../components/Checklist/Editor/Editor.tsx    |  18 +-
 .../components/Checklist/Editor/Options.tsx   | 237 ++++--------------
 .../components/ExclusiveOrOptionManager.tsx   |  85 +++++++
 .../Editor/components/GroupedOptions.tsx      | 154 ++++++++++++
 .../Editor/{ => components}/OptionsEditor.tsx |   0
 .../components/Checklist/Public/Public.tsx    | 155 +-----------
 .../Checklist/Public/components/Checklist.tsx | 132 ++++++++++
 .../Public/components/GroupedChecklist.tsx    | 129 ++++++++++
 .../components/Checklist/Public/helpers.ts    |  60 ++++-
 .../Public/hooks/useExclusiveOption.tsx       |  24 +-
 .../Public/hooks/useInitialOptions.tsx        |  19 ++
 .../Checklist/Public/tests/Public.test.tsx    |  50 +++-
 .../Checklist/Public/tests/mockOptions.ts     |  44 ++++
 .../src/@planx/components/Checklist/model.ts  |  53 ++--
 .../src/@planx/components/Checklist/types.ts  |   2 +-
 .../components/shared/BaseOptionsEditor.tsx   |   5 +-
 .../src/pages/FlowEditor/lib/store/editor.ts  |   8 +-
 .../src/ui/shared/ErrorWrapper.tsx            |   2 +-
 18 files changed, 800 insertions(+), 377 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Editor/components/GroupedOptions.tsx
 rename editor.planx.uk/src/@planx/components/Checklist/Editor/{ => components}/OptionsEditor.tsx (100%)
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Public/components/Checklist.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useInitialOptions.tsx

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
index a197a89170..07aec4b9a0 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -1,4 +1,5 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
 import { FormikErrors, FormikValues, useFormik } from "formik";
 import React, { useEffect, useRef } from "react";
 import ImgInput from "ui/editor/ImgInput/ImgInput";
@@ -12,7 +13,6 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
 
-import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
 import { Option, parseBaseNodeData } from "../../shared";
 import { ICONS } from "../../shared/icons";
 import type { Checklist } from "../model";
@@ -41,7 +41,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
         : groupedOptions?.flatMap((group) => group.children);
 
       const filteredOptions = (sourceOptions || []).filter(
-        (option) => option.data.text
+        (option) => option.data.text,
       );
 
       const processedOptions = filteredOptions.map((option) => ({
@@ -68,7 +68,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                   }),
             },
           },
-          processedOptions
+          processedOptions,
         );
       } else {
         alert(JSON.stringify({ type, ...values, options }, null, 2));
@@ -77,16 +77,16 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
     validate: ({ options, groupedOptions, allRequired, ...values }) => {
       const errors: FormikErrors<FormikValues> = {};
 
+      // Account for flat or expandable Checklist options
+      options = options || groupedOptions?.flatMap((group) => group.children);
+
       const exclusiveOptions: Option[] | undefined = options?.filter(
-        (option) => option.data.exclusive
+        (option) => option.data.exclusive,
       );
       if (allRequired && exclusiveOptions && exclusiveOptions.length > 0) {
         errors.allRequired =
           'Cannot configure exclusive "or" option alongside "all required" setting';
       }
-      // Account for flat or expandable Checklist options
-      options =
-        options || groupedOptions?.map((group) => group.children)?.flat();
       if (values.fn && !options?.some((option) => option.data.val)) {
         errors.fn =
           "At least one option must set a data value when the checklist has a data field";
@@ -164,7 +164,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 onChange={() =>
                   formik.setFieldValue(
                     "allRequired",
-                    !formik.values.allRequired
+                    !formik.values.allRequired,
                   )
                 }
                 label="All required"
@@ -177,7 +177,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 onChange={() =>
                   formik.setFieldValue(
                     "neverAutoAnswer",
-                    !formik.values.neverAutoAnswer
+                    !formik.values.neverAutoAnswer,
                   )
                 }
                 label="Always put to user (forgo automation)"
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
index 13d2afa804..232f9f7039 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -1,213 +1,74 @@
-import Delete from "@mui/icons-material/Delete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import { BaseOptionsEditor } from "@planx/components/shared/BaseOptionsEditor";
+import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
 import { hasFeatureFlag } from "lib/featureFlags";
 import { partition } from "lodash";
-import adjust from "ramda/src/adjust";
-import compose from "ramda/src/compose";
-import remove from "ramda/src/remove";
 import React from "react";
 import { FormikHookReturn } from "types";
 import ListManager from "ui/editor/ListManager/ListManager";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import ErrorWrapper from "ui/shared/ErrorWrapper";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
 
-import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
-import { useStore } from "pages/FlowEditor/lib/store";
 import { Option } from "../../shared";
-import type { Group } from "../model";
-import ChecklistOptionsEditor from "./OptionsEditor";
+import { useInitialOptions } from "../Public/hooks/useInitialOptions";
+import { ExclusiveOrOptionManager } from "./components/ExclusiveOrOptionManager";
+import { GroupedOptions } from "./components/GroupedOptions";
+import ChecklistOptionsEditor from "./components/OptionsEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   const [exclusiveOptions, nonExclusiveOptions]: Option[][] = partition(
     formik.values.options,
-    (option) => option.data.exclusive
+    (option) => option.data.exclusive,
   );
 
   const exclusiveOrOptionManagerShouldRender =
-    hasFeatureFlag("EXCLUSIVE_OR") && nonExclusiveOptions.length;
-  
-  const schema = useStore().getFlowSchema()?.options;
-  const initialOptions: Option[] | undefined = formik.initialValues.options || formik.initialValues.groupedOptions?.map((group: Group<Option>) => group.children)?.flat();
-  const initialOptionVals = initialOptions?.map((option) => option.data?.val);
+    hasFeatureFlag("EXCLUSIVE_OR") && nonExclusiveOptions.length > 0;
+
+  const { schema, initialOptionVals } = useInitialOptions(formik);
 
   return (
     <ModalSectionContent subtitle="Options">
       {formik.values.groupedOptions ? (
-        <Box>
-          {formik.values.groupedOptions.map(
-            (groupedOption: Group<Option>, groupIndex: number) => (
-              <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
-                <Box display="flex" pb={1}>
-                  <InputRow>
-                    <Input
-                      required
-                      format="bold"
-                      name={`groupedOptions[${groupIndex}].title`}
-                      value={groupedOption.title}
-                      placeholder="Section Title"
-                      onChange={formik.handleChange}
-                    />
-                  </InputRow>
-                  <Box flex={0}>
-                    <IconButton
-                      title="Delete group"
-                      aria-label="Delete group"
-                      onClick={() => {
-                        formik.setFieldValue(
-                          `groupedOptions`,
-                          remove(groupIndex, 1, formik.values.groupedOptions)
-                        );
-                      }}
-                      size="large"
-                    >
-                      <Delete />
-                    </IconButton>
-                  </Box>
-                </Box>
-                <Box pl={{ md: 2 }}>
-                  <ListManager
-                    values={groupedOption.children}
-                    onChange={(newOptions) => {
-                      formik.setFieldValue(
-                        `groupedOptions[${groupIndex}].children`,
-                        newOptions
-                      );
-                    }}
-                    newValue={() =>
-                      ({
-                        data: {
-                          text: "",
-                          description: "",
-                          val: "",
-                        },
-                      }) as Option
-                    }
-                    newValueLabel="add new option"
-                    Editor={ChecklistOptionsEditor}
-                    editorExtraProps={{
-                      groupIndex,
-                      showValueField: !!formik.values.fn,
-                      onMoveToGroup: (
-                        movedItemIndex: number,
-                        moveToGroupIndex: number
-                      ) => {
-                        const item = groupedOption.children[movedItemIndex];
-                        formik.setFieldValue(
-                          "groupedOptions",
-                          compose(
-                            adjust(
-                              moveToGroupIndex,
-                              (option: Group<Option>) => ({
-                                ...option,
-                                children: [...option.children, item],
-                              })
-                            ),
-                            adjust(groupIndex, (option: Group<Option>) => ({
-                              ...option,
-                              children: remove(
-                                movedItemIndex,
-                                1,
-                                option.children
-                              ),
-                            }))
-                          )(formik.values.groupedOptions)
-                        );
-                      },
-                      groups: formik.values.groupedOptions.map(
-                        (opt: Group<Option>) => opt.title
-                      ),
-                      schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
-                    }}
-                  />
-                </Box>
-              </Box>
-            )
-          )}
-          <Box mt={1}>
-            <Button
-              size="large"
-              onClick={() => {
-                formik.setFieldValue(`groupedOptions`, [
-                  ...formik.values.groupedOptions,
-                  {
-                    title: "",
-                    children: [],
-                  },
-                ]);
-              }}
-            >
-              add new group
-            </Button>
-          </Box>
-        </Box>
+        <GroupedOptions formik={formik} />
       ) : (
-        <ListManager
-          values={nonExclusiveOptions || []}
-          onChange={(newOptions) => {
-            const newCombinedOptions =
-              newOptions.length === 0
-                ? []
-                : [...exclusiveOptions, ...newOptions];
+        <>
+          <ListManager
+            values={nonExclusiveOptions || []}
+            onChange={(newOptions) => {
+              const newCombinedOptions =
+                newOptions.length === 0
+                  ? []
+                  : [...exclusiveOptions, ...newOptions];
 
-            formik.setFieldValue("options", newCombinedOptions);
-          }}
-          newValueLabel="add new option"
-          newValue={() =>
-            ({
-              data: {
-                text: "",
-                description: "",
-                val: "",
-              },
-            }) as Option
-          }
-          Editor={ChecklistOptionsEditor}
-          editorExtraProps={{ 
-            showValueField: !!formik.values.fn,
-            schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
-          }}
-        />
-      )}
-      {exclusiveOrOptionManagerShouldRender ? (
-        <Box mt={1}>
-            <ErrorWrapper error={formik.errors.allRequired as string}>
-            <ListManager
-              values={exclusiveOptions || []}
-              onChange={(newExclusiveOptions) => {
-                const newCombinedOptions = [
-                  ...nonExclusiveOptions,
-                  ...newExclusiveOptions,
-                ];
-                formik.setFieldValue("options", newCombinedOptions);
-              }}
-              newValueLabel='add "or" option'
-              maxItems={1}
-              disableDragAndDrop
-              newValue={() =>
-                ({
-                  data: {
-                    text: "",
-                    description: "",
-                    val: "",
-                    exclusive: true,
-                  },
-                }) as Option
-              }
-              Editor={BaseOptionsEditor}
-              editorExtraProps={{ 
-                showValueField: !!formik.values.fn,
-                schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
-             }}
+              formik.setFieldValue("options", newCombinedOptions);
+            }}
+            newValueLabel="add new option"
+            newValue={() =>
+              ({
+                data: {
+                  text: "",
+                  description: "",
+                  val: "",
+                },
+              }) as Option
+            }
+            Editor={ChecklistOptionsEditor}
+            editorExtraProps={{
+              showValueField: !!formik.values.fn,
+              schema: getOptionsSchemaByFn(
+                formik.values.fn,
+                schema,
+                initialOptionVals,
+              ),
+            }}
+          />
+          {exclusiveOrOptionManagerShouldRender ? (
+            <ExclusiveOrOptionManager
+              formik={formik}
+              exclusiveOptions={exclusiveOptions}
+              nonExclusiveOptions={nonExclusiveOptions}
             />
-        </ErrorWrapper>
-          </Box>
-      ) : (
-        <></>
+          ) : (
+            <></>
+          )}
+        </>
       )}
     </ModalSectionContent>
   );
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
new file mode 100644
index 0000000000..594022c06a
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
@@ -0,0 +1,85 @@
+import Box from "@mui/material/Box";
+import { BaseOptionsEditor } from "@planx/components/shared/BaseOptionsEditor";
+import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
+import React from "react";
+import { FormikHookReturn } from "types";
+import ListManager from "ui/editor/ListManager/ListManager";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+
+import { Option } from "../../../shared";
+import { Group } from "../../model";
+import { useInitialOptions } from "../../Public/hooks/useInitialOptions";
+
+interface Props {
+  formik: FormikHookReturn;
+  exclusiveOptions: Option[];
+  nonExclusiveOptions: Option[] | Array<Group<Option>>;
+  groupIndex?: number;
+  grouped?: true;
+}
+
+export const ExclusiveOrOptionManager = ({
+  formik,
+  exclusiveOptions,
+  nonExclusiveOptions,
+  groupIndex,
+  grouped,
+}: Props) => {
+  const { schema, initialOptionVals } = useInitialOptions(formik);
+
+  return (
+    <Box mt={2}>
+      <ErrorWrapper error={formik.errors.allRequired as string}>
+        <Box mt={1}>
+          <ListManager
+            values={exclusiveOptions || []}
+            onChange={(newExclusiveOptions) => {
+              if (grouped) {
+                const exclusiveOptionGroup = {
+                  title: "Or",
+                  exclusive: true,
+                  children: newExclusiveOptions,
+                };
+                const newCombinedOptions = [
+                  ...nonExclusiveOptions,
+                  exclusiveOptionGroup,
+                ];
+                formik.setFieldValue("groupedOptions", newCombinedOptions);
+                return;
+              }
+              const newCombinedOptions = [
+                ...nonExclusiveOptions,
+                ...newExclusiveOptions,
+              ];
+              formik.setFieldValue("options", newCombinedOptions);
+            }}
+            newValueLabel='add "or" option'
+            maxItems={1}
+            disableDragAndDrop
+            newValue={() => {
+              return {
+                data: {
+                  text: "",
+                  description: "",
+                  val: "",
+                  exclusive: true,
+                },
+              } as Option;
+            }}
+            Editor={BaseOptionsEditor}
+            editorExtraProps={{
+              showValueField: !!formik.values.fn,
+              groupIndex,
+              optionPlaceholder: "Exclusive 'or' option",
+              schema: getOptionsSchemaByFn(
+                formik.values.fn,
+                schema,
+                initialOptionVals,
+              ),
+            }}
+          />
+        </Box>
+      </ErrorWrapper>
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/GroupedOptions.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/GroupedOptions.tsx
new file mode 100644
index 0000000000..e817264790
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/GroupedOptions.tsx
@@ -0,0 +1,154 @@
+import Delete from "@mui/icons-material/Delete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
+import { hasFeatureFlag } from "lib/featureFlags";
+import adjust from "ramda/src/adjust";
+import compose from "ramda/src/compose";
+import remove from "ramda/src/remove";
+import React from "react";
+import { FormikHookReturn } from "types";
+import ListManager from "ui/editor/ListManager/ListManager";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+
+import { Option } from "../../../shared";
+import type { Group } from "../../model";
+import { partitionGroupedOptions } from "../../Public/helpers";
+import { useInitialOptions } from "../../Public/hooks/useInitialOptions";
+import { ExclusiveOrOptionManager } from "./ExclusiveOrOptionManager";
+import ChecklistOptionsEditor from "./OptionsEditor";
+
+interface Props {
+  formik: FormikHookReturn;
+}
+
+export const GroupedOptions = ({ formik }: Props) => {
+  const { schema, initialOptionVals } = useInitialOptions(formik);
+
+  const [exclusiveOptions, nonExclusiveOptionGroups] = partitionGroupedOptions(
+    formik.values.groupedOptions,
+  );
+
+  const exclusiveOrOptionManagerShouldRender =
+    hasFeatureFlag("EXCLUSIVE_OR") && nonExclusiveOptionGroups.length > 0;
+
+  return (
+    <Box>
+      {nonExclusiveOptionGroups.map(
+        (groupedOption: Group<Option>, groupIndex: number) => (
+          <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
+            <Box display="flex" pb={1}>
+              <InputRow>
+                <Input
+                  required
+                  format="bold"
+                  name={`groupedOptions[${groupIndex}].title`}
+                  value={groupedOption.title}
+                  placeholder="Section Title"
+                  onChange={formik.handleChange}
+                />
+              </InputRow>
+              <Box flex={0}>
+                <IconButton
+                  title="Delete group"
+                  aria-label="Delete group"
+                  onClick={() => {
+                    formik.setFieldValue(
+                      `groupedOptions`,
+                      remove(groupIndex, 1, formik.values.groupedOptions),
+                    );
+                  }}
+                  size="large"
+                >
+                  <Delete />
+                </IconButton>
+              </Box>
+            </Box>
+            <Box pl={{ md: 2 }}>
+              <ListManager
+                values={groupedOption.children}
+                onChange={(newOptions) => {
+                  formik.setFieldValue(
+                    `groupedOptions[${groupIndex}].children`,
+                    newOptions,
+                  );
+                }}
+                newValue={() =>
+                  ({
+                    data: {
+                      text: "",
+                      description: "",
+                      val: "",
+                    },
+                  }) as Option
+                }
+                newValueLabel="add new option"
+                Editor={ChecklistOptionsEditor}
+                editorExtraProps={{
+                  groupIndex,
+                  showValueField: !!formik.values.fn,
+                  onMoveToGroup: (
+                    movedItemIndex: number,
+                    moveToGroupIndex: number,
+                  ) => {
+                    const item = groupedOption.children[movedItemIndex];
+                    formik.setFieldValue(
+                      "groupedOptions",
+                      compose(
+                        adjust(moveToGroupIndex, (option: Group<Option>) => ({
+                          ...option,
+                          children: [...option.children, item],
+                        })),
+                        adjust(groupIndex, (option: Group<Option>) => ({
+                          ...option,
+                          children: remove(movedItemIndex, 1, option.children),
+                        })),
+                      )(formik.values.groupedOptions),
+                    );
+                  },
+                  groups: nonExclusiveOptionGroups.map(
+                    (opt: Group<Option>) => opt.title,
+                  ),
+                  schema: getOptionsSchemaByFn(
+                    formik.values.fn,
+                    schema,
+                    initialOptionVals,
+                  ),
+                }}
+              />
+            </Box>
+          </Box>
+        ),
+      )}
+      <Box mt={1}>
+        <Button
+          size="large"
+          onClick={() => {
+            formik.setFieldValue(`groupedOptions`, [
+              ...nonExclusiveOptionGroups,
+              {
+                title: "",
+                children: [],
+              },
+              ...exclusiveOptions,
+            ]);
+          }}
+        >
+          add new group
+        </Button>
+      </Box>
+      {exclusiveOrOptionManagerShouldRender ? (
+        <ExclusiveOrOptionManager
+          formik={formik}
+          grouped
+          exclusiveOptions={exclusiveOptions[0]?.children}
+          nonExclusiveOptions={nonExclusiveOptionGroups}
+        />
+      ) : (
+        <></>
+      )}
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
similarity index 100%
rename from editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
rename to editor.planx.uk/src/@planx/components/Checklist/Editor/components/OptionsEditor.tsx
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
index 73710bb574..7a23842d9d 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
@@ -1,152 +1,17 @@
-import Grid from "@mui/material/Grid";
-import { visuallyHidden } from "@mui/utils";
-import {
-  ChecklistLayout,
-  checklistValidationSchema,
-} from "@planx/components/Checklist/model";
-import Card from "@planx/components/shared/Preview/Card";
-import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
-import { getIn, useFormik } from "formik";
-import { partition } from "lodash";
-import React, { useEffect } from "react";
-import FullWidthWrapper from "ui/public/FullWidthWrapper";
-import ErrorWrapper from "ui/shared/ErrorWrapper";
-import { object } from "yup";
+import React from "react";
 
-import { Option } from "../../shared";
-import { Props } from "../types";
-import { ChecklistItems } from "./components/ChecklistItems";
-import { ExclusiveChecklistItem } from "./components/ExclusiveChecklistItem";
-import { GroupedChecklistOptions } from "./components/GroupedChecklistOptions";
-import { toggleNonExclusiveCheckbox } from "./helpers";
-import { useExclusiveOption } from "./hooks/useExclusiveOption";
-import { useSortedOptions } from "./hooks/useSortedOptions";
+import { PublicChecklistProps } from "../types";
+import { Checklist } from "./components/Checklist";
+import { GroupedChecklist } from "./components/GroupedChecklist";
 
-const ChecklistComponent: React.FC<Props> = (props) => {
-  const {
-    description = "",
-    groupedOptions,
-    handleSubmit,
-    howMeasured,
-    info,
-    options,
-    policyRef,
-    text,
-    img,
-    previouslySubmittedData,
-    id,
-    autoAnswers,
-  } = props;
-
-  const formik = useFormik<{ checked: Array<string> }>({
-    initialValues: {
-      checked: previouslySubmittedData?.answers || [],
-    },
-    onSubmit: (values) => {
-      handleSubmit?.({ answers: values.checked });
-    },
-    validateOnBlur: false,
-    validateOnChange: false,
-    validationSchema: object({
-      checked: checklistValidationSchema(props),
-    }),
-  });
-
-  const { setCheckedFieldValue, layout } = useSortedOptions(
-    options,
-    groupedOptions,
-    formik,
-  );
-
-  const [exclusiveOptions, nonExclusiveOptions]: Option[][] = partition(
-    options,
-    (option) => option.data.exclusive,
-  );
-
-  const {
-    exclusiveOrOption,
-    exclusiveOptionIsChecked,
-    toggleExclusiveCheckbox,
-  } = useExclusiveOption(exclusiveOptions, formik);
-
-  const changeCheckbox = (id: string) => () => {
-    const currentCheckedIds = formik.values.checked;
-
-    const currentCheckboxIsExclusiveOption =
-      exclusiveOrOption && id === exclusiveOrOption.id;
-
-    if (currentCheckboxIsExclusiveOption) {
-      const newCheckedIds = toggleExclusiveCheckbox(id);
-      setCheckedFieldValue(newCheckedIds);
-      return;
-    }
-    const newCheckedIds = toggleNonExclusiveCheckbox(
-      id,
-      currentCheckedIds,
-      exclusiveOrOption,
-    );
-    setCheckedFieldValue(newCheckedIds);
-  };
-
-  // Auto-answered Checklists still set a breadcrumb even though they render null
-  useEffect(() => {
-    if (autoAnswers) {
-      handleSubmit?.({
-        answers: autoAnswers,
-        auto: true,
-      });
-    }
-  }, [autoAnswers]);
-
-  // Auto-answered Checklists are not publicly visible
-  if (autoAnswers) {
-    return null;
-  }
+const ChecklistComponent: React.FC<PublicChecklistProps> = (props) => {
+  const { groupedOptions, options } = props;
 
   return (
-    <Card handleSubmit={formik.handleSubmit} isValid>
-      <CardHeader
-        title={text}
-        description={description}
-        info={info}
-        policyRef={policyRef}
-        howMeasured={howMeasured}
-        img={img}
-      />
-      <FullWidthWrapper>
-        <ErrorWrapper error={getIn(formik.errors, "checked")} id={id}>
-          <Grid
-            container
-            spacing={layout === ChecklistLayout.Images ? 2 : 0}
-            component="fieldset"
-          >
-            <legend style={visuallyHidden}>{text}</legend>
-            <ChecklistItems
-              nonExclusiveOptions={nonExclusiveOptions}
-              layout={layout}
-              changeCheckbox={changeCheckbox}
-              formik={formik}
-              exclusiveOptionIsChecked={exclusiveOptionIsChecked}
-            />
-            {exclusiveOrOption && (
-              <ExclusiveChecklistItem
-                exclusiveOrOption={exclusiveOrOption}
-                changeCheckbox={changeCheckbox}
-                formik={formik}
-              />
-            )}
-            {groupedOptions && (
-              <GroupedChecklistOptions
-                groupedOptions={groupedOptions}
-                previouslySubmittedData={previouslySubmittedData}
-                changeCheckbox={changeCheckbox}
-                formik={formik}
-              />
-            )}
-          </Grid>
-        </ErrorWrapper>
-      </FullWidthWrapper>
-    </Card>
+    <>
+      {groupedOptions && <GroupedChecklist {...props} />}
+      {options && <Checklist {...props} />}
+    </>
   );
 };
 
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/Checklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/Checklist.tsx
new file mode 100644
index 0000000000..954d74c658
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/Checklist.tsx
@@ -0,0 +1,132 @@
+import Grid from "@mui/material/Grid";
+import { visuallyHidden } from "@mui/utils";
+import {
+  ChecklistLayout,
+  checklistValidationSchema,
+} from "@planx/components/Checklist/model";
+import { Option } from "@planx/components/shared";
+import Card from "@planx/components/shared/Preview/Card";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
+import { getIn, useFormik } from "formik";
+import { partition } from "lodash";
+import React, { useEffect } from "react";
+import FullWidthWrapper from "ui/public/FullWidthWrapper";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import { object } from "yup";
+
+import { PublicChecklistProps } from "../../types";
+import { changeCheckbox } from "../helpers";
+import { useExclusiveOption } from "../hooks/useExclusiveOption";
+import { useSortedOptions } from "../hooks/useSortedOptions";
+import { ChecklistItems } from "./ChecklistItems";
+import { ExclusiveChecklistItem } from "./ExclusiveChecklistItem";
+
+export const Checklist: React.FC<PublicChecklistProps> = (props) => {
+  const {
+    description = "",
+    groupedOptions,
+    handleSubmit,
+    howMeasured,
+    info,
+    options,
+    policyRef,
+    text,
+    img,
+    previouslySubmittedData,
+    id,
+    autoAnswers,
+  } = props;
+
+  const formik = useFormik<{ checked: Array<string> }>({
+    initialValues: {
+      checked: previouslySubmittedData?.answers || [],
+    },
+    onSubmit: (values) => {
+      handleSubmit?.({ answers: values.checked });
+    },
+    validateOnBlur: false,
+    validateOnChange: false,
+    validationSchema: object({
+      checked: checklistValidationSchema(props),
+    }),
+  });
+
+  const { setCheckedFieldValue, layout } = useSortedOptions(
+    options,
+    groupedOptions,
+    formik,
+  );
+
+  const [exclusiveOptions, nonExclusiveOptions]: Option[][] = partition(
+    options,
+    (option) => option.data.exclusive,
+  );
+
+  const {
+    exclusiveOrOption,
+    exclusiveOptionIsChecked,
+    toggleExclusiveCheckbox,
+  } = useExclusiveOption(exclusiveOptions, formik);
+
+  const toggleCheckbox = (id: string) =>
+    changeCheckbox({
+      id,
+      setCheckedFieldValue,
+      currentCheckedIds: formik.values.checked,
+      exclusiveOrOption,
+      toggleExclusiveCheckbox,
+    });
+
+  // Auto-answered Checklists still set a breadcrumb even though they render null
+  useEffect(() => {
+    if (autoAnswers) {
+      handleSubmit?.({
+        answers: autoAnswers,
+        auto: true,
+      });
+    }
+  }, [autoAnswers, handleSubmit]);
+
+  // Auto-answered Checklists are not publicly visible
+  if (autoAnswers) {
+    return null;
+  }
+
+  return (
+    <Card handleSubmit={formik.handleSubmit} isValid>
+      <CardHeader
+        title={text}
+        description={description}
+        info={info}
+        policyRef={policyRef}
+        howMeasured={howMeasured}
+        img={img}
+      />
+      <FullWidthWrapper>
+        <ErrorWrapper error={getIn(formik.errors, "checked")} id={id}>
+          <Grid
+            container
+            spacing={layout === ChecklistLayout.Images ? 2 : 0}
+            component="fieldset"
+          >
+            <legend style={visuallyHidden}>{text}</legend>
+            <ChecklistItems
+              nonExclusiveOptions={nonExclusiveOptions}
+              layout={layout}
+              changeCheckbox={toggleCheckbox}
+              formik={formik}
+              exclusiveOptionIsChecked={exclusiveOptionIsChecked}
+            />
+            {exclusiveOrOption && (
+              <ExclusiveChecklistItem
+                exclusiveOrOption={exclusiveOrOption}
+                changeCheckbox={toggleCheckbox}
+                formik={formik}
+              />
+            )}
+          </Grid>
+        </ErrorWrapper>
+      </FullWidthWrapper>
+    </Card>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
new file mode 100644
index 0000000000..1e8da1a7c3
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
@@ -0,0 +1,129 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import { visuallyHidden } from "@mui/utils";
+import {
+  ChecklistLayout,
+  checklistValidationSchema,
+} from "@planx/components/Checklist/model";
+import Card from "@planx/components/shared/Preview/Card";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
+import { getIn, useFormik } from "formik";
+import React, { useEffect } from "react";
+import FullWidthWrapper from "ui/public/FullWidthWrapper";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import { object } from "yup";
+
+import { PublicChecklistProps } from "../../types";
+import { changeCheckbox, partitionGroupedOptions } from "../helpers";
+import { useExclusiveOptionInGroupedChecklist } from "../hooks/useExclusiveOption";
+import { useSortedOptions } from "../hooks/useSortedOptions";
+import { ExclusiveChecklistItem } from "./ExclusiveChecklistItem";
+import { GroupedChecklistOptions } from "./GroupedChecklistOptions";
+
+export const GroupedChecklist: React.FC<PublicChecklistProps> = (props) => {
+  const {
+    description = "",
+    groupedOptions,
+    handleSubmit,
+    howMeasured,
+    info,
+    options,
+    policyRef,
+    text,
+    img,
+    previouslySubmittedData,
+    id,
+    autoAnswers,
+  } = props;
+
+  const formik = useFormik<{ checked: Array<string> }>({
+    initialValues: {
+      checked: previouslySubmittedData?.answers || [],
+    },
+    onSubmit: (values) => {
+      handleSubmit?.({ answers: values.checked });
+    },
+    validateOnBlur: false,
+    validateOnChange: false,
+    validationSchema: object({
+      checked: checklistValidationSchema(props),
+    }),
+  });
+
+  const { setCheckedFieldValue, layout } = useSortedOptions(
+    options,
+    groupedOptions,
+    formik,
+  );
+
+  const [exclusiveOptionGroups, nonExclusiveOptionGroups] =
+    partitionGroupedOptions(groupedOptions!);
+
+  const { exclusiveOrOptionGroup, toggleExclusiveCheckbox } =
+    useExclusiveOptionInGroupedChecklist(exclusiveOptionGroups, formik);
+
+  const toggleCheckbox = (id: string) =>
+    changeCheckbox({
+      id,
+      setCheckedFieldValue,
+      currentCheckedIds: formik.values.checked,
+      exclusiveOrOption: exclusiveOrOptionGroup?.children[0],
+      toggleExclusiveCheckbox,
+    });
+
+  // Auto-answered Checklists still set a breadcrumb even though they render null
+  useEffect(() => {
+    if (autoAnswers) {
+      handleSubmit?.({
+        answers: autoAnswers,
+        auto: true,
+      });
+    }
+  }, [autoAnswers, handleSubmit]);
+
+  // Auto-answered Checklists are not publicly visible
+  if (autoAnswers) {
+    return null;
+  }
+
+  return (
+    <Card handleSubmit={formik.handleSubmit} isValid>
+      <CardHeader
+        title={text}
+        description={description}
+        info={info}
+        policyRef={policyRef}
+        howMeasured={howMeasured}
+        img={img}
+      />
+      <FullWidthWrapper>
+        <ErrorWrapper error={getIn(formik.errors, "checked")} id={id}>
+          <Grid
+            container
+            spacing={layout === ChecklistLayout.Images ? 2 : 0}
+            component="fieldset"
+          >
+            <legend style={visuallyHidden}>{text}</legend>
+            {nonExclusiveOptionGroups && (
+              <GroupedChecklistOptions
+                groupedOptions={nonExclusiveOptionGroups}
+                previouslySubmittedData={previouslySubmittedData}
+                changeCheckbox={toggleCheckbox}
+                formik={formik}
+              />
+            )}
+            <Box pt={1}>
+              {exclusiveOrOptionGroup && (
+                <ExclusiveChecklistItem
+                  exclusiveOrOption={exclusiveOrOptionGroup?.children[0]}
+                  changeCheckbox={toggleCheckbox}
+                  formik={formik}
+                />
+              )}
+            </Box>
+          </Grid>
+        </ErrorWrapper>
+      </FullWidthWrapper>
+    </Card>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
index 986465fa46..6c7e4afe44 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
@@ -1,4 +1,5 @@
 import { type Group } from "@planx/components/Checklist/model";
+import { partition } from "lodash";
 import { Store } from "pages/FlowEditor/lib/store";
 
 import { Option } from "../../shared";
@@ -11,30 +12,30 @@ export function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
 
 export function groupHasOptionSelected(
   group: Group<Option>,
-  answers: string[]
+  answers: string[],
 ) {
   return group.children.some((child) => answers.some((id) => child.id === id));
 }
 
 export function getInitialExpandedGroups(
   groupedOptions?: Array<Group<Option>>,
-  previouslySubmittedData?: Store.UserData
+  previouslySubmittedData?: Store.UserData,
 ) {
   return (groupedOptions ?? ([] as Group<Option>[])).reduce(
     (acc, group, index) =>
       groupHasOptionSelected(group, previouslySubmittedData?.answers ?? [])
         ? [...acc, index]
         : acc,
-    [] as number[]
+    [] as number[],
   );
 }
 
 export const toggleCheckbox = (
   thisCheckboxId: string,
-  currentlyCheckedOptionIds: string[]
+  currentlyCheckedOptionIds: string[],
 ) => {
   const toggleOff = currentlyCheckedOptionIds.filter(
-    (id) => id !== thisCheckboxId
+    (id) => id !== thisCheckboxId,
   );
 
   const toggleOn = [...currentlyCheckedOptionIds, thisCheckboxId];
@@ -47,16 +48,59 @@ export const toggleCheckbox = (
 export const toggleNonExclusiveCheckbox = (
   thisCheckboxId: string,
   currentlyCheckedOptionIds: string[],
-  exclusiveOrOption: Option
+  exclusiveOrOption: Option,
 ) => {
   const newCheckedOptionIds = toggleCheckbox(
     thisCheckboxId,
-    currentlyCheckedOptionIds
+    currentlyCheckedOptionIds,
   );
   if (exclusiveOrOption) {
     return newCheckedOptionIds.filter(
-      (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id
+      (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id,
     );
   }
   return newCheckedOptionIds;
 };
+
+export const partitionGroupedOptions = (
+  groupedOptions: Group<Option>[],
+): Group<Option>[][] => {
+  const [exclusiveOptionGroup, nonExclusiveOptionGroups] = partition(
+    groupedOptions,
+    (group: Group<Option>) =>
+      group.exclusive ||
+      group.children.some((child) => child.data.exclusive === true),
+  );
+  return [exclusiveOptionGroup, nonExclusiveOptionGroups];
+};
+
+export const changeCheckbox =
+  ({
+    id,
+    setCheckedFieldValue,
+    currentCheckedIds,
+    exclusiveOrOption,
+    toggleExclusiveCheckbox,
+  }: {
+    id: string;
+    setCheckedFieldValue: (optionIds: string[]) => void;
+    currentCheckedIds: string[];
+    exclusiveOrOption: Option;
+    toggleExclusiveCheckbox: (checkboxId: string) => string[];
+  }) =>
+  () => {
+    const currentCheckboxIsExclusiveOption =
+      exclusiveOrOption && id === exclusiveOrOption.id;
+
+    if (currentCheckboxIsExclusiveOption) {
+      const newCheckedIds = toggleExclusiveCheckbox(id);
+      setCheckedFieldValue(newCheckedIds);
+      return;
+    }
+    const newCheckedIds = toggleNonExclusiveCheckbox(
+      id,
+      currentCheckedIds,
+      exclusiveOrOption,
+    );
+    setCheckedFieldValue(newCheckedIds);
+  };
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx
index 85dd1d0a4f..48d19a535a 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx
@@ -1,10 +1,11 @@
 import { FormikProps } from "formik";
 
 import { Option } from "../../../shared";
+import { Group } from "../../model";
 
 export const useExclusiveOption = (
   exclusiveOptions: Option[],
-  formik: FormikProps<{ checked: Array<string> }>
+  formik: FormikProps<{ checked: Array<string> }>,
 ) => {
   const [exclusiveOrOption] = exclusiveOptions;
 
@@ -21,3 +22,24 @@ export const useExclusiveOption = (
     toggleExclusiveCheckbox,
   };
 };
+
+export const useExclusiveOptionInGroupedChecklist = (
+  exclusiveOptions: Group<Option>[],
+  formik: FormikProps<{ checked: Array<string> }>,
+) => {
+  const [exclusiveOrOptionGroup] = exclusiveOptions;
+
+  const exclusiveOptionIsChecked =
+    exclusiveOrOptionGroup &&
+    formik.values.checked.includes(exclusiveOrOptionGroup.children[0].id);
+
+  const toggleExclusiveCheckbox = (checkboxId: string) => {
+    return exclusiveOptionIsChecked ? [] : [checkboxId];
+  };
+
+  return {
+    exclusiveOrOptionGroup,
+    exclusiveOptionIsChecked,
+    toggleExclusiveCheckbox,
+  };
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useInitialOptions.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useInitialOptions.tsx
new file mode 100644
index 0000000000..0c0ba08e03
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useInitialOptions.tsx
@@ -0,0 +1,19 @@
+import { Group } from "@planx/components/Checklist/model";
+import { useStore } from "pages/FlowEditor/lib/store";
+import { FormikHookReturn } from "types";
+
+import { Option } from "../../../shared";
+
+export const useInitialOptions = (formik: FormikHookReturn) => {
+  const schema = useStore().getFlowSchema()?.options;
+
+  const initialOptions: Option[] | undefined =
+    formik.initialValues.options ||
+    formik.initialValues.groupedOptions
+      ?.map((group: Group<Option>) => group.children)
+      ?.flat();
+
+  const initialOptionVals = initialOptions?.map((option) => option.data?.val);
+
+  return { initialOptions, schema, initialOptionVals };
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
index cc4a72156b..6f1fa6b856 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
@@ -6,7 +6,11 @@ import { axe } from "vitest-axe";
 
 import { ChecklistLayout } from "../../model";
 import Checklist from "../Public";
-import { groupedOptions, options } from "./mockOptions";
+import {
+  groupedOptions,
+  groupedOptionsWithExclusiveOption,
+  options,
+} from "./mockOptions";
 import { pressContinue, pressOption } from "./testUtils";
 
 describe("Checklist Component - Grouped Layout", () => {
@@ -58,6 +62,50 @@ describe("Checklist Component - Grouped Layout", () => {
     });
   });
 
+  it("handles exclusive Or options correctly", async () => {
+    const handleSubmit = vi.fn();
+
+    const { user } = setup(
+      <Checklist
+        allRequired={false}
+        description=""
+        text="home type?"
+        handleSubmit={handleSubmit}
+        groupedOptions={groupedOptionsWithExclusiveOption}
+      />,
+    );
+
+    // user presses an option in section 1
+    await user.click(screen.getByText("Section 1"));
+
+    const nonExclusiveOption = screen.getByLabelText("S1 Option1");
+    await user.click(nonExclusiveOption);
+    expect(nonExclusiveOption).toHaveAttribute("checked");
+
+    const exclusiveOption = screen.getByLabelText("Exclusive");
+    await user.click(exclusiveOption);
+
+    expect(nonExclusiveOption).not.toHaveAttribute("checked");
+    expect(exclusiveOption).toHaveAttribute("checked");
+
+    await user.click(screen.getByText("Section 2"));
+    const exclusiveOptionInSection2 = screen.getByLabelText("S2 Option1");
+    await user.click(exclusiveOptionInSection2);
+
+    expect(exclusiveOptionInSection2).toHaveAttribute("checked");
+    expect(exclusiveOption).not.toHaveAttribute("checked");
+
+    // user presses two more non-exclusive options
+    await user.click(screen.getByText("S1 Option1"));
+    await user.click(screen.getByText("S2 Option2"));
+
+    await user.click(screen.getByTestId("continue-button"));
+
+    expect(handleSubmit).toHaveBeenCalledWith({
+      answers: ["S1_Option1", "S2_Option1", "S2_Option2"],
+    });
+  });
+
   it("should not have any accessibility violations", async () => {
     const { container } = setup(
       <Checklist
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
index e655712b6b..73dbf2bd9f 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
@@ -121,3 +121,47 @@ export const groupedOptions: Array<Group<Option>> = [
     ],
   },
 ];
+
+export const groupedOptionsWithExclusiveOption: Array<Group<Option>> = [
+  {
+    title: "Section 1",
+    children: [
+      {
+        id: "S1_Option1",
+        data: {
+          text: "S1 Option1",
+        },
+      },
+    ],
+  },
+  {
+    title: "Section 2",
+    children: [
+      {
+        id: "S2_Option1",
+        data: {
+          text: "S2 Option1",
+        },
+      },
+      {
+        id: "S2_Option2",
+        data: {
+          text: "S2 Option2",
+        },
+      },
+    ],
+  },
+  {
+    title: "Exclusive 'Or' Option",
+    exclusive: true,
+    children: [
+      {
+        id: "exclusive_option",
+        data: {
+          text: "Exclusive",
+          exclusive: true,
+        },
+      },
+    ],
+  },
+];
diff --git a/editor.planx.uk/src/@planx/components/Checklist/model.ts b/editor.planx.uk/src/@planx/components/Checklist/model.ts
index 0ac307c34c..e65e02c789 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/model.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/model.ts
@@ -1,3 +1,4 @@
+import { partition } from "lodash";
 import { array } from "yup";
 
 import { BaseNodeData, Option } from "../shared";
@@ -10,6 +11,7 @@ export enum ChecklistLayout {
 
 export interface Group<T> {
   title: string;
+  exclusive?: true;
   children: Array<T>;
 }
 
@@ -36,34 +38,51 @@ interface ChecklistExpandableProps {
   groupedOptions?: Array<Group<Option>>;
 }
 
-export const toggleExpandableChecklist = (
-  checklist: ChecklistExpandableProps,
-): ChecklistExpandableProps => {
-  if (checklist.options !== undefined && checklist.options.length > 0) {
+export const toggleExpandableChecklist = ({
+  options,
+  groupedOptions,
+}: ChecklistExpandableProps) => {
+  const checklist = [options, groupedOptions];
+
+  // toggle from unexpanded to expanded
+  if (options !== undefined && options.length > 0) {
+    const [exclusiveOptions, nonExclusiveOptions]: Option[][] = partition(
+      options,
+      (option) => option.data.exclusive,
+    );
+
+    const newGroupedOptions = [
+      {
+        title: "Section 1",
+        children: nonExclusiveOptions,
+      },
+    ];
+
+    if (exclusiveOptions.length > 0) {
+      newGroupedOptions.push({
+        title: "Or",
+        children: exclusiveOptions,
+      });
+    }
+
     return {
       ...checklist,
-      groupedOptions: [
-        {
-          title: "Section 1",
-          children: checklist.options,
-        },
-      ],
+      groupedOptions: newGroupedOptions,
       options: undefined,
     };
-  } else if (
-    checklist.groupedOptions !== undefined &&
-    checklist.groupedOptions.length > 0
-  ) {
+
+    // toggle from expanded to unexpanded
+  } else if (groupedOptions !== undefined && groupedOptions.length > 0) {
     return {
       ...checklist,
-      options: checklist.groupedOptions.flatMap((opt) => opt.children),
+      options: groupedOptions.flatMap((opt) => opt.children),
       groupedOptions: undefined,
     };
   } else {
     return {
       ...checklist,
-      options: checklist.options || [],
-      groupedOptions: checklist.groupedOptions || [
+      options: options || [],
+      groupedOptions: groupedOptions || [
         {
           title: "Section 1",
           children: [],
diff --git a/editor.planx.uk/src/@planx/components/Checklist/types.ts b/editor.planx.uk/src/@planx/components/Checklist/types.ts
index c06172c321..6dca381d67 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/types.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/types.ts
@@ -18,4 +18,4 @@ export interface ChecklistProps extends Checklist {
   };
 }
 
-export type Props = PublicProps<Checklist>;
+export type PublicChecklistProps = PublicProps<Checklist>;
diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index 29c3540fad..8722a26913 100644
--- a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -5,12 +5,13 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
 import { Option } from ".";
-import { FlagsSelect } from "./FlagsSelect";
 import { DataFieldAutocomplete } from "./DataFieldAutocomplete";
+import { FlagsSelect } from "./FlagsSelect";
 
 export interface BaseOptionsEditorProps {
   value: Option;
   schema?: string[];
+  optionPlaceholder?: string;
   showValueField?: boolean;
   showDescriptionField?: boolean;
   onChange: (newVal: Option) => void;
@@ -38,7 +39,7 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
               },
             });
           }}
-          placeholder="Option"
+          placeholder={props.optionPlaceholder || "Option"}
         />
       </InputRowItem>
       <ImgInput
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index c55a0eae06..b8ca8d6beb 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -2,10 +2,10 @@ import { gql } from "@apollo/client";
 import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
 import {
   ComponentType as TYPES,
+  flatFlags,
   FlowGraph,
   NodeId,
   OrderedFlow,
-  flatFlags,
 } from "@opensystemslab/planx-core/types";
 import {
   add,
@@ -189,7 +189,7 @@ export interface EditorStore extends Store.Store {
     href: string;
   }) => void;
   getURLForNode: (nodeId: string) => string;
-  getFlowSchema: () => { nodes?: string[], options?: string[] } | undefined;
+  getFlowSchema: () => { nodes?: string[]; options?: string[] } | undefined;
 }
 
 export const editorStore: StateCreator<
@@ -620,8 +620,8 @@ export const editorStore: StateCreator<
       if (node.data?.val) {
         // Exclude Filter Option flag values as not exposed to editors
         const flagVals = flatFlags.map((flag) => flag.value);
-        if (!flagVals.includes(node.data.val)) options.add(node.data.val)
-      };
+        if (!flagVals.includes(node.data.val)) options.add(node.data.val);
+      }
     });
 
     return {
diff --git a/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx b/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
index 6e4e7cb1c7..10d730f962 100644
--- a/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
+++ b/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
@@ -54,7 +54,7 @@ export default function ErrorWrapper({
   return (
     <Root error={error} role={role} data-testid="error-wrapper">
       <ErrorText id={inputId} data-testid={inputId} variant="body1">
-        {error && error}
+        {error}
       </ErrorText>
       {children || null}
     </Root>