Add Checkbox component

package.json

@@ -34,6 +34,10 @@
       "types": "./dist/components/Calendar.d.ts",
       "default": "./dist/components/Calendar.js"
     },
+    "./components/Checkbox": {
+      "types": "./dist/components/Checkbox.d.ts",
+      "default": "./dist/components/Checkbox.js"
+    },
     "./components/Card": {
       "types": "./dist/components/Card.d.ts",
       "default": "./dist/components/Card.js"

src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,52 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2025 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import { useArgs } from '@storybook/core/preview-api'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { type ComponentProps } from 'react'
+import { SideLabel } from '@/components/SideLabel'
+import { Checkbox } from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  args: {
+    checked: false,
+    onCheckedChange: fn(),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  render: function Render(args) {
+    const [, updateArgs] = useArgs<ComponentProps<typeof Checkbox>>()
+    return (
+      <Checkbox
+        {...args}
+        onCheckedChange={(checked) => updateArgs({ checked })}
+      />
+    )
+  },
+}
+
+export const Checked: Story = {
+  ...Default,
+  args: {
+    checked: true,
+  },
+}
+
+export const Labeled = () => (
+  <SideLabel label="Show unread only">
+    <Checkbox />
+  </SideLabel>
+)

src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,30 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2025 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 { Checkbox } from '.'
+
+describe('Checkbox', () => {
+  it('renders functional Checkbox element', () => {
+    const onCheckedChange = vitest.fn()
+
+    render(
+      <Checkbox
+        checked={true}
+        onCheckedChange={onCheckedChange}
+        aria-label="Checkbox"
+      />,
+    )
+
+    const checkbox = screen.getByLabelText('Checkbox')
+    fireEvent.click(checkbox)
+
+    expect(onCheckedChange).toHaveBeenCalledWith(false)
+  })
+})

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,35 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2025 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import {
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  forwardRef,
+} from 'react'
+import { cn } from '@/utils/className'
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'focus-ring flex-center peer size-4 shrink-0 rounded border border-input disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex-center size-2.5 rounded-sm bg-primary" />
+  </CheckboxPrimitive.Root>
+))
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName

src/components/Checkbox/index.tsx

@@ -0,0 +1,9 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project
+//
+// SPDX-FileCopyrightText: 2025 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+export * from './Checkbox'

src/index.ts

@@ -39,6 +39,7 @@ export * from './components/Select'
 export * from './components/Separator'
 export * from './components/SideLabel'
 export * from './components/Switch'
+export * from './components/Checkbox'
 export * from './components/Table'
 export * from './components/Tabs'
 export * from './components/Textarea'