diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index 0ca1ff3e8e..063a49713e 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./select/select";
 @import "./time-input/time-input";
 @import "./date-input/date-input";
 @import "./document/document";
diff --git a/packages/css/src/components/select/README.md b/packages/css/src/components/select/README.md
new file mode 100644
index 0000000000..5b09daf963
--- /dev/null
+++ b/packages/css/src/components/select/README.md
@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# Select
+
+A form control that allows users to select one or more options from a list.
+
+## References
+
+- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss
new file mode 100644
index 0000000000..72db3c7e95
--- /dev/null
+++ b/packages/css/src/components/select/select.scss
@@ -0,0 +1,60 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  appearance: none;
+  border: 0;
+  border-radius: 0; // Reset rounded borders for Safari on MacOS
+}
+
+.ams-select {
+  background-color: var(--ams-select-background-color);
+  box-shadow: var(--ams-select-box-shadow);
+  color: var(--ams-select-color);
+  font-family: var(--ams-select-font-family);
+  font-size: var(--ams-select-font-size);
+  font-weight: var(--ams-select-font-weight);
+  line-height: var(--ams-select-line-height);
+  max-inline-size: 100%;
+  outline-offset: var(--ams-select-outline-offset);
+  padding-block: var(--ams-select-padding-block);
+  padding-inline: var(--ams-select-padding-inline);
+  touch-action: manipulation;
+
+  &:not([multiple]) {
+    background-image: var(--ams-select-background-image);
+    background-position: var(--ams-select-background-position);
+    background-repeat: no-repeat;
+    background-size: 1em 1em;
+  }
+
+  &:hover {
+    box-shadow: var(--ams-select-hover-box-shadow);
+  }
+
+  @include reset;
+}
+
+.ams-select[aria-invalid="true"] {
+  box-shadow: var(--ams-select-invalid-box-shadow);
+
+  &:hover {
+    box-shadow: var(--ams-select-invalid-hover-box-shadow);
+  }
+}
+
+.ams-select:disabled {
+  box-shadow: var(--ams-select-disabled-box-shadow);
+  color: var(--ams-select-disabled-color);
+  cursor: not-allowed;
+
+  &:not([multiple]) {
+    background-image: var(--ams-select-disabled-background-image);
+  }
+}
+
+.ams-select__option:disabled {
+  color: var(--ams-select-option-disabled-color);
+}
diff --git a/packages/react/src/Select/README.md b/packages/react/src/Select/README.md
new file mode 100644
index 0000000000..f830e9d3d1
--- /dev/null
+++ b/packages/react/src/Select/README.md
@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Select component
+
+[Select documentation](../../../css/src/components/select/README.md)
diff --git a/packages/react/src/Select/Select.test.tsx b/packages/react/src/Select/Select.test.tsx
new file mode 100644
index 0000000000..d3e0902b43
--- /dev/null
+++ b/packages/react/src/Select/Select.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { Select } from './Select'
+import '@testing-library/jest-dom'
+
+describe('Select', () => {
+  it('renders', () => {
+    render(<Select />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<Select />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).toHaveClass('ams-select')
+  })
+
+  it('renders an additional class name', () => {
+    render(<Select className="extra" />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).toHaveClass('ams-select extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLSelectElement>()
+
+    render(<Select ref={ref} />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(ref.current).toBe(component)
+  })
+
+  it('renders options', () => {
+    render(
+      <Select>
+        <Select.Option value="a">Option A</Select.Option>
+        <Select.Option value="b">Option B</Select.Option>
+      </Select>,
+    )
+
+    const select = screen.getByRole('combobox')
+
+    const option = screen.getByRole('option', {
+      name: 'Option B',
+    })
+
+    expect(select).toContain(option)
+  })
+
+  it('can be disabled', () => {
+    render(<Select disabled />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).toBeDisabled()
+  })
+
+  it('can be invalid', () => {
+    render(<Select invalid />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).toHaveClass('ams-select--invalid')
+  })
+
+  it('is not required by default', () => {
+    render(<Select />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).not.toBeRequired()
+  })
+
+  it('omits the required attribute when not required', () => {
+    render(<Select required={false} />)
+
+    const component = screen.getByRole('combobox')
+
+    expect(component).not.toHaveAttribute('required')
+  })
+})
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
new file mode 100644
index 0000000000..5dd90c63f1
--- /dev/null
+++ b/packages/react/src/Select/Select.tsx
@@ -0,0 +1,32 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, PropsWithChildren, SelectHTMLAttributes } from 'react'
+import { SelectOption } from './SelectOption'
+import { SelectOptionGroup } from './SelectOptionGroup'
+
+export type SelectProps = {
+  /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
+  invalid?: boolean
+} & PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>>
+
+const SelectRoot = forwardRef(
+  ({ children, className, invalid, ...restProps }: SelectProps, ref: ForwardedRef<HTMLSelectElement>) => (
+    <select
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-select', invalid && 'ams-select--invalid', className)}
+      aria-invalid={invalid || undefined}
+    >
+      {children}
+    </select>
+  ),
+)
+
+SelectRoot.displayName = 'Select'
+
+export const Select = Object.assign(SelectRoot, { Option: SelectOption, Group: SelectOptionGroup })
diff --git a/packages/react/src/Select/SelectOption.test.tsx b/packages/react/src/Select/SelectOption.test.tsx
new file mode 100644
index 0000000000..7a9db8a5c2
--- /dev/null
+++ b/packages/react/src/Select/SelectOption.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { Select } from './Select'
+import '@testing-library/jest-dom'
+
+describe('Select option', () => {
+  it('renders', () => {
+    render(<Select.Option />)
+
+    const component = screen.getByRole('option')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders an option role element with a text label', () => {
+    render(<Select.Option>Option</Select.Option>)
+
+    const option = screen.getByRole('option', {
+      name: 'Option',
+    })
+
+    expect(option).toBeInTheDocument()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<Select.Option />)
+
+    const component = screen.getByRole('option')
+
+    expect(component).toHaveClass('ams-select__option')
+  })
+
+  it('renders an additional class name', () => {
+    render(<Select.Option className="extra" />)
+
+    const component = screen.getByRole('option')
+
+    expect(component).toHaveClass('ams-select__option extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLOptionElement>()
+
+    render(<Select.Option ref={ref} />)
+
+    const component = screen.getByRole('option')
+
+    expect(ref.current).toBe(component)
+  })
+
+  it('can be disabled', () => {
+    render(<Select.Option disabled />)
+
+    const component = screen.getByRole('option')
+
+    expect(component).toBeDisabled()
+  })
+})
diff --git a/packages/react/src/Select/SelectOption.tsx b/packages/react/src/Select/SelectOption.tsx
new file mode 100644
index 0000000000..70cc217dcb
--- /dev/null
+++ b/packages/react/src/Select/SelectOption.tsx
@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, OptionHTMLAttributes, PropsWithChildren } from 'react'
+
+export type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>
+
+export const SelectOption = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<SelectOptionProps>,
+    ref: ForwardedRef<HTMLOptionElement>,
+  ) => (
+    <option {...restProps} ref={ref} className={clsx('ams-select__option', className)}>
+      {children}
+    </option>
+  ),
+)
+
+SelectOption.displayName = 'Select.Option'
diff --git a/packages/react/src/Select/SelectOptionGroup.test.tsx b/packages/react/src/Select/SelectOptionGroup.test.tsx
new file mode 100644
index 0000000000..7f6d3d287c
--- /dev/null
+++ b/packages/react/src/Select/SelectOptionGroup.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { Select } from './Select'
+import '@testing-library/jest-dom'
+
+describe('Select option group', () => {
+  it('renders', () => {
+    render(<Select.Group />)
+
+    const component = screen.getByRole('group')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders an group role element with a text label', () => {
+    render(<Select.Group label="Options" />)
+
+    const option = screen.getByRole('group', {
+      name: 'Options',
+    })
+
+    expect(option).toBeInTheDocument()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<Select.Group />)
+
+    const component = screen.getByRole('group')
+
+    expect(component).toHaveClass('ams-select__group')
+  })
+
+  it('renders an additional class name', () => {
+    render(<Select.Group className="extra" />)
+
+    const component = screen.getByRole('group')
+
+    expect(component).toHaveClass('ams-select__group extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLOptGroupElement>()
+
+    render(<Select.Group ref={ref} />)
+
+    const component = screen.getByRole('group')
+
+    expect(ref.current).toBe(component)
+  })
+
+  it('can be disabled', () => {
+    render(<Select.Group disabled />)
+
+    const component = screen.getByRole('group')
+
+    expect(component).toBeDisabled()
+  })
+})
diff --git a/packages/react/src/Select/SelectOptionGroup.tsx b/packages/react/src/Select/SelectOptionGroup.tsx
new file mode 100644
index 0000000000..7d0afd105f
--- /dev/null
+++ b/packages/react/src/Select/SelectOptionGroup.tsx
@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, OptgroupHTMLAttributes, PropsWithChildren } from 'react'
+
+export type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>
+
+export const SelectOptionGroup = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<SelectOptionGroupProps>,
+    ref: ForwardedRef<HTMLOptGroupElement>,
+  ) => (
+    <optgroup {...restProps} ref={ref} className={clsx('ams-select__group', className)}>
+      {children}
+    </optgroup>
+  ),
+)
+
+SelectOptionGroup.displayName = 'Select.Group'
diff --git a/packages/react/src/Select/index.ts b/packages/react/src/Select/index.ts
new file mode 100644
index 0000000000..7fb657c440
--- /dev/null
+++ b/packages/react/src/Select/index.ts
@@ -0,0 +1,3 @@
+export { Select } from './Select'
+export type { SelectProps } from './Select'
+export type { SelectOptionProps } from './SelectOption'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index fbdc4c7857..70b5d5f6da 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Select'
 export * from './TimeInput'
 export * from './DateInput'
 export * from './Avatar'
