diff --git a/@navikt/core/react/src/dropdown/dropdown.stories.tsx b/@navikt/core/react/src/dropdown/dropdown.stories.tsx
index c8b5c61d6d..c67bb9a149 100644
--- a/@navikt/core/react/src/dropdown/dropdown.stories.tsx
+++ b/@navikt/core/react/src/dropdown/dropdown.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../button";
 import Dropdown from "./Dropdown";
@@ -6,10 +6,15 @@ import Dropdown from "./Dropdown";
 export default {
   title: "ds-react/Dropdown",
   component: Dropdown,
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof Dropdown>;
 
-export const Default = () => {
-  return (
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  render: () => (
     <Dropdown onSelect={(event) => console.log(event)}>
       <Dropdown.Toggle>Toggle</Dropdown.Toggle>
       <Dropdown.Menu strategy="fixed">
@@ -33,10 +38,10 @@ export const Default = () => {
         </Dropdown.Menu.List>
       </Dropdown.Menu>
     </Dropdown>
-  );
+  ),
 };
 
-export const DefaultOpen = {
+export const DefaultOpen: Story = {
   render: () => (
     <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
       <Button as={Dropdown.Toggle}>Toggle</Button>
@@ -57,20 +62,41 @@ export const DefaultOpen = {
       </Dropdown.Menu>
     </Dropdown>
   ),
-  args: { chromatic: { delay: 300 } },
 };
 
-export const ControlledOpen = () => {
-  const [openState, setOpenState] = useState(true);
-  return (
-    <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-      <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-        Toggle
-      </Button>
-      <Dropdown.Menu
-        strategy="fixed"
-        onClose={() => console.log("ONCLOSE CONTROLLED")}
-      >
+export const ControlledOpen: Story = {
+  render: () => {
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} open>
+      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+      <Dropdown.Menu strategy="fixed">
         <Dropdown.Menu.GroupedList>
           <Dropdown.Menu.GroupedList.Heading>
             Systemer og oppslagsverk
@@ -81,8 +107,18 @@ export const ControlledOpen = () => {
             Gosys
           </Dropdown.Menu.GroupedList.Item>
         </Dropdown.Menu.GroupedList>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
+            Gosys
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
       </Dropdown.Menu>
     </Dropdown>
-  );
+  ),
+  parameters: {
+    chromatic: { disable: false, delay: 300 },
+  },
 };
-ControlledOpen.args = { chromatic: { delay: 300 } };
diff --git a/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx b/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx
index a7ba240646..290757941d 100644
--- a/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx
+++ b/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx
@@ -1,5 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { VStack } from "../../layout/stack";
 import { ErrorSummary } from "./ErrorSummary";
 
 export default {
@@ -18,9 +19,14 @@ export default {
       },
     },
   },
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof ErrorSummary>;
+
+type Story = StoryObj<typeof ErrorSummary>;
 
-export const Default = {
+export const Default: Story = {
   render: (props) => (
     <ErrorSummary
       heading="Feiloppsummering komponent"
@@ -35,11 +41,41 @@ export const Default = {
   ),
 };
 
-export const Small = () => (
-  <ErrorSummary heading="Feiloppsummering komponent" size="small">
-    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-    <ErrorSummary.Item href="#2">
-      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummary.Item>
-  </ErrorSummary>
-);
+export const Small: Story = {
+  render: () => (
+    <ErrorSummary heading="Feiloppsummering komponent" size="small">
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="4">
+      <div>
+        <h2>Default</h2>
+        <ErrorSummary heading="Feiloppsummering komponent">
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ErrorSummary heading="Feiloppsummering komponent" size="small">
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};
diff --git a/@navikt/core/react/src/form/fieldset/fieldset.stories.tsx b/@navikt/core/react/src/form/fieldset/fieldset.stories.tsx
index f7581d9c6a..51d0ab3be9 100644
--- a/@navikt/core/react/src/form/fieldset/fieldset.stories.tsx
+++ b/@navikt/core/react/src/form/fieldset/fieldset.stories.tsx
@@ -1,5 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { VStack } from "../../layout/stack";
 import TextField from "../textfield/TextField";
 import { Fieldset } from "./index";
 
@@ -26,7 +27,12 @@ export default {
       type: "boolean",
     },
   },
-} as Meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof Fieldset>;
+
+type Story = StoryObj<typeof Fieldset>;
 
 const content = (
   <>
@@ -35,88 +41,117 @@ const content = (
   </>
 );
 
-export const Default = {
-  render: (props) => {
-    return (
-      <Fieldset legend="Mollit eiusmod" {...props}>
-        {content}
-      </Fieldset>
-    );
-  },
+const contentWithError = (
+  <>
+    <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
+    <TextField label="Textfield label" hideLabel />
+  </>
+);
 
+export const Default: Story = {
   args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
     errorPropagation: true,
+    children: content,
   },
 };
 
-export const Small = () => (
-  <Fieldset
-    size="small"
-    legend="Mollit eiusmod"
-    description="Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure."
-  >
-    {content}
-  </Fieldset>
-);
+export const Small: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    errorPropagation: true,
+    children: content,
+    size: "small",
+  },
+};
 
-export const Description = () => (
-  <Fieldset
-    legend="Mollit eiusmod"
-    description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
-  >
-    <TextField
-      label="Textfield label"
-      description="Amet quis cillum incididunt "
-    />
-    <TextField
-      label="Textfield label"
-      description="Enim et occaecat voluptate labore sit do exercitation laborum non "
-    />
-  </Fieldset>
-);
+export const ErrorPropagation: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    errorPropagation: false,
+    children: contentWithError,
+  },
+};
 
-export const ErrorPropagation = () => (
-  <Fieldset
-    legend="Mollit eiusmod"
-    error="Fieldsett error"
-    errorPropagation={false}
-  >
-    <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
-    <TextField label="Textfield label" hideLabel />
-  </Fieldset>
-);
+export const Error: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    error: "Laborum officia nisi aliqua esse minim in amet.",
+  },
+};
 
