diff --git a/site/docs/components/accordion/examples.mdx b/site/docs/components/accordion/examples.mdx
index ffde19ac8e6..8061529d328 100644
--- a/site/docs/components/accordion/examples.mdx
+++ b/site/docs/components/accordion/examples.mdx
@@ -80,5 +80,13 @@ You can use an inline [badge](../badge) to indicate a change, or several changes
You can add additional labels to provide extra context using the [`Text`](../text) and [`Stack Layout`](../stack-layout) components.
+
+
+
+
+## Expand all
+
+You can use Accordion's controlled API to implement custom behaviour e.g. expand/collapse all.
+
diff --git a/site/src/examples/accordion/ExpandAll.tsx b/site/src/examples/accordion/ExpandAll.tsx
new file mode 100644
index 00000000000..4ad6af4dd07
--- /dev/null
+++ b/site/src/examples/accordion/ExpandAll.tsx
@@ -0,0 +1,83 @@
+import {
+ Accordion,
+ AccordionGroup,
+ AccordionHeader,
+ AccordionPanel,
+ Button,
+ FlowLayout,
+ FormField,
+ FormFieldLabel,
+ Input,
+ StackLayout,
+} from "@salt-ds/core";
+import { CollapseAllIcon, ExpandAllIcon } from "@salt-ds/icons";
+import { type ReactElement, useState } from "react";
+
+const accordions = Array.from({ length: 3 }, (_, i) => i + 1);
+
+export const ExpandAll = (): ReactElement => {
+ const [expanded, setExpanded] = useState([]);
+
+ const handleAccordionToggle = (value: number) => {
+ setExpanded((prev) =>
+ prev.includes(value)
+ ? prev.filter((v) => v !== value)
+ : prev.concat(value),
+ );
+ };
+
+ const handleExpandAll = () => {
+ setExpanded(accordions);
+ };
+
+ const handleCollapseAll = () => {
+ setExpanded([]);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {accordions.map((i) => (
+ handleAccordionToggle(i)}
+ indicatorSide="right"
+ >
+ Internal form
+
+
+ Please fill out the following details.
+
+ Disclosure ID
+
+
+
+ Email
+
+
+
+ Justification
+
+
+
+
+
+ ))}
+
+
+ );
+};
diff --git a/site/src/examples/accordion/index.ts b/site/src/examples/accordion/index.ts
index 8d41ad7cfea..57a0e5f1367 100644
--- a/site/src/examples/accordion/index.ts
+++ b/site/src/examples/accordion/index.ts
@@ -6,3 +6,4 @@ export * from "./Disabled";
export * from "./AdditionalLabels";
export * from "./Status";
export * from "./InlineBadge";
+export * from "./ExpandAll";