diff --git a/proprietary/tokens/src/components/ams/select.tokens.json b/proprietary/tokens/src/components/ams/select.tokens.json
new file mode 100644
index 0000000000..ad865ff720
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/select.tokens.json
@@ -0,0 +1,41 @@
+{
+  "ams": {
+    "select": {
+      "background-color": { "value": "{ams.color.primary-white}" },
+      "background-image": {
+        "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
+      },
+      "background-position": { "value": "right {ams.space.inside.md} center" },
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.md} calc(2 * {ams.space.inside.md} + 1em)" },
+      "disabled": {
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
+        },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.neutral-grey2}" }
+      },
+      "hover": {
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }
+      },
+      "invalid": {
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
+        }
+      },
+      "option": {
+        "disabled": {
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      }
+    }
+  }
+}
diff --git a/storybook/src/components/Select/Select.docs.mdx b/storybook/src/components/Select/Select.docs.mdx
new file mode 100644
index 0000000000..1c9141e937
--- /dev/null
+++ b/storybook/src/components/Select/Select.docs.mdx
@@ -0,0 +1,34 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as SelectStories from "./Select.stories.tsx";
+import README from "../../../../packages/css/src/components/select/README.md?raw";
+
+<Meta of={SelectStories} />
+
+<Markdown>{README}</Markdown>
+
+# Default
+
+<Primary />
+
+<Controls />
+
+## Multiple
+
+Avoid adding functionality to allow selecting multiple options. Multi select is harder to use
+on desktop as they require the user to hold down the `Ctrl` or `Cmd` key while clicking on the options.
+It is recommended to use checkboxes instead.
+
+## Grouped
+
+Use the `Select.Group` component to group options.
+The component requires a `label` attribute.
+
+<Canvas of={SelectStories.Grouped} />
+
+## Invalid
+
+<Canvas of={SelectStories.Invalid} />
+
+## Disabled
+
+<Canvas of={SelectStories.Disabled} />
diff --git a/storybook/src/components/Select/Select.stories.tsx b/storybook/src/components/Select/Select.stories.tsx
new file mode 100644
index 0000000000..fddfb3d0cc
--- /dev/null
+++ b/storybook/src/components/Select/Select.stories.tsx
@@ -0,0 +1,108 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { Select } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Components/Forms/Select',
+  component: Select,
+  args: {
+    invalid: false,
+    disabled: false,
+    children: [
+      <Select.Option key="1" value="1">
+        Centrum
+      </Select.Option>,
+      <Select.Option key="2" value="2">
+        Noord
+      </Select.Option>,
+      <Select.Option key="3" value="3">
+        West
+      </Select.Option>,
+      <Select.Option key="4" value="4" disabled>
+        Westpoort
+      </Select.Option>,
+      <Select.Option key="6" value="5">
+        Nieuw-West
+      </Select.Option>,
+      <Select.Option key="7" value="6">
+        Zuid
+      </Select.Option>,
+      <Select.Option key="8" value="7">
+        Zuidoost
+      </Select.Option>,
+    ],
+  },
+} satisfies Meta<typeof Select>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Grouped: Story = {
+  args: {
+    children: [
+      <Select.Group label="Burgwallen-Oude Zijde" key="1">
+        <Select.Option>BG-terrein e.o.</Select.Option>
+        <Select.Option>Burgwallen oost</Select.Option>
+        <Select.Option>Kop Zeedijk</Select.Option>
+        <Select.Option>Nes e.o.</Select.Option>
+        <Select.Option>Oude Kerk e.o.</Select.Option>
+      </Select.Group>,
+      <Select.Group label="Burgwallen-Nieuwe Zijde" key="2">
+        <Select.Option>Begijnhofbuurt</Select.Option>
+        <Select.Option>Hemelrijk</Select.Option>
+        <Select.Option>Kalverdriehoek</Select.Option>
+        <Select.Option>Nieuwe Kerk e.o.</Select.Option>
+        <Select.Option>Nieuwendijk Noord</Select.Option>
+        <Select.Option>Spuistraat Noord</Select.Option>
+        <Select.Option>Spuistraat Zuid</Select.Option>
+        <Select.Option>Stationsplein e.o.</Select.Option>
+      </Select.Group>,
+      <Select.Group label="Grachtengordel-West" key="3">
+        <Select.Option>Felix Meritisbuurt</Select.Option>
+        <Select.Option>Langestraat e.o.</Select.Option>
+        <Select.Option>Leidsegracht Noord</Select.Option>
+        <Select.Option>Leliegracht e.o.</Select.Option>
+      </Select.Group>,
+      <Select.Group label="Haarlemmerbuurt" key="4">
+        <Select.Option>Haarlemmerbuurt Oost</Select.Option>
+        <Select.Option>Haarlemmerbuurt West</Select.Option>
+        <Select.Option>Planciusbuurt Noord</Select.Option>
+        <Select.Option>Planciusbuurt Zuid</Select.Option>
+        <Select.Option>Westelijke eilanden</Select.Option>
+        <Select.Option>Westerdokseiland</Select.Option>
+      </Select.Group>,
+      <Select.Group label="Jordaan" key="5">
+        <Select.Option>Anjeliersbuurt Noord</Select.Option>
+        <Select.Option>Anjeliersbuurt Zuid</Select.Option>
+        <Select.Option>Bloemgrachtbuurt</Select.Option>
+        <Select.Option>Driehoekbuurt</Select.Option>
+        <Select.Option>Elandsgrachtbuurt</Select.Option>
+        <Select.Option>Groenmarktkadebuurt</Select.Option>
+        <Select.Option>Marnixbuurt Midden</Select.Option>
+        <Select.Option>Marnixbuurt Noord</Select.Option>
+        <Select.Option>Marnixbuurt Zuid</Select.Option>
+        <Select.Option>Passeerdersgrachtbuurt</Select.Option>
+        <Select.Option>Zaagpoortbuurt</Select.Option>
+      </Select.Group>,
+    ],
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}