-export const Error = () => (
-  <div className="colgap">
-    <Fieldset
-      legend="Mollit eiusmod"
-      error="Laborum officia nisi aliqua esse minim in amet."
-    >
-      {content}
-    </Fieldset>
-    <Fieldset
-      size="small"
-      legend="Mollit eiusmod"
-      error="Laborum officia nisi aliqua esse minim in amet."
-    >
-      {content}
-    </Fieldset>
-  </div>
-);
+export const Disabled: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    disabled: true,
+  },
+};
 
-export const Disabled = () => (
-  <div className="colgap">
-    <Fieldset legend="Mollit eiusmod" disabled>
-      {content}
-    </Fieldset>
-    <Fieldset size="small" legend="Mollit eiusmod" disabled>
-      {content}
-    </Fieldset>
-  </div>
-);
+export const HideLegend: Story = {
+  args: {
+    legend: "Mollit eiusmod",
+    description:
+      "Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure.",
+    children: content,
+    hideLegend: true,
+  },
+};
 
-export const HideLegend = () => (
-  <Fieldset legend="Mollit eiusmod" hideLegend>
-    {content}
-  </Fieldset>
-);
+export const Chromatic: Story = {
+  render: () => {
+    return (
+      <VStack gap="4">
+        <div>
+          <h2>Default</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Default.args} />
+        </div>
+        <div>
+          <h2>Small</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Small.args} />
+        </div>
+        <div>
+          <h2>ErrorPropagation</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...ErrorPropagation.args} />
+        </div>
+        <div>
+          <h2>Error</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Error.args} />
+        </div>
+        <div>
+          <h2>Error small</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Error.args} size="small" />
+        </div>
+        <div>
+          <h2>Disabled</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...Disabled.args} />
+        </div>
+        <div>
+          <h2>HideLegend</h2>
+          {/* @ts-expect-error Args are Partial here */}
+          <Fieldset {...HideLegend.args} />
+        </div>
+      </VStack>
+    );
+  },
+  parameters: {
+    chromatic: { disable: false },
+  },
+};
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 6e18c005cd..615242d27a 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -49,6 +49,7 @@ export const Default = (props) => {
     </RadioGroup>
   );
 };
