diff --git a/components/select/css/stories/default.stories.mdx b/components/select/css/stories/default.stories.mdx
deleted file mode 100644
index 3e9dedb55b4..00000000000
--- a/components/select/css/stories/default.stories.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, exampleArgs, Select } from "../story-template";
-import "../index.scss";
-
-<Meta
-  id="css-select"
-  title="CSS Component/Select"
-  component={Select}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# Form select
-
-Styling via the `<select>` element:
-
-<Canvas>
-  <Story name="Default" args={exampleArgs}>
-    {Select.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Default" />
diff --git a/components/select/css/stories/readme.stories.mdx b/components/select/css/stories/readme.stories.mdx
deleted file mode 100644
index 670f9707bed..00000000000
--- a/components/select/css/stories/readme.stories.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Markdown, Meta } from "@storybook/blocks";
-import readme from "../../README.md";
-import design from "../../design.md";
-
-<Meta id="css-select--readme" title="CSS Component/Select/README" />
-
-<Markdown>{readme}</Markdown>
-
-<Markdown>{design}</Markdown>
diff --git a/components/select/css/stories/states.stories.mdx b/components/select/css/stories/states.stories.mdx
deleted file mode 100644
index f5ef4e9cf0c..00000000000
--- a/components/select/css/stories/states.stories.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { exampleArgs, Select } from "../story-template";
-import "../index.scss";
-
-<Meta
-  id="css-select--state"
-  title="CSS Component/Select/State"
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-    docs: {
-      source: {
-        state: "closed",
-      },
-    },
-  }}
-/>
-
-# Form select states
-
-## Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      ...exampleArgs,
-      disabled: true,
-    }}
-  >
-    {Select.bind({})}
-  </Story>
-</Canvas>
-
-## Invalid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      ...exampleArgs,
-      invalid: true,
-    }}
-  >
-    {Select.bind({})}
-  </Story>
-</Canvas>
-
-## Required
-
-<Canvas>
-  <Story
-    name="Required"
-    args={{
-      ...exampleArgs,
-      required: true,
-    }}
-  >
-    {Select.bind({})}
-  </Story>
-</Canvas>
-
-## Focus
-
-<Canvas>
-  <Story
-    name="Focus"
-    args={{
-      ...exampleArgs,
-      focus: true,
-    }}
-  >
-    {Select.bind({})}
-  </Story>
-</Canvas>
diff --git a/components/select/css/stories/tokens.stories.mdx b/components/select/css/stories/tokens.stories.mdx
deleted file mode 100644
index 6c70f05c326..00000000000
--- a/components/select/css/stories/tokens.stories.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Meta } from "@storybook/blocks";
-import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection";
-import tokens from "../../../../proprietary/design-tokens/dist/index.json";
-import tokensDefinition from "../../tokens.json";
-
-<Meta id="css-select--tokens" title="CSS Component/Select/Design Tokens" />
-
-# Select Design Tokens
-
-<ComponentTokensSection
-  tokens={tokens}
-  definition={tokensDefinition}
-  component="utrecht-select"
-></ComponentTokensSection>
diff --git a/components/select/css/story-template.jsx b/components/select/css/story-template.jsx
deleted file mode 100644
index bfab95bae30..00000000000
--- a/components/select/css/story-template.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Gemeente Utrecht
- * Copyright (c) 2022 Frameless B.V.
- */
-import clsx from 'clsx';
-import React from 'react';
-
-export const argTypes = {
-  disabled: {
-    description: 'Disabled',
-    control: 'boolean',
-  },
-  focus: {
-    description: 'Focus',
-    control: 'boolean',
-  },
-  invalid: {
-    description: 'Invalid',
-    control: 'boolean',
-  },
-  options: {
-    description: 'Options',
-    type: {
-      name: 'array',
-      required: true,
-    },
-  },
-  required: {
-    description: 'Required',
-    control: 'boolean',
-  },
-};
-
-export const defaultArgs = {
-  disabled: false,
-  focus: false,
-  invalid: false,
-  options: [],
-  required: false,
-};
-
-export const exampleArgs = {
-  options: [
-    { value: '1', label: 'Option #1' },
-    { value: '2', label: 'Option #2', selected: true },
-    { value: '3', label: 'Option #3' },
-  ],
-};
-
-export const Select = ({
-  disabled = defaultArgs.disabled,
-  focus = defaultArgs.focus,
-  invalid = defaultArgs.invalid,
-  options = defaultArgs.options,
-  required = defaultArgs.required,
-}) => (
-  <select
-    aria-invalid={invalid || null}
-    disabled={disabled || null}
-    required={required || null}
-    className={clsx('utrecht-select', 'utrecht-select--html-select', {
-      'utrecht-select--disabled': disabled,
-      'utrecht-select--focus': focus,
-      'utrecht-select--focus-visible': focus,
-      'utrecht-select--invalid': invalid,
-      'utrecht-select--required': required,
-    })}
-  >
-    {options.map(({ label, selected, value }) => (
-      <option selected={selected || null} value={value || null}>
-        {label}
-      </option>
-    ))}
-  </select>
-);
-
-export default Select;
diff --git a/packages/storybook/stories/components/Select.stories.tsx b/packages/storybook/stories/components/Select.stories.tsx
new file mode 100644
index 00000000000..34036056024
--- /dev/null
+++ b/packages/storybook/stories/components/Select.stories.tsx
@@ -0,0 +1,125 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectOption, SelectProps } from '@utrecht/component-library-react/src/Select';
+import readme from '@utrecht/components/select/README.md?raw';
+import tokensDefinition from '@utrecht/components/select/tokens.json';
+import tokens from '@utrecht/design-tokens/dist/index.json';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+import { designTokenStory } from './util';
+import '@utrecht/components/select/css/index.scss';
+
+const meta = {
+  title: 'CSS Component/Select',
+  id: 'css-select',
+  component: Select,
+  argTypes: {
+    disabled: {
+      description: 'Disabled',
+      control: 'boolean',
+    },
+    focus: {
+      description: 'Focus',
+      control: 'boolean',
+    },
+    invalid: {
+      description: 'Invalid',
+      control: 'boolean',
+    },
+    options: {
+      description: 'Options',
+      type: {
+        name: 'array',
+        required: true,
+      },
+    },
+    required: {
+      description: 'Required',
+      control: 'boolean',
+    },
+  },
+  args: {
+    disabled: false,
+    focus: false,
+    invalid: false,
+    options: [
+      { value: '1', label: 'Option #1' },
+      { value: '2', label: 'Option #2', selected: true },
+      { value: '3', label: 'Option #3' },
+    ],
+    required: false,
+  },
+  render: ({
+    focus,
+    focusVisible,
+    options,
+    ...props
+  }: SelectProps & { focus?: boolean; focusVisible?: boolean; options: { value?: string; label: ReactNode }[] }) => {
+    return (
+      <Select
+        className={clsx({
+          'utrecht-select--focus': focus,
+          'utrecht-select--focus-visible': focusVisible,
+        })}
+        {...props}
+      >
+        {options.map(({ value, label }) => (
+          <SelectOption value={value}>{label}</SelectOption>
+        ))}
+      </Select>
+    );
+  },
+  tags: ['autodocs'],
+  parameters: {
+    status: {
+      type: 'ALPHA',
+    },
+    tokensPrefix: 'utrecht-select',
+    tokens,
+    tokensDefinition,
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Focus: Story = {
+  args: {
+    className: 'utrecht-select--focus',
+  },
+};
+
+export const FocusVisible: Story = {
+  args: {
+    className: 'utrecht-select--focus utrecht-select--focus-visible',
+  },
+};
+
+export const DesignTokens = designTokenStory(meta);