diff --git a/.changeset/mean-roses-type.md b/.changeset/mean-roses-type.md
new file mode 100644
index 00000000..350ceadc
--- /dev/null
+++ b/.changeset/mean-roses-type.md
@@ -0,0 +1,6 @@
+---
+"@telegraph/combobox": patch
+"@telegraph/select": patch
+---
+
+new select component + combobox fixes
diff --git a/packages/combobox/src/Combobox/Combobox.helpers.ts b/packages/combobox/src/Combobox/Combobox.helpers.ts
index 5a40c0e4..136598ce 100644
--- a/packages/combobox/src/Combobox/Combobox.helpers.ts
+++ b/packages/combobox/src/Combobox/Combobox.helpers.ts
@@ -1,4 +1,4 @@
-export type DefinedOption = { value: string; label?: string };
+export type DefinedOption = { value: string; label?: string | React.ReactNode };
 export type Option = DefinedOption | undefined;
 export const isMultiSelect = (
   value: Option | Array<Option>,
diff --git a/packages/combobox/src/Combobox/Combobox.test.tsx b/packages/combobox/src/Combobox/Combobox.test.tsx
index 38158b91..d133ba69 100644
--- a/packages/combobox/src/Combobox/Combobox.test.tsx
+++ b/packages/combobox/src/Combobox/Combobox.test.tsx
@@ -156,6 +156,14 @@ describe("Combobox", () => {
       await user.click(clearButton!);
       expect(trigger?.textContent).toBe("");
     });
+    it("should not be able to open when disabled", async () => {
+      const user = userEvent.setup();
+      const { container } = render(<ComboboxSingleSelect disabled />);
+      const trigger = container.querySelector("[data-tgph-combobox-trigger]");
+      await user.click(trigger!);
+      await waitFor(() => trigger?.getAttribute("aria-expanded") === "false");
+      expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+    });
   });
   describe("Multi Select", () => {
     it("combobox is accessible", async () => {
diff --git a/packages/combobox/src/Combobox/Combobox.tsx b/packages/combobox/src/Combobox/Combobox.tsx
index e20c1bff..631538d8 100644
--- a/packages/combobox/src/Combobox/Combobox.tsx
+++ b/packages/combobox/src/Combobox/Combobox.tsx
@@ -40,18 +40,14 @@ type MultiSelect = {
   onValueChange?: (value: Array<Option>) => void;
 };
 
-type RootProps = (
-  | {
-      value?: MultiSelect["value"];
-      onValueChange?: MultiSelect["onValueChange"];
-      layout?: "truncate" | "wrap";
-    }
-  | {
-      value?: SingleSelect["value"];
-      onValueChange?: SingleSelect["onValueChange"];
-      layout?: never;
-    }
-) & {
+type LayoutValue<O extends Option | Array<Option>> = O extends Option
+  ? never
+  : "truncate" | "wrap";
+
+type RootProps<O extends Option | Array<Option>> = {
+  value?: O;
+  onValueChange?: (value: O) => void;
+  layout?: LayoutValue<O>;
   open?: boolean;
   defaultOpen?: boolean;
   errored?: boolean;
@@ -60,11 +56,12 @@ type RootProps = (
   modal?: boolean;
   closeOnSelect?: boolean;
   clearable?: boolean;
+  disabled?: boolean;
   children?: React.ReactNode;
 };
 
 const ComboboxContext = React.createContext<
-  Omit<RootProps, "children"> & {
+  Omit<RootProps<Option | Array<Option>>, "children"> & {
     contentId: string;
     triggerId: string;
     open: boolean;
@@ -77,6 +74,7 @@ const ComboboxContext = React.createContext<
     contentRef?: React.RefObject<HTMLDivElement>;
   }
 >({
+  value: undefined,
   onValueChange: () => {},
   contentId: "",
   triggerId: "",
@@ -84,12 +82,14 @@ const ComboboxContext = React.createContext<
   setOpen: () => {},
   onOpenToggle: () => {},
   clearable: false,
+  disabled: false,
 });
 
-const Root = ({
+const Root = <O extends Option | Array<Option>>({
   modal = true,
   closeOnSelect = true,
   clearable = false,
+  disabled = false,
   open: openProp,
   onOpenChange: onOpenChangeProp,
   defaultOpen: defaultOpenProp,
@@ -99,7 +99,7 @@ const Root = ({
   placeholder,
   layout,
   ...props
-}: RootProps) => {
+}: RootProps<O>) => {
   const contentId = React.useId();
   const triggerId = React.useId();
   const triggerRef = React.useRef(null);
@@ -131,13 +131,17 @@ const Root = ({
         contentId,
         triggerId,
         value,
-        onValueChange,
+        // Need to cast this to avoid type errors
+        // because the type of onValueChange is not
+        // consistent with the value type
+        onValueChange: onValueChange as (value: Option | Array<Option>) => void,
         placeholder,
         open,
         setOpen,
         onOpenToggle,
         closeOnSelect,
         clearable,
+        disabled,
         searchQuery,
         setSearchQuery,
         triggerRef,
@@ -158,8 +162,8 @@ const Root = ({
 };
 
 type TriggerTagProps = {
-  value: string;
-  label?: string;
+  value: DefinedOption["value"];
+  label?: DefinedOption["label"];
 };
 
 const TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {
@@ -401,6 +405,7 @@ const Trigger = ({ size = "2", ...props }: TriggerProps) => {
         // Custom attributes
         data-tgph-combobox-trigger
         data-tgph-comobox-trigger-open={context.open}
+        disabled={context.disabled}
       >
         <TriggerValue />
         <Stack align="center" gap="1">
@@ -618,8 +623,8 @@ const Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {
 type OptionProps<T extends TgphElement> = TgphComponentProps<
   typeof TelegraphMenu.Button<T>
 > & {
-  value: string;
-  label?: string;
+  value: DefinedOption["value"];
+  label?: DefinedOption["label"];
   selected?: boolean | null;
 };
 
diff --git a/packages/select/.eslintrc.js b/packages/select/.eslintrc.js
new file mode 100644
index 00000000..0217518c
--- /dev/null
+++ b/packages/select/.eslintrc.js
@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    "@knocklabs/eslint-config/library.js",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+};
diff --git a/packages/select/README.md b/packages/select/README.md
new file mode 100644
index 00000000..a64c6cfb
--- /dev/null
+++ b/packages/select/README.md
@@ -0,0 +1,17 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/button.svg)](https://www.npmjs.com/package/@telegraph/select)
+
+# @telegraph/select
+> A simple select component built on top of @telegraph/combobox
+
+## Installation Instructions
+
+```
+npm install @telegraph/select
+```
+
+### Add stylesheet
+```
+@import "@telegraph/select"
+```
diff --git a/packages/select/package.json b/packages/select/package.json
new file mode 100644
index 00000000..081a8b10
--- /dev/null
+++ b/packages/select/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@telegraph/select",
+  "version": "0.0.0",
+  "description": "A simple select component built on top of @telegraph/combobox",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/select",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@telegraph/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@telegraph/combobox": "workspace:*",
+    "@telegraph/helpers": "workspace:*"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "workspace:^",
+    "@telegraph/prettier-config": "workspace:^",
+    "@telegraph/vite-config": "workspace:^",
+    "@types/react": "^18.2.48",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.6"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/packages/select/postcss.config.mjs b/packages/select/postcss.config.mjs
new file mode 100644
index 00000000..7f1f7c29
--- /dev/null
+++ b/packages/select/postcss.config.mjs
@@ -0,0 +1,5 @@
+import pkg from "@telegraph/postcss-config";
+
+const { styleEnginePostCssConfig } = pkg;
+
+export default styleEnginePostCssConfig;
diff --git a/packages/select/src/Select/Select.stories.tsx b/packages/select/src/Select/Select.stories.tsx
new file mode 100644
index 00000000..75d45ce0
--- /dev/null
+++ b/packages/select/src/Select/Select.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Select } from "./Select";
+
+const meta = {
+  title: "Components/Select",
+  component: Select.Root,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["0", "1", "2", "3"],
+      control: {
+        type: "select",
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  args: {
+    size: "2",
+    disabled: false,
+  },
+} satisfies Meta<typeof Select.Root>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const SingleSelect: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = React.useState<string | undefined>(undefined);
+    return (
+      <Select.Root
+        placeholder="Select an option"
+        value={value}
+        onValueChange={setValue}
+        size={args.size}
+        disabled={args.disabled}
+      >
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select.Root>
+    );
+  },
+};
+
+export const MultiSelect: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = React.useState<Array<string>>([]);
+    return (
+      <Select.Root
+        placeholder="Select an option"
+        value={value}
+        onValueChange={setValue}
+        size={args.size}
+        multiple
+        disabled={args.disabled}
+      >
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+        <Select.Option value="3">Option 3</Select.Option>
+        <Select.Option value="4">Option 4</Select.Option>
+      </Select.Root>
+    );
+  },
+};
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
new file mode 100644
index 00000000..08d51dcb
--- /dev/null
+++ b/packages/select/src/Select/Select.tsx
@@ -0,0 +1,118 @@
+import { Combobox } from "@telegraph/combobox";
+import { TgphComponentProps } from "@telegraph/helpers";
+import React from "react";
+
+type Option = TgphComponentProps<typeof Combobox.Option>;
+
+type SingleValue = string;
+type MultipleValue = Array<string>;
+
+type RootProps = Omit<
+  TgphComponentProps<typeof Combobox.Root>,
+  "value" | "onValueChange" | "layout"
+> & {
+  size?: TgphComponentProps<typeof Combobox.Trigger>["size"];
+  triggerProps?: TgphComponentProps<typeof Combobox.Trigger>;
+  contentProps?: TgphComponentProps<typeof Combobox.Content>;
+  optionsProps?: TgphComponentProps<typeof Combobox.Options>;
+  multiple?: boolean;
+} & (
+    | {
+        multiple?: true;
+        value?: MultipleValue;
+        onValueChange?: (value: MultipleValue) => void;
+        layout?: TgphComponentProps<typeof Combobox.Root>["layout"];
+      }
+    | {
+        multiple?: false;
+        value?: SingleValue;
+        onValueChange?: (value: SingleValue) => void;
+        layout?: never;
+      }
+  );
+
+const Root = ({
+  size = "1",
+  multiple = false,
+  value,
+  onValueChange,
+  triggerProps,
+  contentProps,
+  optionsProps,
+  children,
+  ...props
+}: RootProps) => {
+  // Get all of the options passed into Select so that we can display
+  // the label of the selected option in the trigger.
+  const options = React.useMemo(() => {
+    const options = React.Children.toArray(children)
+      // Filter down to the components that are Option components
+      .filter((child) => {
+        return React.isValidElement(child) && child.props.value;
+      })
+      // Map the Option components to an array of objects that have a value and label
+      // so that we can display the label of the selected option in the trigger.
+      .map((child) => {
+        const childOption = child as React.ReactElement<OptionProps>;
+        return {
+          value: childOption.props.value,
+          // If the Option component has a label, use it. Otherwise, use the value
+          // so that we can display something.
+          label: childOption.props?.children || childOption.props.value,
+        };
+      });
+
+    return options;
+  }, [children]);
+
+  const derivedValue = React.useMemo(() => {
+    if (multiple && value && Array.isArray(value)) {
+      return value.map((v) => ({
+        value: v,
+        label: options.find((o) => o.value === v)?.label,
+      }));
+    }
+    return value
+      ? {
+          value: value as string,
+          label: options.find((o) => o.value === value)?.label,
+        }
+      : undefined;
+  }, [multiple, value, options]);
+
+  return (
+    <Combobox.Root
+      value={derivedValue}
+      onValueChange={(value) => {
+        if (multiple && value && Array.isArray(value)) {
+          const changeFn = onValueChange as (value: MultipleValue) => void;
+          changeFn?.(value.map((v) => v.value));
+          return;
+        }
+
+        const changeFn = onValueChange as (value: SingleValue) => void;
+        const valueString = (value as { value: string }).value;
+        changeFn(valueString);
+      }}
+      closeOnSelect={!multiple}
+      {...props}
+    >
+      <Combobox.Trigger size={size} {...triggerProps} />
+      <Combobox.Content {...contentProps}>
+        <Combobox.Options {...optionsProps}>{children}</Combobox.Options>
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+
+type OptionProps = Omit<TgphComponentProps<typeof Combobox.Option>, "label">;
+
+const Option = ({ value, children, ...props }: OptionProps) => {
+  return <Combobox.Option value={value} label={children} {...props} />;
+};
+
+const Select = { Root, Option };
+type SelectProps = RootProps;
+
+export { Select };
+export type { SelectProps, OptionProps, Option };
diff --git a/packages/select/src/Select/index.ts b/packages/select/src/Select/index.ts
new file mode 100644
index 00000000..d3bd3edf
--- /dev/null
+++ b/packages/select/src/Select/index.ts
@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, OptionProps, Option } from "./Select";
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
new file mode 100644
index 00000000..d3bd3edf
--- /dev/null
+++ b/packages/select/src/index.ts
@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, OptionProps, Option } from "./Select";
diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json
new file mode 100644
index 00000000..066c59cb
--- /dev/null
+++ b/packages/select/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@knocklabs/typescript-config/react-library.json",
+  "display": "@telegraph/select",
+  "compilerOptions": {
+    "outDir": "dist",
+    "paths": {
+      "vitest.*": ["../../vitest/*"]
+    },
+    "types": ["@testing-library/jest-dom", "node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts", "dist", "node_modules"]
+}
diff --git a/packages/select/vite.config.mts b/packages/select/vite.config.mts
new file mode 100644
index 00000000..0c27439a
--- /dev/null
+++ b/packages/select/vite.config.mts
@@ -0,0 +1,7 @@
+import {
+  defaultViteConfig,
+  styleEngineViteConfig,
+} from "@telegraph/vite-config";
+import { mergeConfig } from "vite";
+
+export default mergeConfig(defaultViteConfig, styleEngineViteConfig);
diff --git a/packages/select/vitest.config.mts b/packages/select/vitest.config.mts
new file mode 100644
index 00000000..b665eb4f
--- /dev/null
+++ b/packages/select/vitest.config.mts
@@ -0,0 +1,13 @@
+import { defineProject, mergeConfig } from "vitest/config";
+
+import { sharedConfig } from "../../vitest/config";
+
+export default mergeConfig(
+  { ...sharedConfig },
+  defineProject({
+    test: {
+      name: "select",
+      environment: "jsdom",
+    },
+  }),
+);
diff --git a/yarn.lock b/yarn.lock
index 95181a95..b6a6fde3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6626,7 +6626,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@telegraph/combobox@workspace:packages/combobox":
+"@telegraph/combobox@workspace:*, @telegraph/combobox@workspace:packages/combobox":
   version: 0.0.0-use.local
   resolution: "@telegraph/combobox@workspace:packages/combobox"
   dependencies:
@@ -6682,7 +6682,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@telegraph/helpers@workspace:^, @telegraph/helpers@workspace:packages/helpers":
+"@telegraph/helpers@workspace:*, @telegraph/helpers@workspace:^, @telegraph/helpers@workspace:packages/helpers":
   version: 0.0.0-use.local
   resolution: "@telegraph/helpers@workspace:packages/helpers"
   dependencies:
@@ -6988,6 +6988,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@telegraph/select@workspace:packages/select":
+  version: 0.0.0-use.local
+  resolution: "@telegraph/select@workspace:packages/select"
+  dependencies:
+    "@knocklabs/eslint-config": "npm:^0.0.3"
+    "@knocklabs/typescript-config": "npm:^0.0.2"
+    "@telegraph/combobox": "workspace:*"
+    "@telegraph/helpers": "workspace:*"
+    "@telegraph/postcss-config": "workspace:^"
+    "@telegraph/prettier-config": "workspace:^"
+    "@telegraph/vite-config": "workspace:^"
+    "@types/react": "npm:^18.2.48"
+    eslint: "npm:^8.56.0"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.3.1"
+    typescript: "npm:^5.5.4"
+    vite: "npm:^5.3.6"
+  peerDependencies:
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  languageName: unknown
+  linkType: soft
+
 "@telegraph/style-engine@workspace:^, @telegraph/style-engine@workspace:packages/style-engine":
   version: 0.0.0-use.local
   resolution: "@telegraph/style-engine@workspace:packages/style-engine"