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 2e5a08ded6..fa60443d44 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
@@ -1,40 +1,9 @@
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import { visuallyHidden } from "@mui/utils";
-import {
-  checklistValidationSchema,
-  getFlatOptions,
-  getLayout,
-} from "@planx/components/Checklist/model";
-import ImageButton from "@planx/components/shared/Buttons/ImageButton";
-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 { useStore } from "pages/FlowEditor/lib/store";
-import React, { useState } from "react";
-import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
-import FormWrapper from "ui/public/FormWrapper";
-import FullWidthWrapper from "ui/public/FullWidthWrapper";
-import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
-import ErrorWrapper from "ui/shared/ErrorWrapper";
-import { object } from "yup";
+import React from "react";
 
-import { Option } from "../../shared";
 import { Props } from "../types";
-import { AutoAnsweredChecklist } from "./AutoAnsweredChecklist";
-import {
-  getInitialExpandedGroups,
-  toggleInArray,
-  toggleNonExclusiveCheckbox,
-} from "./helpers";
-
-export enum ChecklistLayout {
-  Basic,
-  Grouped,
-  Images,
-}
+import { AutoAnsweredChecklist } from "./components/AutoAnsweredChecklist";
+import { VisibleChecklist } from "./components/VisibleChecklist";
 
 const ChecklistComponent: React.FC<Props> = (props) => {
   const autoAnswerableOptions = useStore(
@@ -56,212 +25,4 @@ const ChecklistComponent: React.FC<Props> = (props) => {
   return <VisibleChecklist {...props} />;
 };
 
-const VisibleChecklist: React.FC<Props> = (props) => {
-  const {
-    description = "",
-    groupedOptions,
-    handleSubmit,
-    howMeasured,
-    info,
-    options,
-    policyRef,
-    text,
-    img,
-    previouslySubmittedData,
-    id,
-  } = 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 = (optionIds: string[]) => {
-    const sortedCheckedIds = sortCheckedIds(optionIds);
-    formik.setFieldValue("checked", sortedCheckedIds);
-  };
-
-  const initialExpandedGroups = getInitialExpandedGroups(
-    groupedOptions,
-    previouslySubmittedData
-  );
-
-  const [expandedGroups, setExpandedGroups] = useState<Array<number>>(
-    initialExpandedGroups
-  );
-
-  const layout = getLayout({ options, groupedOptions });
-  const flatOptions = getFlatOptions({ options, groupedOptions });
-
-  const sortCheckedIds = (ids: string[]): string[] => {
-    const originalIds = flatOptions.map((cb) => cb.id);
-    return ids.sort((a, b) => originalIds.indexOf(a) - originalIds.indexOf(b));
-  };
-
-  const [exclusiveOptions, nonExclusiveOptions]: Option[][] = partition(
-    options,
-    (option) => option.data.exclusive
-  );
-
-  const exclusiveOrOption = exclusiveOptions[0];
-
-  const exclusiveOptionIsChecked =
-    exclusiveOrOption && formik.values.checked.includes(exclusiveOrOption.id);
-
-  const toggleExclusiveCheckbox = (checkboxId: string) => {
-    return exclusiveOptionIsChecked ? [] : [checkboxId];
-  };
-
-  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);
-  };
-
-  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>
-            {nonExclusiveOptions.map((option) =>
-              layout === ChecklistLayout.Basic ? (
-                <FormWrapper key={option.id}>
-                  <Grid item xs={12} key={option.data.text}>
-                    <ChecklistItem
-                      onChange={changeCheckbox(option.id)}
-                      label={option.data.text}
-                      id={option.id}
-                      checked={
-                        formik.values.checked.includes(option.id) &&
-                        !exclusiveOptionIsChecked
-                      }
-                    />
-                  </Grid>
-                </FormWrapper>
-              ) : (
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  contentWrap={4}
-                  key={option.data.text}
-                >
-                  <ImageButton
-                    title={option.data.text}
-                    id={option.id}
-                    img={option.data.img}
-                    selected={formik.values.checked.includes(option.id)}
-                    onClick={changeCheckbox(option.id)}
-                    checkbox
-                  />
-                </Grid>
-              )
-            )}
-            {exclusiveOrOption && (
-              <FormWrapper key={exclusiveOrOption.id}>
-                <Grid item xs={12} key={exclusiveOrOption.data.text}>
-                  <Typography width={36} display="flex" justifyContent="center">
-                    or
-                  </Typography>
-
-                  <ChecklistItem
-                    onChange={changeCheckbox(exclusiveOrOption.id)}
-                    label={exclusiveOrOption.data.text}
-                    id={exclusiveOrOption.id}
-                    checked={formik.values.checked.includes(
-                      exclusiveOrOption.id
-                    )}
-                  />
-                </Grid>
-              </FormWrapper>
-            )}
-
-            {groupedOptions && (
-              <FormWrapper>
-                <Grid item xs={12}>
-                  <ExpandableList>
-                    {groupedOptions.map((group, index) => {
-                      const isExpanded = expandedGroups.includes(index);
-                      return (
-                        <ExpandableListItem
-                          key={index}
-                          expanded={isExpanded}
-                          onToggle={() => {
-                            setExpandedGroups((previous) =>
-                              toggleInArray(index, previous)
-                            );
-                          }}
-                          headingId={`group-${index}-heading`}
-                          groupId={`group-${index}-content`}
-                          title={group.title}
-                        >
-                          <Box
-                            pt={0.5}
-                            pb={2}
-                            aria-labelledby={`group-${index}-heading`}
-                            id={`group-${index}-content`}
-                            data-testid={`group-${index}${
-                              isExpanded ? "-expanded" : ""
-                            }`}
-                          >
-                            {group.children.map((option) => (
-                              <ChecklistItem
-                                onChange={changeCheckbox(option.id)}
-                                key={option.data.text}
-                                label={option.data.text}
-                                id={option.id}
-                                checked={formik.values.checked.includes(
-                                  option.id
-                                )}
-                              />
-                            ))}
-                          </Box>
-                        </ExpandableListItem>
-                      );
-                    })}
-                  </ExpandableList>
-                </Grid>
-              </FormWrapper>
-            )}
-          </Grid>
-        </ErrorWrapper>
-      </FullWidthWrapper>
-    </Card>
-  );
-};
 export default ChecklistComponent;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/AutoAnsweredChecklist.tsx