+
 Default.args = {
   controlled: false,
   error: false,
diff --git a/@navikt/core/react/src/form/switch/switch.stories.tsx b/@navikt/core/react/src/form/switch/switch.stories.tsx
index 2769139011..4c3283f67b 100644
--- a/@navikt/core/react/src/form/switch/switch.stories.tsx
+++ b/@navikt/core/react/src/form/switch/switch.stories.tsx
@@ -1,5 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { VStack } from "../../layout/stack";
 import Switch from "./Switch";
 
 export default {
@@ -31,70 +32,59 @@ export default {
       type: "boolean",
     },
   },
-} as Meta;
-
-export const Default = {
-  render: (props) => {
-    return <Switch {...props}>Label text</Switch>;
+  parameters: {
+    chromatic: { disable: true },
   },
+} satisfies Meta<typeof Switch>;
+
+type Story = StoryObj<typeof Switch>;
 
+export const Default: Story = {
   args: {
-    position: "right",
+    children: "Label text",
   },
 };
 
-export const Small = () => {
-  return (
-    <div className="colgap">
-      <Switch size="small">Label text</Switch>
-      <Switch size="small" position="right">
-        Label text
-      </Switch>
-    </div>
-  );
+export const Small: Story = {
+  args: {
+    children: "Label text",
+    size: "small",
+  },
 };
 
-export const Description = () => {
-  return (
-    <div className="colgap">
-      <Switch size="small" description="Cillum sint exercitation ut cillum.">
-        Label text
-      </Switch>
-      <Switch
-        size="small"
-        position="right"
-        description="Cillum sint exercitation ut cillum."
-      >
-        Label text
-      </Switch>
-    </div>
-  );
+export const Description: Story = {
+  args: {
+    children: "Label text",
+    description: "Cillum sint exercitation ut cillum.",
+  },
 };
 
-export const Loading = () => {
-  return (
-    <div className="colgap">
+export const Loading: Story = {
+  render: () => {
+    return (
       <div className="colgap">
-        <Switch loading>Label text</Switch>
+        <div className="colgap">
+          <Switch loading>Label text</Switch>
 
-        <Switch checked loading>
-          Label text
-        </Switch>
-      </div>
-      <div className="colgap">
-        <Switch loading size="small">
-          Label text
-        </Switch>
-        <Switch checked loading size="small">
-          Label text
-        </Switch>
+          <Switch checked loading>
+            Label text
+          </Switch>
+        </div>
+        <div className="colgap">
+          <Switch loading size="small">
+            Label text
+          </Switch>
+          <Switch checked loading size="small">
+            Label text
+          </Switch>
+        </div>
       </div>
-    </div>
-  );
+    );
+  },
 };
 
-export const Disabled = () => {
-  return (
+export const Disabled: Story = {
+  render: () => (
     <div className="colgap">
       <Switch disabled>Label text</Switch>
 
@@ -102,11 +92,11 @@ export const Disabled = () => {
         Label text
       </Switch>
     </div>
-  );
+  ),
 };
 
-export const HideLabel = () => {
-  return (
+export const HideLabel: Story = {
+  render: () => (
     <div className="colgap">
       <Switch hideLabel>Label text</Switch>
 
@@ -114,11 +104,11 @@ export const HideLabel = () => {
         Label text
       </Switch>
     </div>
-  );
+  ),
 };
 
-export const Readonly = () => {
-  return (
+export const Readonly: Story = {
+  render: () => (
     <div className="colgap">
       <Switch description="Slår av alle notifikasjoner" readOnly>
         Notifikasjoner
@@ -128,5 +118,54 @@ export const Readonly = () => {
         Notifikasjoner
       </Switch>
     </div>
-  );
+  ),
+};
+
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="4" align="start">
+      <div>
+        <h2>Default</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Default.args} />
+      </div>
+      <div>
+        <h2>Small</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Small.args} position="left" />
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Small.args} position="right" />
+      </div>
+      <div>
+        <h2>Description</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Description.args} position="left" />
+        {/* @ts-expect-error Args are Partial here */}
+        <Switch {...Description.args} position="right" />
+      </div>
+      <div>
+        <h2>Loading</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Loading.render />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Disabled.render />
+      </div>
+      <div>
+        <h2>HideLabel</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <HideLabel.render />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        {/* @ts-expect-error Args are Partial here */}
+        <Readonly.render />
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
 };