diff --git a/package.json b/package.json
index 293649efb..759f3bc0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.9.0-dev.4cf104c",
+  "version": "14.9.0-dev.b9c2a3b",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
index 9bebc0414..4292cfe19 100644
--- a/src/core/Accordion.tsx
+++ b/src/core/Accordion.tsx
@@ -147,7 +147,18 @@ const Accordion = ({
   options,
   ...props
 }: AccordionProps) => {
-  const [openRowValues, setOpenRowValues] = useState<string | string[]>([]);
+  const openIndexes = useMemo(() => {
+    const indexValues = data.map((_, i) => `accordion-item-${i}`);
+    return options?.fullyOpen
+      ? indexValues
+      : indexValues.filter((_, index) =>
+          options?.defaultOpenIndexes?.includes(index),
+        );
+  }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);
+
+  const [openRowValues, setOpenRowValues] = useState<string | string[]>(
+    openIndexes,
+  );
   const innerAccordion = data.map((item, index) => (
     <AccordionRow
       key={item.name}
@@ -166,15 +177,6 @@ const Accordion = ({
     </AccordionRow>
   ));
 
-  const openIndexes = useMemo(() => {
-    const indexValues = data.map((_, i) => `accordion-item-${i}`);
-    return options?.fullyOpen
-      ? indexValues
-      : indexValues.filter((_, index) =>
-          options?.defaultOpenIndexes?.includes(index),
-        );
-  }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);
-
   return (
     <div {...props}>
       {options?.autoClose ? (
diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
index 2060c8ecb..50c03716d 100644
--- a/src/core/Accordion/Accordion.stories.tsx
+++ b/src/core/Accordion/Accordion.stories.tsx
@@ -100,7 +100,7 @@ export const SelectableHeaders = {
   render: () =>
     AccordionPresentation({
       data: dataWithIcons,
-      options: { selectable: true },
+      options: { selectable: true, defaultOpenIndexes: [0] },
     }),
   parameters: {
     docs: {
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index 2e3301754..7c9628e39 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -223,7 +223,7 @@ export const Toggles = {
       </div>
       <div className="flex gap-16 items-center">
         <label className="ui-toggle">
-          <input type="checkbox" checked />
+          <input type="checkbox" defaultChecked />
           <span className="ui-toggle-slider" />
         </label>
         <p>Pre-checked</p>