diff --git a/packages/design-system/src/components/Switch/Switch.stories.tsx b/packages/design-system/src/components/Switch/Switch.stories.tsx
new file mode 100644
index 0000000..b8aea58
--- /dev/null
+++ b/packages/design-system/src/components/Switch/Switch.stories.tsx
@@ -0,0 +1,39 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { type Meta, type StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { useState } from 'react'
+import { SideLabel } from '@/packages/design-system/src/components/SideLabel'
+import { Switch } from './Switch'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  args: {
+    onCheckedChange: fn(),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Unchecked: Story = { args: { checked: false } }
+
+export const Checked: Story = { args: { checked: true } }
+
+export const Functional = () => {
+  const [checked, setChecked] = useState(false)
+  return <Switch checked={checked} onCheckedChange={setChecked} />
+}
+
+export const Labeled = () => (
+  <SideLabel label="Show unread only">
+    <Switch checked />
+  </SideLabel>
+)
diff --git a/packages/design-system/src/components/Switch/Switch.test.tsx b/packages/design-system/src/components/Switch/Switch.test.tsx
new file mode 100644
index 0000000..f092f8e
--- /dev/null
+++ b/packages/design-system/src/components/Switch/Switch.test.tsx
@@ -0,0 +1,30 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vitest } from 'vitest'
+import { Switch } from '.'
+
+describe('Switch', () => {
+  it('renders functional switch element', () => {
+    const onCheckedChange = vitest.fn()
+
+    render(
+      <Switch
+        checked={true}
+        onCheckedChange={onCheckedChange}
+        aria-label="Toggle"
+      />,
+    )
+
+    const element = screen.getByLabelText('Toggle')
+    fireEvent.click(element)
+
+    const newCheckedValue = false
+    expect(onCheckedChange).toHaveBeenCalledWith(newCheckedValue)
+  })
+})