similarity index 90%
rename from editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx
rename to editor.planx.uk/src/@planx/components/Checklist/Public/components/AutoAnsweredChecklist.tsx
index 1bb8c1ae1a..bca1b81cc4 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/AutoAnsweredChecklist.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-import { Props } from "../types";
+import { Props } from "../../types";
 
 // An auto-answered Checklist won't be seen by the user, but still leaves a breadcrumb
 export const AutoAnsweredChecklist: React.FC<
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/ChecklistItems.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/ChecklistItems.tsx
new file mode 100644
index 0000000000..16f676ea8e
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/ChecklistItems.tsx
@@ -0,0 +1,56 @@
+import Grid from "@mui/material/Grid";
+import { Option } from "@planx/components/shared";
+import ImageButton from "@planx/components/shared/Buttons/ImageButton";
+import { FormikProps } from "formik";
+import React from "react";
+import FormWrapper from "ui/public/FormWrapper";
+import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
+
+import { ChecklistLayout } from "./VisibleChecklist";
+
+interface Props {
+  nonExclusiveOptions: Option[];
+  layout: ChecklistLayout;
+  changeCheckbox: (id: string) => () => void;
+  formik: FormikProps<{ checked: Array<string> }>;
+  exclusiveOptionIsChecked: boolean;
+}
+
+export const ChecklistItems = ({
+  nonExclusiveOptions,
+  layout,
+  changeCheckbox,
+  formik,
+  exclusiveOptionIsChecked,
+}: Props) => (
+  <>
+    {nonExclusiveOptions.map((option: Option) =>
+      layout === ChecklistLayout.Basic ? (
+        <FormWrapper key={option.id}>
+          <Grid item xs={12} key={option.data.text}>
+            <ChecklistItem
+              onChange={changeCheckbox(option.id)}
+              label={option.data.text}
+              id={option.id}
+              checked={
+                formik.values.checked.includes(option.id) &&
+                !exclusiveOptionIsChecked
+              }
+            />
+          </Grid>
+        </FormWrapper>
+      ) : (
+        <Grid item xs={12} sm={6} contentWrap={4} key={option.data.text}>
+          <ImageButton
+            title={option.data.text}
+            id={option.id}
+            img={option.data.img}
+            selected={formik.values.checked.includes(option.id)}
+            onClick={changeCheckbox(option.id)}
+            checkbox
+          />
+        </Grid>
+      )
+    )}
+  </>
+);
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/ExclusiveChecklistItem.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/ExclusiveChecklistItem.tsx
new file mode 100644
index 0000000000..05cffb287f
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/ExclusiveChecklistItem.tsx
@@ -0,0 +1,32 @@
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { FormikProps } from "formik";
+import React from "react";
+import FormWrapper from "ui/public/FormWrapper";
+import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
+
+import { Option } from "../../../shared";
+
+export const ExclusiveChecklistItem = ({
+  exclusiveOrOption,
+  changeCheckbox,
+  formik,
+}: {
+  exclusiveOrOption: Option;
+  changeCheckbox: (id: string) => () => void;
+  formik: FormikProps<{ checked: Array<string> }>;
+}) => (
+  <FormWrapper key={exclusiveOrOption.id}>
+    <Grid item xs={12} key={exclusiveOrOption.data.text}>
+      <Typography width={36} display="flex" justifyContent="center">
+        or
+      </Typography>
+      <ChecklistItem
+        onChange={changeCheckbox(exclusiveOrOption.id)}
+        label={exclusiveOrOption.data.text}
+        id={exclusiveOrOption.id}
+        checked={formik.values.checked.includes(exclusiveOrOption.id)}
+      />
+    </Grid>
+  </FormWrapper>
+);
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklistOptions.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklistOptions.tsx
new file mode 100644
index 0000000000..36259966fb
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklistOptions.tsx
@@ -0,0 +1,71 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import { Group } from "@planx/components/Checklist/model";
+import { FormikProps } from "formik";
+import { Store } from "pages/FlowEditor/lib/store";
+import React from "react";
+import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
+import FormWrapper from "ui/public/FormWrapper";
+import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
+
+import { Option } from "../../../shared";
+import { useExpandedGroups } from "../hooks/useExpandedGroups";
+
+interface GroupedChecklistOptionsProps {
+  groupedOptions: Group<Option>[];
+  previouslySubmittedData: Store.UserData | undefined;
+  changeCheckbox: (id: string) => () => void;
+  formik: FormikProps<{ checked: Array<string> }>;
+}
+
+export const GroupedChecklistOptions = ({
+  groupedOptions,
+  previouslySubmittedData,
+  changeCheckbox,
+  formik,
+}: GroupedChecklistOptionsProps) => {
+  const { expandedGroups, toggleGroup } = useExpandedGroups(
+    groupedOptions,
+    previouslySubmittedData
+  );
+
+  return (
+    <FormWrapper>
+      <Grid item xs={12}>
+        <ExpandableList>
+          {groupedOptions.map((group: Group<Option>, index: number) => {
+            const isExpanded = expandedGroups.includes(index);
+            return (
+              <ExpandableListItem
+                key={index}
+                expanded={isExpanded}
+                onToggle={() => toggleGroup(index)}
+                headingId={`group-${index}-heading`}
+                groupId={`group-${index}-content`}
+                title={group.title}
+              >
+                <Box
+                  pt={0.5}
+                  pb={2}
+                  aria-labelledby={`group-${index}-heading`}
+                  id={`group-${index}-content`}
+                  data-testid={`group-${index}${isExpanded ? "-expanded" : ""}`}
+                >
+                  {group.children.map((option) => (
+                    <ChecklistItem
+                      onChange={changeCheckbox(option.id)}
+                      key={option.data.text}
+                      label={option.data.text}
+                      id={option.id}
+                      checked={formik.values.checked.includes(option.id)}
+                    />
+                  ))}
+                </Box>
+              </ExpandableListItem>
+            );
+          })}
+        </ExpandableList>
+      </Grid>
+    </FormWrapper>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/VisibleChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/VisibleChecklist.tsx
new file mode 100644
index 0000000000..a2d730a1f5
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/VisibleChecklist.tsx
@@ -0,0 +1,138 @@
+import Grid from "@mui/material/Grid";
+import { visuallyHidden } from "@mui/utils";
+import { 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 from "react";
+import FullWidthWrapper from "ui/public/FullWidthWrapper";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import { object } from "yup";
+
+import { Option } from "../../../shared";
+import { Props } from "../../types";
+import { useExclusiveOption } from "../hooks/useExclusiveOption";
+import { useSortedOptions } from "../hooks/useSortedOptions";
+import { ChecklistItems } from "./../components/ChecklistItems";
+import { ExclusiveChecklistItem } from "./../components/ExclusiveChecklistItem";
+import { toggleNonExclusiveCheckbox } from "./../helpers";
+import { GroupedChecklistOptions } from "./GroupedChecklistOptions";
+
+export enum ChecklistLayout {
+  Basic,
+  Grouped,
+  Images,
+}
+
+export const VisibleChecklist: React.FC<Props> = (props) => {
+  const {
+    description = "",
+    groupedOptions,
+    handleSubmit,
+    howMeasured,
+    info,
+    options,
+    policyRef,
+    text,
+    img,
+    previouslySubmittedData,
+    id,
+  } = 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);
+  };
+
+  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>
+  );
+};
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
new file mode 100644
index 0000000000..85dd1d0a4f
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx
@@ -0,0 +1,23 @@
+import { FormikProps } from "formik";
+
+import { Option } from "../../../shared";
+
+export const useExclusiveOption = (
+  exclusiveOptions: Option[],
+  formik: FormikProps<{ checked: Array<string> }>
+) => {
+  const [exclusiveOrOption] = exclusiveOptions;
+
+  const exclusiveOptionIsChecked =
+    exclusiveOrOption && formik.values.checked.includes(exclusiveOrOption.id);
+
+  const toggleExclusiveCheckbox = (checkboxId: string) => {
+    return exclusiveOptionIsChecked ? [] : [checkboxId];
+  };
+
+  return {
+    exclusiveOrOption,
+    exclusiveOptionIsChecked,
+    toggleExclusiveCheckbox,
+  };
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExpandedGroups.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExpandedGroups.tsx
new file mode 100644
index 0000000000..effe2b291a
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExpandedGroups.tsx
@@ -0,0 +1,26 @@
+import { Group } from "@planx/components/Checklist/model";
+import { Store } from "pages/FlowEditor/lib/store";
+import { useState } from "react";
+
+import { Option } from "../../../shared";
+import { getInitialExpandedGroups, toggleInArray } from "./../helpers";
+
+export const useExpandedGroups = (
+  groupedOptions: Group<Option>[] | undefined,
+  previouslySubmittedData: Store.UserData | undefined
+) => {
+  const initialExpandedGroups = getInitialExpandedGroups(
+    groupedOptions,
+    previouslySubmittedData
+  );
+
+  const [expandedGroups, setExpandedGroups] = useState<Array<number>>(
+    initialExpandedGroups
+  );
+
+  const toggleGroup = (index: number) => {
+    setExpandedGroups((previous) => toggleInArray(index, previous));
+  };
+
+  return { expandedGroups, toggleGroup };
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useSortedOptions.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useSortedOptions.tsx
new file mode 100644
index 0000000000..36c0d632d8
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useSortedOptions.tsx
@@ -0,0 +1,28 @@
+import { FormikProps } from "formik";
+
+import { Option } from "../../../shared";
+import { getFlatOptions, getLayout, Group } from "../../model";
+
+export const useSortedOptions = (
+  options: Option[] | undefined,
+  groupedOptions: Group<Option>[] | undefined,
+  formik: FormikProps<{ checked: Array<string> }>
+) => {
+  const setCheckedFieldValue = (optionIds: string[]) => {
+    const sortedCheckedIds = sortCheckedIds(optionIds);
+    formik.setFieldValue("checked", sortedCheckedIds);
+  };
+
+  const layout = getLayout({ options, groupedOptions });
+  const flatOptions = getFlatOptions({ options, groupedOptions });
+
+  const sortCheckedIds = (ids: string[]): string[] => {
+    const originalIds = flatOptions.map((cb) => cb.id);
+    return ids.sort((a, b) => originalIds.indexOf(a) - originalIds.indexOf(b));
+  };
+
+  return {
+    setCheckedFieldValue,
+    layout,
+  };
+};
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 1fbc9de324..896dfe5d15 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
@@ -4,7 +4,8 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-import Checklist, { ChecklistLayout } from "../Public";
+import { ChecklistLayout } from "../components/VisibleChecklist";
+import Checklist from "../Public";
 import { groupedOptions, options } from "./mockOptions";
 import { pressContinue, pressOption } from "./testUtils";
 
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 c0b269a996..a5fc1a0074 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
@@ -1,7 +1,8 @@
 import { Option } from "@planx/components/shared";
 
 import { Group } from "../../model";
-import { ChecklistLayout } from "../Public";
+import { ChecklistLayout } from "../components/VisibleChecklist";
+
 
 export const options: {
   [key in ChecklistLayout]?: Array<Option>;
@@ -65,7 +66,7 @@ export const options: {
 };
 
 export const optionsWithExclusiveOption: Array<Option> = [
-  ...options[ChecklistLayout.Basic] || [],
+  ...(options[ChecklistLayout.Basic] || []),
   { id: "tent_id", data: { text: "Tent", 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 d5ade4d68e..67ab2f694c 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/model.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/model.ts
@@ -1,7 +1,7 @@
 import { array } from "yup";
 
 import { BaseNodeData, Option } from "../shared";
-import { ChecklistLayout } from "./Public/Public";
+import { ChecklistLayout } from "./Public/components/VisibleChecklist";
 
 export interface Group<T> {
   title: string;
@@ -31,7 +31,7 @@ interface ChecklistExpandableProps {
 }
 
 export const toggleExpandableChecklist = (
-  checklist: ChecklistExpandableProps,
+  checklist: ChecklistExpandableProps
 ): ChecklistExpandableProps => {
   if (checklist.options !== undefined && checklist.options.length > 0) {
     return {