From 1bdf32b9f894b3ed65fd0415004e0807ad8c6973 Mon Sep 17 00:00:00 2001
From: Shelvin <ssingh@easypost.com>
Date: Thu, 29 Jun 2023 17:53:29 -0700
Subject: [PATCH] create select component (#327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📝 Changes

Adds `<Select />` component

## ✅ Checklist

- [x] Visuals are complete and match Figma
- [x] Code is complete and in accordance with our style guide
- [x] Design and theme tokens are audited for any relevant changes
- [x] Unit tests are written and passing
- [x] TSDoc is written or updated for any component API surface area
- [x] Stories in Storybook accompany any relevant component changes
- [x] Ensure no accessibility violations are reported in Storybook
- [x] Specs and documentation are up-to-date
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added
---
 .changeset/forty-books-peel.md                |   6 +
 documentation/specs/Select.md                 | 133 +++++++------
 easy-ui-icons/src/CalendarMonth.json          |   5 +
 .../src/InputField/InputField.module.scss     | 153 +-------------
 easy-ui-react/src/InputField/InputField.tsx   |   2 +-
 easy-ui-react/src/InputField/Label.tsx        |   8 +-
 easy-ui-react/src/InputField/_mixins.scss     | 176 ++++++++++++++++
 easy-ui-react/src/InputField/utilities.ts     |   2 +-
 easy-ui-react/src/Menu/Menu.module.scss       |  64 +-----
 easy-ui-react/src/Menu/MenuOverlay.tsx        |  42 ++--
 easy-ui-react/src/Menu/_mixins.scss           |  80 ++++++++
 easy-ui-react/src/Menu/utilities.ts           |  38 ++++
 easy-ui-react/src/Select/Select.mdx           | 148 ++++++++++++++
 easy-ui-react/src/Select/Select.module.scss   | 100 ++++++++++
 easy-ui-react/src/Select/Select.stories.tsx   | 188 ++++++++++++++++++
 easy-ui-react/src/Select/Select.test.tsx      | 129 ++++++++++++
 easy-ui-react/src/Select/Select.tsx           | 166 ++++++++++++++++
 easy-ui-react/src/Select/SelectContext.tsx    |  22 ++
 easy-ui-react/src/Select/SelectField.tsx      | 138 +++++++++++++
 easy-ui-react/src/Select/SelectOption.tsx     |  63 ++++++
 easy-ui-react/src/Select/SelectOverlay.tsx    | 103 ++++++++++
 easy-ui-react/src/Select/SelectSection.tsx    |  60 ++++++
 easy-ui-react/src/Select/SelectTrigger.tsx    |  80 ++++++++
 easy-ui-react/src/Select/index.ts             |   1 +
 24 files changed, 1613 insertions(+), 294 deletions(-)
 create mode 100644 .changeset/forty-books-peel.md
 create mode 100644 easy-ui-icons/src/CalendarMonth.json
 create mode 100644 easy-ui-react/src/InputField/_mixins.scss
 create mode 100644 easy-ui-react/src/Menu/_mixins.scss
 create mode 100644 easy-ui-react/src/Menu/utilities.ts
 create mode 100644 easy-ui-react/src/Select/Select.mdx
 create mode 100644 easy-ui-react/src/Select/Select.module.scss
 create mode 100644 easy-ui-react/src/Select/Select.stories.tsx
 create mode 100644 easy-ui-react/src/Select/Select.test.tsx
 create mode 100644 easy-ui-react/src/Select/Select.tsx
 create mode 100644 easy-ui-react/src/Select/SelectContext.tsx
 create mode 100644 easy-ui-react/src/Select/SelectField.tsx
 create mode 100644 easy-ui-react/src/Select/SelectOption.tsx
 create mode 100644 easy-ui-react/src/Select/SelectOverlay.tsx
 create mode 100644 easy-ui-react/src/Select/SelectSection.tsx
 create mode 100644 easy-ui-react/src/Select/SelectTrigger.tsx
 create mode 100644 easy-ui-react/src/Select/index.ts

diff --git a/.changeset/forty-books-peel.md b/.changeset/forty-books-peel.md
new file mode 100644
index 00000000..1cf2a46a
--- /dev/null
+++ b/.changeset/forty-books-peel.md
@@ -0,0 +1,6 @@
+---
+"@easypost/easy-ui-icons": minor
+"@easypost/easy-ui": minor
+---
+
+Add `Select` component
diff --git a/documentation/specs/Select.md b/documentation/specs/Select.md
index a161f243..c2e20c14 100644
--- a/documentation/specs/Select.md
+++ b/documentation/specs/Select.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-The `Select` component allows users to select a value from a set of options.
+The `Select` component allows users to select a value from a set of options. Though the associated dropdown is visually similar to Easy UI's `Menu`, it takes on the ARIA role of `listbox` and the associated options have a role of `option`.
 
 ### Use Cases
 
@@ -39,7 +39,25 @@ import type { AriaSelectProps } from "react-aria";
 export type SelectSize = "sm" | "md" | "lg";
 export type ValidationState = "valid" | "invalid";
 
-export type SelectProps = AriaSelectProps & {
+export type SelectProps<T> = AriaSelectProps<T> &
+  BaseSelectFieldProps & {
+    /** Method that is called when the open state of the select field changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Sets the open state of the select field. */
+    isOpen?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: Key | null;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: Key;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: Key) => void;
+    /** The contents of the collection. */
+    children: CollectionChildren<T>;
+    /** The option keys that are disabled. These options cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: Iterable<Key>;
+  };
+
+export type BaseSelectFieldProps = {
   /**
    * Visually hides the label, but keeps it accessible.
    * @default false
@@ -56,7 +74,7 @@ export type SelectProps = AriaSelectProps & {
    */
   isRequired?: boolean;
   /**
-   * Whether the select field should display its "valid" or "invalid" visual styling.
+   * Whether the input should display its "valid" or "invalid" visual styling.
    * @default valid
    */
   validationState?: ValidationState;
@@ -65,45 +83,41 @@ export type SelectProps = AriaSelectProps & {
    * @default false
    */
   isLabelEmphasized?: boolean;
-  /**
-   * Whether the element should receive focus on render.
-   * @default false
-   */
-  autoFocus?: boolean;
   /**
    * Size affects the overall size of the select field, but it also influences
    * the size of iconAtStart.
    * @default md
    */
-  size?: SelectSize;
+  size?: SelectFieldSize;
   /** The content to display as the label. */
   label: ReactNode;
   /** Error text that appears below select field. */
   errorText?: ReactNode;
   /** Helper text that appears below select field. */
   helperText?: ReactNode;
-  /** Left aligned icon on select field. */
+  /** Temporary text that occupies select field when it is empty. */
+  placeholder?: string;
+  /** Left aligned icon on input. */
   iconAtStart?: IconSymbol;
-  /** Method that is called when the open state of the select field changes. */
-  onOpenChange?: (isOpen: boolean) => void;
-  /** Sets the open state of the select field. */
-  isOpen?: boolean;
-  /** The currently selected key in the collection (controlled). */
-  selectedKey?: Key | null;
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey?: Key;
-  /** Handler that is called when the selection changes. */
-  onSelectionChange?: (key: Key) => any;
-  /** The contents of the collection. */
-  children: CollectionChildren<T>;
-  /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-  disabledKeys?: Iterable<Key>;
 };
+
+type SelectFieldAttributeProps = {
+  /** Label props associated with field. */
+  labelProps?: DOMAttributes<FocusableElement>;
+  /** Helper text props associated with field. */
+  helperTextProps?: DOMAttributes<FocusableElement>;
+  /** Error text props associated with field. */
+  errorTextProps?: DOMAttributes<FocusableElement>;
+  /** Field value props. */
+  valueProps?: DOMAttributes<FocusableElement>;
+};
+
+type SelectFieldProps = BaseSelectFieldProps & SelectFieldAttributeProps;
 ```
 
 ### Anatomy
 
-The `Select` component's behavior and accessibility implementation will be handled by React Aria's `useSelect` hook. State managment will be handled by React Stately's `useSelectState` hook. To handle the associated dropdown menu, `OverlayContainer` and `usePopover` will be used from React Aria. The implementation for the menu will take heavy inspiration from Easy UI's `MenuOverlay`.
+The `Select` component's behavior and accessibility implementation will be handled by React Aria's `useSelect` hook. State managment will be handled by React Stately's `useSelectState` hook. To handle the associated listbox, `OverlayContainer`, `useListBox`, and `usePopover` will be used from React Aria. For the options, `useOption` will be used from React Aria. The `Select` component will also support sections and will use `useListBoxSection` and `useSeparator` from React Aria. The implementation for the listbox will take heavy inspiration from Easy UI's `MenuOverlay`.
 
 ### Example Usage
 
@@ -113,48 +127,48 @@ _Simple controlled selection:_
 import { Select } from "@easypost/easy-ui/Select";
 
 export function Component() {
-  const [shippingVolume, setShippingVolume] = React.useState("# of packages");
+  const [selectedOption, setSelectedOption] = React.useState("Option 1");
 
   return (
     <Select
-      label="Monthly shipping volume"
-      selectedKey={shippingVolume}
-      onSelectionChange={(selected) => setShippingVolume(selected)}
+      label="Label"
+      selectedKey={selectedOption}
+      onSelectionChange={(selected) => setSelectedOption(selected)}
+      helperText="Helper text"
     >
-      <Select.Item key="# of packages"># of packages</Select.Item>
-      <Select.Item key="1000">1000</Select.Item>
-      <Select.Item key="50000">50000</Select.Item>
-      <Select.Item key="1M+">1M+</Select.Item>
+      <Select.Option key="Option 1">Option 1</Select.Option>
+      <Select.Option key="Option 2">Option 2</Select.Option>
+      <Select.Option key="Option 3">Option 3</Select.Option>
     </Select>
   );
 }
 ```
 
-_With helper text and passing data from external source:_
+_Simple controlled selection with separator:_
 
 ```tsx
 import { Select } from "@easypost/easy-ui/Select";
 
-const options = [
-  { volume: "# of packages" },
-  { volume: "1000" },
-  { volume: "50000" },
-  { volume: "1M+" },
-];
-
 export function Component() {
-  const [shippingVolume, setShippingVolume] = React.useState("# of packages");
+  const [selectedOption, setSelectedOption] = React.useState("Option 1");
 
   return (
     <Select
-      label="Monthly shipping volume"
-      selectedKey={shippingVolume}
-      onSelectionChange={(selected) => setShippingVolume(selected)}
+      label="Label"
+      selectedKey={selectedOption}
+      onSelectionChange={(selected) => setSelectedOption(selected)}
       helperText="Helper text"
     >
-      {options.map((item) => (
-        <Select.Item key={item.volume}>{item.volume}</Select.Item>
-      ))}
+      <Select.Section aria-label="Primary options">
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select.Section>
+      <Select.Section aria-label="Secondary options">
+        <Select.Option key="Option 4">Option 4</Select.Option>
+        <Select.Option key="Option 5">Option 5</Select.Option>
+        <Select.Option key="Option 6">Option 6</Select.Option>
+      </Select.Section>
     </Select>
   );
 }
@@ -168,14 +182,13 @@ import { Select } from "@easypost/easy-ui/Select";
 export function Component() {
   return (
     <Select
-      label="Monthly shipping volume"
+      label="Label"
       validationState="invalid"
       errorText="Something went wrong"
     >
-      <Select.Item key="# of packages"># of packages</Select.Item>
-      <Select.Item key="1000">1000</Select.Item>
-      <Select.Item key="50000">50000</Select.Item>
-      <Select.Item key="1M+">1M+</Select.Item>
+      <Select.Option key="Option 1">Option 1</Select.Option>
+      <Select.Option key="Option 2">Option 2</Select.Option>
+      <Select.Option key="Option 3">Option 3</Select.Option>
     </Select>
   );
 }
@@ -189,11 +202,10 @@ import SomeIcon from "@easypost/easy-ui-icons/Some";
 
 export function Component() {
   return (
-    <Select label="Monthly shipping volume" iconAtStart={SomeIcon}>
-      <Select.Item key="# of packages"># of packages</Select.Item>
-      <Select.Item key="1000">1000</Select.Item>
-      <Select.Item key="50000">50000</Select.Item>
-      <Select.Item key="1M+">1M+</Select.Item>
+    <Select label="Label" iconAtStart={SomeIcon}>
+      <Select.Option key="Option 1">Option 1</Select.Option>
+      <Select.Option key="Option 2">Option 2</Select.Option>
+      <Select.Option key="Option 3">Option 3</Select.Option>
     </Select>
   );
 }
@@ -208,8 +220,9 @@ export function Component() {
 Accessibility
 
 - Labels should be included on all select fields as they describe the purpose of any associated form control. In situations when you may want the label to be visually hidden, use the `isLabelVisuallyHidden` prop.
+- The dropdown has an ARIA role of `listbox`.
 
 ## Dependencies
 
-- `react-aria`— `useSelect` `usePopover` `OverlayContainer`
-- `react-stately` - `useSelectState` `Item`
+- `react-aria`— `useSelect` `usePopover` `OverlayContainer` `useListBox` `useOption` `useListBoxSection` `useSeparator`
+- `react-stately` - `useSelectState` `Item` `Section`
diff --git a/easy-ui-icons/src/CalendarMonth.json b/easy-ui-icons/src/CalendarMonth.json
new file mode 100644
index 00000000..ae564c42
--- /dev/null
+++ b/easy-ui-icons/src/CalendarMonth.json
@@ -0,0 +1,5 @@
+{
+  "name": "calendar_month",
+  "style": "outlined",
+  "source": "@material-symbols/svg-300"
+}
diff --git a/easy-ui-react/src/InputField/InputField.module.scss b/easy-ui-react/src/InputField/InputField.module.scss
index ed6d8620..6b94c6a0 100644
--- a/easy-ui-react/src/InputField/InputField.module.scss
+++ b/easy-ui-react/src/InputField/InputField.module.scss
@@ -1,85 +1,12 @@
 @use "../styles/common" as *;
+@use "mixins" as Input;
 
 .root {
-  @include component-token(
-    "inputfield",
-    "border_radius",
-    design-token("shape.border_radius.md")
-  );
-  @include component-token(
-    "inputfield",
-    "box_shadow",
-    design-token("shadow.input")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.resting",
-    theme-token("color.text")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.gray.resting",
-    theme-token("color.text.gray.resting")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.gray.bold",
-    theme-token("color.text.gray.bold")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.disabled",
-    theme-token("color.text.disabled")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.engaged",
-    theme-token("color.text.engaged")
-  );
-  @include component-token(
-    "inputfield",
-    "color.text.danger",
-    theme-token("color.text.danger")
-  );
-  @include component-token(
-    "inputfield",
-    "color.border.resting",
-    theme-token("color.border.resting")
-  );
-  @include component-token(
-    "inputfield",
-    "color.border.engaged",
-    theme-token("color.border.engaged")
-  );
-  @include component-token(
-    "inputfield",
-    "color.border.danger",
-    theme-token("color.border.danger")
-  );
-  @include component-token(
-    "inputfield",
-    "color.background",
-    theme-token("color.background")
-  );
-  @include component-token(
-    "inputfield",
-    "color.background.disabled",
-    theme-token("color.background.disabled.subtle")
-  );
-  @include component-token("inputfield", "max-height-sm", 32px);
-  @include component-token(
-    "inputfield",
-    "z-index",
-    design-token("z_index.input_icon")
-  );
-  display: flex;
-  flex-direction: column;
+  @include Input.root;
 }
 
 .inputIconContainer {
-  display: flex;
-  align-items: center;
-  position: relative;
+  @include Input.inputIconContainer;
 }
 
 .label {
@@ -91,79 +18,19 @@
 }
 
 .input {
-  @include font-style("body1");
-  @include component-token("inputfield", "min-height-textarea", 48px);
-  @include component-token(
-    "inputfield",
-    "icon-input-padding",
-    design-token("space.6")
-  );
-  color: component-token("inputfield", "color.text.resting");
-  background-color: component-token("inputfield", "color.background");
-  border: design-token("shape.border_width.1") solid
-    component-token("inputfield", "color.border.resting");
-  border-radius: component-token("inputfield", "border_radius");
-  padding: calc(
-    #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
-  );
-  outline: none;
-  position: relative;
-  width: 100%;
-
-  &:focus,
-  &:active {
-    color: component-token("inputfield", "color.text.engaged");
-    border-color: component-token("inputfield", "color.border.engaged");
-  }
-
-  &:focus {
-    box-shadow: component-token("inputfield", "box_shadow");
-  }
-
-  &::placeholder {
-    color: component-token("inputfield", "color.text.gray.resting");
-  }
-
-  &:disabled {
-    background-color: component-token(
-      "inputfield",
-      "color.background.disabled"
-    );
-    color: component-token("inputfield", "color.text.disabled");
-  }
+  @include Input.input;
 }
 
 .errorInput {
-  color: component-token("inputfield", "color.text.danger");
-  border-color: component-token("inputfield", "color.border.danger");
-
-  &:focus,
-  &:active {
-    border-color: component-token("inputfield", "color.border.danger");
-  }
+  @include Input.error;
 }
 
 .inputSizeSm {
-  @include font-style("body2");
-  padding: calc(
-      #{design-token("space.1")} - #{design-token("shape.border_width.1")}
-    )
-    calc(#{design-token("space.1.5")} - #{design-token("shape.border_width.1")});
-  max-height: component-token("inputfield", "max-height-sm");
-  @include component-token("inputfield", "password-input-padding-right", 0);
-  @include component-token(
-    "inputfield",
-    "icon-input-padding",
-    design-token("space.4.5")
-  );
+  @include Input.inputSm;
 }
 
 .inputSizeLg {
-  padding: calc(
-    #{design-token("space.2")} - #{design-token("shape.border_width.1")}
-  );
-  @include component-token("inputfield", "min-height-textarea", 56px);
-  @include component-token("inputfield", "password-input-padding-right", 0);
+  @include Input.inputLg;
 }
 
 .passwordInput {
@@ -222,7 +89,7 @@
 }
 
 .hovered {
-  border-color: component-token("inputfield", "color.border.engaged");
+  @include Input.hovered;
 }
 
 .input:active + .passwordBtn,
@@ -282,11 +149,11 @@
 }
 
 .iconStartInput {
-  padding-left: component-token("inputfield", "icon-input-padding");
+  @include Input.iconStartInput;
 }
 
 .iconEndInput {
-  padding-right: component-token("inputfield", "icon-input-padding");
+  @include Input.iconEndInput;
 }
 
 .inputIconPlacementSm {
diff --git a/easy-ui-react/src/InputField/InputField.tsx b/easy-ui-react/src/InputField/InputField.tsx
index 1052fe52..4887cd5c 100644
--- a/easy-ui-react/src/InputField/InputField.tsx
+++ b/easy-ui-react/src/InputField/InputField.tsx
@@ -172,7 +172,7 @@ export function InputField(props: InputFieldProps) {
     <div className={classNames(styles.root)}>
       <Label
         isLabelVisuallyHidden={isLabelVisuallyHidden}
-        inputSize={adjustedSize}
+        fieldSize={adjustedSize}
         hasError={hasError}
         isLabelEmphasized={isLabelEmphasized}
         {...labelProps}
diff --git a/easy-ui-react/src/InputField/Label.tsx b/easy-ui-react/src/InputField/Label.tsx
index eef6ef15..61928888 100644
--- a/easy-ui-react/src/InputField/Label.tsx
+++ b/easy-ui-react/src/InputField/Label.tsx
@@ -16,10 +16,10 @@ export type LabelProps = {
    */
   isLabelEmphasized?: boolean;
   /**
-   * Size of associated input.
+   * Size of associated field.
    * @default 'md'
    */
-  inputSize?: InputSize;
+  fieldSize?: InputSize;
   /**
    * Label text displays with error styles.
    * @default false
@@ -39,7 +39,7 @@ export function Label(props: LabelProps) {
   const {
     isLabelVisuallyHidden = false,
     isLabelEmphasized = false,
-    inputSize = "md",
+    fieldSize = "md",
     hasError = false,
     children,
     ...labelProps
@@ -47,7 +47,7 @@ export function Label(props: LabelProps) {
 
   const textVariant = isLabelEmphasized
     ? "subtitle1"
-    : inputSize === "sm"
+    : fieldSize === "sm"
     ? "body2"
     : "body1";
   const as = isLabelEmphasized ? "strong" : "span";
diff --git a/easy-ui-react/src/InputField/_mixins.scss b/easy-ui-react/src/InputField/_mixins.scss
new file mode 100644
index 00000000..7326a90d
--- /dev/null
+++ b/easy-ui-react/src/InputField/_mixins.scss
@@ -0,0 +1,176 @@
+@use "../styles/common" as *;
+
+@mixin root {
+  @include component-token(
+    "inputfield",
+    "border_radius",
+    design-token("shape.border_radius.md")
+  );
+  @include component-token(
+    "inputfield",
+    "box_shadow",
+    design-token("shadow.input")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.resting",
+    theme-token("color.text")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.gray.resting",
+    theme-token("color.text.gray.resting")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.subdued",
+    theme-token("color.text.subdued")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.gray.bold",
+    theme-token("color.text.gray.bold")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.disabled",
+    theme-token("color.text.disabled")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.engaged",
+    theme-token("color.text.engaged")
+  );
+  @include component-token(
+    "inputfield",
+    "color.text.danger",
+    theme-token("color.text.danger")
+  );
+  @include component-token(
+    "inputfield",
+    "color.border.resting",
+    theme-token("color.border.resting")
+  );
+  @include component-token(
+    "inputfield",
+    "color.border.engaged",
+    theme-token("color.border.engaged")
+  );
+  @include component-token(
+    "inputfield",
+    "color.border.danger",
+    theme-token("color.border.danger")
+  );
+  @include component-token(
+    "inputfield",
+    "color.background",
+    theme-token("color.background")
+  );
+  @include component-token(
+    "inputfield",
+    "color.background.disabled",
+    theme-token("color.background.disabled.subtle")
+  );
+  @include component-token("inputfield", "max-height-sm", 32px);
+  @include component-token(
+    "inputfield",
+    "z-index",
+    design-token("z_index.input_icon")
+  );
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin input {
+  @include font-style("body1");
+  @include component-token("inputfield", "min-height-textarea", 48px);
+  @include component-token(
+    "inputfield",
+    "icon-input-padding",
+    design-token("space.6")
+  );
+  color: component-token("inputfield", "color.text.resting");
+  background-color: component-token("inputfield", "color.background");
+  border: design-token("shape.border_width.1") solid
+    component-token("inputfield", "color.border.resting");
+  border-radius: component-token("inputfield", "border_radius");
+  padding: calc(
+    #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
+  );
+  outline: none;
+  position: relative;
+  width: 100%;
+
+  &:focus,
+  &:active {
+    color: component-token("inputfield", "color.text.engaged");
+    border-color: component-token("inputfield", "color.border.engaged");
+  }
+
+  &:focus {
+    box-shadow: component-token("inputfield", "box_shadow");
+  }
+
+  &::placeholder {
+    color: component-token("inputfield", "color.text.subdued");
+  }
+
+  &:disabled {
+    background-color: component-token(
+      "inputfield",
+      "color.background.disabled"
+    );
+    color: component-token("inputfield", "color.text.disabled");
+  }
+}
+
+@mixin inputSm {
+  @include font-style("body2");
+  padding: calc(
+      #{design-token("space.1")} - #{design-token("shape.border_width.1")}
+    )
+    calc(#{design-token("space.1.5")} - #{design-token("shape.border_width.1")});
+  max-height: component-token("inputfield", "max-height-sm");
+  @include component-token("inputfield", "password-input-padding-right", 0);
+  @include component-token(
+    "inputfield",
+    "icon-input-padding",
+    design-token("space.4.5")
+  );
+}
+
+@mixin inputLg {
+  padding: calc(
+    #{design-token("space.2")} - #{design-token("shape.border_width.1")}
+  );
+  @include component-token("inputfield", "min-height-textarea", 56px);
+  @include component-token("inputfield", "password-input-padding-right", 0);
+}
+
+@mixin error {
+  color: component-token("inputfield", "color.text.danger");
+  border-color: component-token("inputfield", "color.border.danger");
+
+  &:focus,
+  &:active {
+    border-color: component-token("inputfield", "color.border.danger");
+  }
+}
+
+@mixin hovered {
+  border-color: component-token("inputfield", "color.border.engaged");
+}
+
+@mixin iconStartInput {
+  padding-left: component-token("inputfield", "icon-input-padding");
+}
+
+@mixin iconEndInput {
+  padding-right: component-token("inputfield", "icon-input-padding");
+}
+
+@mixin inputIconContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
diff --git a/easy-ui-react/src/InputField/utilities.ts b/easy-ui-react/src/InputField/utilities.ts
index dc8debe1..9d25fc76 100644
--- a/easy-ui-react/src/InputField/utilities.ts
+++ b/easy-ui-react/src/InputField/utilities.ts
@@ -1,6 +1,6 @@
 import { InputSize } from "./InputField";
 
-/** Small textfield needs xs icon */
+/** Small fields need xs icon */
 export function mapIconSize(size: InputSize) {
   if (size === "sm") {
     return "xs";
diff --git a/easy-ui-react/src/Menu/Menu.module.scss b/easy-ui-react/src/Menu/Menu.module.scss
index 3ec2c297..a7d7652a 100644
--- a/easy-ui-react/src/Menu/Menu.module.scss
+++ b/easy-ui-react/src/Menu/Menu.module.scss
@@ -1,4 +1,5 @@
 @use "../styles/common" as *;
+@use "mixins" as Menu;
 
 .underlay {
   position: fixed;
@@ -6,62 +7,21 @@
 }
 
 .root {
-  @include component-token(
-    "menu",
-    "border_radius",
-    design-token("shape.border_radius.md")
-  );
-  @include component-token(
-    "menu",
-    "color.background",
-    theme-token("color.surface.overlay")
-  );
-  @include component-token("menu", "color.text", theme-token("color.text"));
-  @include component-token(
-    "menu",
-    "color.text.disabled",
-    theme-token("color.text.disabled")
-  );
-  @include component-token(
-    "menu",
-    "color.background.hovered",
-    theme-token("color.surface.overlay.hovered")
-  );
-  @include component-token("menu", "shadow", theme-token("shadow.overlay"));
-  @include component-token("menu", "padding.x", design-token("space.2"));
-  @include component-token("menu", "color.border", theme-token("color.border"));
-
-  @include responsive-prop("menu", "width", width);
-
-  background: component-token("menu", "color.background");
-  border: design-token("shape.border_width.1") solid
-    component-token("menu", "color.border");
-  border-radius: component-token("menu", "border_radius");
-  box-shadow: component-token("menu", "shadow");
-  display: flex;
-  flex-direction: column;
-  min-width: component-token("menu", "min-width");
+  @include Menu.root;
 }
 
 .menu {
-  overflow: auto;
-  padding: component-token("menu", "padding.y") 0;
+  @include Menu.menu;
 }
 
 .menuList,
 .sectionList {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
+  @include Menu.menuList;
 }
 
 .itemContent,
 .separator {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: component-token("menu", "item_height");
-  padding: 0 component-token("menu", "padding.x");
+  @include Menu.itemContent;
 }
 
 .item {
@@ -69,7 +29,7 @@
 }
 
 .itemContent {
-  color: component-token("menu", "color.text");
+  @include Menu.itemContentColor;
 }
 
 .menu,
@@ -82,19 +42,13 @@
 }
 
 .item[data-is-focused="true"] .itemContent {
-  background: component-token("menu", "color.background.hovered");
+  @include Menu.itemDataFocused;
 }
 
 .item[data-is-disabled="true"] .itemContent {
-  color: component-token("menu", "color.text.disabled");
-  cursor: default;
-  font-style: italic;
+  @include Menu.itemDataDisabled;
 }
 
 .separator::after {
-  content: "";
-  height: 0;
-  border: 0 solid component-token("menu", "color.border");
-  border-top-width: 0.5px;
-  border-bottom-width: 0.5px;
+  @include Menu.separator;
 }
diff --git a/easy-ui-react/src/Menu/MenuOverlay.tsx b/easy-ui-react/src/Menu/MenuOverlay.tsx
index b0e94028..0d55d5e7 100644
--- a/easy-ui-react/src/Menu/MenuOverlay.tsx
+++ b/easy-ui-react/src/Menu/MenuOverlay.tsx
@@ -9,27 +9,24 @@ import {
   usePopover,
 } from "react-aria";
 import { useTreeState } from "react-stately";
-import {
-  ResponsiveProp,
-  getComponentToken,
-  getResponsiveValue,
-  pxToRem,
-} from "../utilities/css";
+import { ResponsiveProp } from "../utilities/css";
 import { useInternalMenuContext } from "./MenuContext";
 import { MenuItemContent } from "./MenuItem";
 import { MenuSectionContent } from "./MenuSection";
 import { useScrollbar } from "./useScrollbar";
+import {
+  DEFAULT_MAX_ITEMS_UNTIL_SCROLL,
+  DEFAULT_PLACEMENT,
+  DEFAULT_WIDTH,
+  ITEM_HEIGHT,
+  Y_PADDING_INSIDE_OVERLAY,
+  OVERLAY_OFFSET,
+  OVERLAY_PADDING_FROM_CONTAINER,
+  getUnmergedPopoverStyles,
+} from "./utilities";
 
 import styles from "./Menu.module.scss";
 
-const DEFAULT_MAX_ITEMS_UNTIL_SCROLL = 5;
-const DEFAULT_PLACEMENT = "bottom";
-const DEFAULT_WIDTH = "auto";
-const ITEM_HEIGHT = 32;
-const Y_PADDING_INSIDE_OVERLAY = 8;
-const OVERLAY_OFFSET = 8;
-const OVERLAY_PADDING_FROM_CONTAINER = 12;
-
 export type MenuOverlayWidth =
   | "auto"
   | "fit-content"
@@ -118,22 +115,7 @@ function MenuOverlayContent<T extends object>(props: MenuOverlayProps<T>) {
 
   const style = {
     ...popoverProps.style,
-    ...getComponentToken("menu", "item_height", `${pxToRem(ITEM_HEIGHT)}rem`),
-    ...getComponentToken(
-      "menu",
-      "padding.y",
-      `${pxToRem(Y_PADDING_INSIDE_OVERLAY)}rem`,
-    ),
-    ...getComponentToken(
-      "menu",
-      "min-width",
-      width === "auto" ? `${triggerWidth}px` : undefined,
-    ),
-    ...getResponsiveValue(
-      "menu",
-      "width",
-      width !== "auto" && width !== "fit-content" ? width : "auto",
-    ),
+    ...getUnmergedPopoverStyles(width, triggerWidth),
   } as React.CSSProperties;
 
   return (
diff --git a/easy-ui-react/src/Menu/_mixins.scss b/easy-ui-react/src/Menu/_mixins.scss
new file mode 100644
index 00000000..a8d55856
--- /dev/null
+++ b/easy-ui-react/src/Menu/_mixins.scss
@@ -0,0 +1,80 @@
+@use "../styles/common" as *;
+
+@mixin root {
+  @include component-token(
+    "menu",
+    "border_radius",
+    design-token("shape.border_radius.md")
+  );
+  @include component-token(
+    "menu",
+    "color.background",
+    theme-token("color.surface.overlay")
+  );
+  @include component-token("menu", "color.text", theme-token("color.text"));
+  @include component-token(
+    "menu",
+    "color.text.disabled",
+    theme-token("color.text.disabled")
+  );
+  @include component-token(
+    "menu",
+    "color.background.hovered",
+    theme-token("color.surface.overlay.hovered")
+  );
+  @include component-token("menu", "shadow", theme-token("shadow.overlay"));
+  @include component-token("menu", "padding.x", design-token("space.2"));
+  @include component-token("menu", "color.border", theme-token("color.border"));
+
+  @include responsive-prop("menu", "width", width);
+
+  background: component-token("menu", "color.background");
+  border: design-token("shape.border_width.1") solid
+    component-token("menu", "color.border");
+  border-radius: component-token("menu", "border_radius");
+  box-shadow: component-token("menu", "shadow");
+  display: flex;
+  flex-direction: column;
+  min-width: component-token("menu", "min-width");
+}
+
+@mixin menu {
+  overflow: auto;
+  padding: component-token("menu", "padding.y") 0;
+}
+
+@mixin menuList {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+@mixin itemContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: component-token("menu", "item_height");
+  padding: 0 component-token("menu", "padding.x");
+}
+
+@mixin itemContentColor {
+  color: component-token("menu", "color.text");
+}
+
+@mixin itemDataFocused {
+  background: component-token("menu", "color.background.hovered");
+}
+
+@mixin itemDataDisabled {
+  color: component-token("menu", "color.text.disabled");
+  cursor: default;
+  font-style: italic;
+}
+
+@mixin separator {
+  content: "";
+  height: 0;
+  border: 0 solid component-token("menu", "color.border");
+  border-top-width: 0.5px;
+  border-bottom-width: 0.5px;
+}
diff --git a/easy-ui-react/src/Menu/utilities.ts b/easy-ui-react/src/Menu/utilities.ts
new file mode 100644
index 00000000..44964a52
--- /dev/null
+++ b/easy-ui-react/src/Menu/utilities.ts
@@ -0,0 +1,38 @@
+import {
+  getComponentToken,
+  getResponsiveValue,
+  pxToRem,
+} from "../utilities/css";
+import { MenuOverlayWidth } from "./MenuOverlay";
+
+export const DEFAULT_MAX_ITEMS_UNTIL_SCROLL = 5;
+export const DEFAULT_PLACEMENT = "bottom";
+export const DEFAULT_WIDTH = "auto";
+export const ITEM_HEIGHT = 32;
+export const Y_PADDING_INSIDE_OVERLAY = 8;
+export const OVERLAY_OFFSET = 8;
+export const OVERLAY_PADDING_FROM_CONTAINER = 12;
+
+export function getUnmergedPopoverStyles(
+  width: MenuOverlayWidth,
+  triggerWidth: number | null,
+): React.CSSProperties {
+  return {
+    ...getComponentToken("menu", "item_height", `${pxToRem(ITEM_HEIGHT)}rem`),
+    ...getComponentToken(
+      "menu",
+      "padding.y",
+      `${pxToRem(Y_PADDING_INSIDE_OVERLAY)}rem`,
+    ),
+    ...getComponentToken(
+      "menu",
+      "min-width",
+      width === "auto" ? `${triggerWidth}px` : undefined,
+    ),
+    ...getResponsiveValue(
+      "menu",
+      "width",
+      width !== "auto" && width !== "fit-content" ? width : "auto",
+    ),
+  };
+}
diff --git a/easy-ui-react/src/Select/Select.mdx b/easy-ui-react/src/Select/Select.mdx
new file mode 100644
index 00000000..0662552d
--- /dev/null
+++ b/easy-ui-react/src/Select/Select.mdx
@@ -0,0 +1,148 @@
+import React from "react";
+import { Canvas, Meta, ArgTypes } from "@storybook/blocks";
+import { Select } from "./Select";
+import * as SelectStories from "./Select.stories";
+
+<Meta of={SelectStories} />
+
+# Select
+
+The `<Select />` component allows users to select a value from a set of options.
+
+## Standard
+
+Simple `<Select />` with `label`, `placeholder`, and `helperText`.
+
+<Canvas of={SelectStories.Standard} />
+
+## Icon
+
+Use `iconAtStart` to add a left aligned icon.
+
+<Canvas of={SelectStories.Icon} />
+
+## Small Select
+
+Set `size="sm"` for a small `<Select />`.
+
+<Canvas of={SelectStories.SmallSelect} />
+
+## Large Select
+
+Set `size="lg"` for a large `<Select />`.
+
+<Canvas of={SelectStories.LargeSelect} />
+
+## Label with emphasis
+
+Use `isLabelEmphasized=true` to display a label with emphasis.
+
+<Canvas of={SelectStories.LabelWithEmphasis} />
+
+## Error
+
+When `validationState` is set to `invalid`, the `<Select />` field displays with error styles. If provided,
+`errorText` will be displayed as well and override `helperText`.
+
+<Canvas of={SelectStories.Error} />
+
+## Visually hidden label
+
+To hide a `label` but maintain accessibility, use `isLabelVisuallyHidden`.
+
+<Canvas of={SelectStories.VisuallyHiddenLabel} />
+
+## With Separator
+
+Options can be divided into sections via `<Select.Section />`
+
+<Canvas of={SelectStories.WithSeparator} />
+
+## Controlled Selection
+
+For controlled selection, use `selectedKey` and `onSelectionChange`. Uncontrolled selection is possible with `defaultSelectedKey`. See associated code snippet.
+
+<Canvas of={SelectStories.ControlledSelection} />
+
+## Disabled Options
+
+Options can be disabled via the `disabledKeys` prop.
+
+<Canvas of={SelectStories.DisabledOptions} />
+
+## Disabled Select
+
+Use `isDisabled` to disabled the field entirely.
+
+<Canvas of={SelectStories.DisabledSelect} />
+
+## Properties
+
+### Select
+
+```tsx
+export type SelectSize = "sm" | "md" | "lg";
+export type ValidationState = "valid" | "invalid";
+
+export type SelectProps<T> = AriaSelectProps<T> &
+  BaseSelectFieldProps & {
+    /** Method that is called when the open state of the select field changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Sets the open state of the select field. */
+    isOpen?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: Key | null;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: Key;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: Key) => void;
+    /** The contents of the collection. */
+    children: CollectionChildren<T>;
+    /** The option keys that are disabled. These options cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: Iterable<Key>;
+  };
+
+export type BaseSelectFieldProps = {
+  /**
+   * Visually hides the label, but keeps it accessible.
+   * @default false
+   */
+  isLabelVisuallyHidden?: boolean;
+  /**
+   * Whether the select field is disabled.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether user input is required on the select field before form submission.
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * Whether the input should display its "valid" or "invalid" visual styling.
+   * @default valid
+   */
+  validationState?: ValidationState;
+  /**
+   * Label text displays with emphasis.
+   * @default false
+   */
+  isLabelEmphasized?: boolean;
+  /**
+   * Size affects the overall size of the select field, but it also influences
+   * the size of iconAtStart.
+   * @default md
+   */
+  size?: SelectFieldSize;
+  /** The content to display as the label. */
+  label: ReactNode;
+  /** Error text that appears below select field. */
+  errorText?: ReactNode;
+  /** Helper text that appears below select field. */
+  helperText?: ReactNode;
+  /** Temporary text that occupies select field when it is empty. */
+  placeholder?: string;
+  /** Left aligned icon on input. */
+  iconAtStart?: IconSymbol;
+};
+```
diff --git a/easy-ui-react/src/Select/Select.module.scss b/easy-ui-react/src/Select/Select.module.scss
new file mode 100644
index 00000000..eafa898f
--- /dev/null
+++ b/easy-ui-react/src/Select/Select.module.scss
@@ -0,0 +1,100 @@
+@use "../styles/common" as *;
+@use "../InputField/mixins" as Input;
+@use "../Menu/mixins" as Menu;
+
+.underlay {
+  position: fixed;
+  inset: 0;
+}
+.listboxRoot {
+  @include Menu.root;
+}
+
+.listbox {
+  @include Menu.menu;
+}
+
+.listboxList,
+.sectionList {
+  @include Menu.menuList;
+}
+
+.optionContent,
+.separator {
+  @include Menu.itemContent;
+}
+
+.option {
+  text-decoration: none;
+}
+
+.optionContent {
+  @include Menu.itemContentColor;
+}
+
+.listbox,
+.option {
+  outline: none;
+}
+
+.option:not([data-is-disabled="true"]) {
+  cursor: pointer;
+}
+
+.option[data-is-focused="true"] .optionContent {
+  @include Menu.itemDataFocused;
+}
+
+.option[data-is-disabled="true"] .optionContent {
+  @include Menu.itemDataDisabled;
+}
+
+.separator::after {
+  @include Menu.separator;
+}
+
+.fieldRoot {
+  @include Input.root;
+}
+
+.selectField {
+  @include Input.input;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    @include Input.hovered;
+  }
+}
+
+.selectSizeSm {
+  @include Input.inputSm;
+}
+
+.selectSizeLg {
+  @include Input.inputLg;
+}
+
+.selectFieldError {
+  @include Input.error;
+}
+
+.selectFieldIconStart {
+  @include Input.iconStartInput;
+}
+
+.selectFieldIconEnd {
+  @include Input.iconEndInput;
+}
+
+.selectFieldIconContainer {
+  @include Input.inputIconContainer;
+}
+
+.selectFieldText {
+  overflow: hidden;
+}
+
+.listboxOpen {
+  border-color: component-token("inputfield", "color.border.engaged");
+}
diff --git a/easy-ui-react/src/Select/Select.stories.tsx b/easy-ui-react/src/Select/Select.stories.tsx
new file mode 100644
index 00000000..69565081
--- /dev/null
+++ b/easy-ui-react/src/Select/Select.stories.tsx
@@ -0,0 +1,188 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CalendarMonthIcon from "@easypost/easy-ui-icons/CalendarMonth";
+import React, { Key } from "react";
+import { InputDecorator } from "../utilities/storybook";
+import { Select, SelectProps } from "./Select";
+
+type Story = StoryObj<typeof Select>;
+
+const Template = (args: SelectProps<object>) => {
+  return (
+    <Select {...args}>
+      <Select.Option key="Option 1">Option 1</Select.Option>
+      <Select.Option key="Option 2">Option 2</Select.Option>
+      <Select.Option key="Option 3">Option 3</Select.Option>
+    </Select>
+  );
+};
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  decorators: [InputDecorator],
+  args: {
+    label: "Label",
+    placeholder: "Placeholder text",
+    helperText: "Helper text",
+  },
+};
+
+export default meta;
+
+export const Standard: Story = {
+  render: Template.bind({}),
+  args: {
+    label: "Label",
+    placeholder: "Placeholder text",
+    helperText: "Helper text",
+  },
+};
+
+export const Icon: Story = {
+  render: Template.bind({}),
+  args: {
+    iconAtStart: CalendarMonthIcon,
+  },
+};
+
+export const SmallSelect: Story = {
+  render: () => (
+    <>
+      <Select
+        label="Label"
+        placeholder="Placeholder text"
+        helperText="Helper text"
+        size="sm"
+      >
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select>
+      <Select
+        label="Label"
+        placeholder="Placeholder text"
+        helperText="Helper text"
+        size="sm"
+        iconAtStart={CalendarMonthIcon}
+      >
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select>
+    </>
+  ),
+};
+
+export const LargeSelect: Story = {
+  render: () => (
+    <>
+      <Select
+        label="Label"
+        placeholder="Placeholder text"
+        helperText="Helper text"
+        size="lg"
+      >
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select>
+      <Select
+        label="Label"
+        placeholder="Placeholder text"
+        helperText="Helper text"
+        size="lg"
+        iconAtStart={CalendarMonthIcon}
+      >
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select>
+    </>
+  ),
+};
+
+export const LabelWithEmphasis: Story = {
+  render: Template.bind({}),
+  args: {
+    isLabelEmphasized: true,
+  },
+};
+
+export const Error: Story = {
+  render: Template.bind({}),
+  args: {
+    errorText: "Something went wrong",
+    validationState: "invalid",
+  },
+};
+
+export const VisuallyHiddenLabel: Story = {
+  render: Template.bind({}),
+  args: {
+    isLabelVisuallyHidden: true,
+  },
+};
+
+export const WithSeparator: Story = {
+  render: () => (
+    <Select
+      label="Label"
+      placeholder="Placeholder text"
+      helperText="Helper text"
+    >
+      <Select.Section aria-label="Primary options">
+        <Select.Option key="Option 1">Option 1</Select.Option>
+        <Select.Option key="Option 2">Option 2</Select.Option>
+        <Select.Option key="Option 3">Option 3</Select.Option>
+      </Select.Section>
+      <Select.Section aria-label="Secondary options">
+        <Select.Option key="Option 4">Option 4</Select.Option>
+        <Select.Option key="Option 5">Option 5</Select.Option>
+        <Select.Option key="Option 6">Option 6</Select.Option>
+      </Select.Section>
+    </Select>
+  ),
+};
+
+export const ControlledSelection: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [option, setOption] = React.useState<Key>("Option 1");
+    return (
+      <>
+        <span>Selected option : {option}</span>
+        <Select
+          label="Label"
+          placeholder="Placeholder text"
+          helperText="Helper text"
+          selectedKey={option}
+          onSelectionChange={(selected) => setOption(selected)}
+        >
+          <Select.Option key="Option 1">Option 1</Select.Option>
+          <Select.Option key="Option 2">Option 2</Select.Option>
+          <Select.Option key="Option 3">Option 3</Select.Option>
+        </Select>
+      </>
+    );
+  },
+};
+
+export const DisabledOptions: Story = {
+  render: Template.bind({}),
+  args: {
+    label: "Label",
+    placeholder: "Placeholder text",
+    helperText: "Helper text",
+    disabledKeys: ["Option 1"],
+  },
+};
+
+export const DisabledSelect: Story = {
+  render: Template.bind({}),
+  args: {
+    label: "Label",
+    placeholder: "Placeholder text",
+    helperText: "Helper text",
+    isDisabled: true,
+  },
+};
diff --git a/easy-ui-react/src/Select/Select.test.tsx b/easy-ui-react/src/Select/Select.test.tsx
new file mode 100644
index 00000000..b388f61e
--- /dev/null
+++ b/easy-ui-react/src/Select/Select.test.tsx
@@ -0,0 +1,129 @@
+import { act, screen } from "@testing-library/react";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import React from "react";
+import { vi } from "vitest";
+import { mockGetComputedStyle, render } from "../utilities/test";
+import { Select } from "./Select";
+
+describe("<Select />", () => {
+  let restoreGetComputedStyle: () => void;
+
+  beforeEach(() => {
+    restoreGetComputedStyle = mockGetComputedStyle();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    restoreGetComputedStyle();
+  });
+
+  it("should show on trigger click", async () => {
+    const { user } = render(getSelect());
+    await clickElement(user, screen.getByRole("button"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("should show expand icon by default", () => {
+    render(getSelect());
+    expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
+  });
+
+  it("should display placeholder text", () => {
+    render(getSelect({ selectProps: { placeholder: "placeholder" } }));
+    expect(screen.getByText("placeholder")).toBeInTheDocument();
+  });
+
+  it("should support displaying an uncontrolled default option", () => {
+    render(getSelect({ selectProps: { defaultSelectedKey: "3" } }));
+    expect(screen.getAllByText("Option 3")[0]).toBeInTheDocument();
+  });
+
+  it("should show with defaultOpen", async () => {
+    render(getSelect({ selectProps: { defaultOpen: true } }));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("should show on trigger keydown", async () => {
+    const { user } = render(getSelect());
+    await tabToAndEnterKeySelectTrigger(user);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("should be able to be disabled", async () => {
+    render(getSelect({ selectProps: { isDisabled: true } }));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("should support helperText", () => {
+    render(getSelect({ selectProps: { helperText: "Optional helper text" } }));
+    expect(screen.getByText("Optional helper text")).toBeInTheDocument();
+  });
+
+  it("should support errorText", () => {
+    render(
+      getSelect({
+        selectProps: {
+          errorText: "Optional error text",
+          validationState: "invalid",
+        },
+      }),
+    );
+    expect(screen.getByText("Optional error text")).toBeInTheDocument();
+  });
+
+  it("should support displaying a label with emphasis", () => {
+    render(
+      getSelect({
+        selectProps: {
+          isLabelEmphasized: true,
+        },
+      }),
+    );
+    expect(screen.getAllByText("Label")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("Label")[0].tagName).toBe("STRONG");
+  });
+
+  it("should support being controlled", async () => {
+    const handleSelectionChange = vi.fn();
+    const { user } = render(
+      getSelect({
+        selectProps: { onSelectionChange: handleSelectionChange },
+      }),
+    );
+
+    await clickElement(user, screen.getByRole("button"));
+    await clickElement(user, screen.queryAllByRole("option")[0]);
+    expect(handleSelectionChange).toHaveBeenCalledTimes(1);
+  });
+});
+
+function getSelect({
+  selectProps = {},
+  options = [
+    <Select.Option key="1">Option 1</Select.Option>,
+    <Select.Option key="2">Option 2</Select.Option>,
+    <Select.Option key="3">Option 3</Select.Option>,
+  ],
+} = {}) {
+  return (
+    <Select label="Label" {...selectProps}>
+      {...options}
+    </Select>
+  );
+}
+
+async function clickElement(user: UserEvent, el: HTMLElement) {
+  await act(async () => {
+    await user.click(el);
+    vi.runAllTimers();
+  });
+}
+
+async function tabToAndEnterKeySelectTrigger(user: UserEvent) {
+  await act(async () => {
+    await user.tab();
+    await user.keyboard("{enter}");
+    vi.runAllTimers();
+  });
+}
diff --git a/easy-ui-react/src/Select/Select.tsx b/easy-ui-react/src/Select/Select.tsx
new file mode 100644
index 00000000..fd5fed53
--- /dev/null
+++ b/easy-ui-react/src/Select/Select.tsx
@@ -0,0 +1,166 @@
+import React, { Key, useMemo } from "react";
+import { CollectionChildren } from "@react-types/shared";
+import { useSelectState } from "react-stately";
+import { AriaSelectProps, useSelect } from "react-aria";
+import { InternalSelectContext } from "./SelectContext";
+import { SelectField, BaseSelectFieldProps } from "./SelectField";
+import { SelectOption } from "./SelectOption";
+import { SelectSection } from "./SelectSection";
+import { SelectOverlay } from "./SelectOverlay";
+import { useTriggerWidth } from "../Menu/useTriggerWidth";
+
+export type SelectProps<T> = AriaSelectProps<T> &
+  BaseSelectFieldProps & {
+    /** Method that is called when the open state of the select field changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Sets the open state of the select field. */
+    isOpen?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: Key | null;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: Key;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: Key) => void;
+    /** The contents of the collection. */
+    children: CollectionChildren<T>;
+    /** The option keys that are disabled. These options cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: Iterable<Key>;
+  };
+
+/**
+ * The `<Select />` component allows users to select a value from a set of options.
+ *
+ * @remarks
+ * A common use-case for this component is to be used on forms as a traditional
+ * select.
+ *
+ * @example
+ * _Simple controlled selection:_
+*```tsx
+* import { Select } from "@easypost/easy-ui/Select";
+*
+* export function Component() {
+*  const [selectedOption, setSelectedOption] = React.useState("Option 1");
+*
+*  return (
+*    <Select
+*      label="Label"
+*      selectedKey={selectedOption}
+*      onSelectionChange={(selected) => setSelectedOption(selected)}
+*      helperText="Helper text"
+*    >
+*      <Select.Option key="Option 1">Option 1</Select.Option>
+*      <Select.Option key="Option 2">Option 2</Select.Option>
+*      <Select.Option key="Option 3">Option 3</Select.Option>
+*    </Select>
+*  );
+* }
+```
+*
+* @example
+* _Simple controlled selection with separator:_
+*```tsx
+* import { Select } from "@easypost/easy-ui/Select";
+*
+* export function Component() {
+*  const [selectedOption, setSelectedOption] = React.useState("Option 1");
+*
+*  return (
+*    <Select
+*      label="Label"
+*      selectedKey={selectedOption}
+*      onSelectionChange={(selected) => setSelectedOption(selected)}
+*      helperText="Helper text"
+*    >
+*      <Select.Section aria-label="Primary options">
+*       <Select.Option key="Option 1">Option 1</Select.Option>
+*       <Select.Option key="Option 2">Option 2</Select.Option>
+*       <Select.Option key="Option 3">Option 3</Select.Option>
+*       </Select.Section>
+*      <Select.Section aria-label="Secondary options">
+*       <Select.Option key="Option 4">Option 4</Select.Option>
+*       <Select.Option key="Option 5">Option 5</Select.Option>
+*       <Select.Option key="Option 6">Option 6</Select.Option>
+*       </Select.Section>
+*    </Select>
+*  );
+* }
+```
+ */
+export function Select<T extends object>(props: SelectProps<T>) {
+  const {
+    isLabelVisuallyHidden,
+    isDisabled,
+    validationState,
+    isLabelEmphasized,
+    size = "md",
+    label,
+    errorText,
+    helperText,
+    placeholder,
+    iconAtStart,
+  } = props;
+
+  const triggerRef = React.useRef(null);
+  const selectState = useSelectState(props);
+
+  const {
+    labelProps,
+    valueProps,
+    triggerProps,
+    menuProps: listBoxPropsFromSelect,
+    descriptionProps: helperTextProps,
+    errorMessageProps: errorTextProps,
+  } = useSelect(props, selectState, triggerRef);
+
+  const triggerWidth = useTriggerWidth(triggerRef);
+
+  const context = useMemo(() => {
+    return {
+      triggerProps,
+      listBoxPropsFromSelect,
+      triggerRef,
+      selectState,
+      triggerWidth,
+    };
+  }, [triggerProps, listBoxPropsFromSelect, selectState, triggerWidth]);
+
+  return (
+    <InternalSelectContext.Provider value={context}>
+      <SelectField
+        isLabelVisuallyHidden={isLabelVisuallyHidden}
+        isDisabled={isDisabled}
+        validationState={validationState}
+        isLabelEmphasized={isLabelEmphasized}
+        size={size}
+        label={label}
+        errorText={errorText}
+        helperText={helperText}
+        placeholder={placeholder}
+        iconAtStart={iconAtStart}
+        labelProps={labelProps}
+        valueProps={valueProps}
+        helperTextProps={helperTextProps}
+        errorTextProps={errorTextProps}
+      />
+      <SelectOverlay />
+    </InternalSelectContext.Provider>
+  );
+}
+/**
+ * Represents a section in a `<Select />`.
+ *
+ * @remarks
+ * Should be used as a wrapper for `<Select.Option />` and
+ * as `<Select.Section />`
+ */
+Select.Section = SelectSection;
+
+/**
+ * Represents an option for `<Select />`.
+ *
+ * @remarks
+ * Should be rendered as a child of `<Select />` as
+ * `<Select.Option />`.
+ */
+Select.Option = SelectOption;
diff --git a/easy-ui-react/src/Select/SelectContext.tsx b/easy-ui-react/src/Select/SelectContext.tsx
new file mode 100644
index 00000000..12008082
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectContext.tsx
@@ -0,0 +1,22 @@
+import { MutableRefObject, createContext, useContext } from "react";
+import { SelectState } from "react-stately";
+import { AriaButtonProps, AriaListBoxOptions } from "react-aria";
+
+type InternalSelectContextType = {
+  triggerProps: AriaButtonProps;
+  listBoxPropsFromSelect: AriaListBoxOptions<unknown>;
+  triggerRef: MutableRefObject<null>;
+  selectState: SelectState<unknown>;
+  triggerWidth: number | null;
+};
+
+export const InternalSelectContext =
+  createContext<InternalSelectContextType | null>(null);
+
+export function useInternalSelectContext() {
+  const selectContext = useContext(InternalSelectContext);
+  if (!selectContext) {
+    throw new Error("InternalSelectContext must be used inside a <Select />");
+  }
+  return selectContext;
+}
diff --git a/easy-ui-react/src/Select/SelectField.tsx b/easy-ui-react/src/Select/SelectField.tsx
new file mode 100644
index 00000000..39dca5a0
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectField.tsx
@@ -0,0 +1,138 @@
+import React, { ReactNode, DOMAttributes } from "react";
+import { FocusableElement } from "@react-types/shared";
+import { HiddenSelect } from "react-aria";
+import { useInternalSelectContext } from "./SelectContext";
+import { classNames } from "../utilities/css";
+import { IconSymbol } from "../types";
+import { Label } from "../InputField/Label";
+import { InputCaption } from "../InputField/InputCaption";
+import styles from "./Select.module.scss";
+import { Text } from "../Text";
+import { SelectTrigger } from "./SelectTrigger";
+
+export type SelectFieldSize = "sm" | "md" | "lg";
+export type ValidationState = "valid" | "invalid";
+
+export type BaseSelectFieldProps = {
+  /**
+   * Visually hides the label, but keeps it accessible.
+   * @default false
+   */
+  isLabelVisuallyHidden?: boolean;
+  /**
+   * Whether the select field is disabled.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether user input is required on the select field before form submission.
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * Whether the input should display its "valid" or "invalid" visual styling.
+   * @default valid
+   */
+  validationState?: ValidationState;
+  /**
+   * Label text displays with emphasis.
+   * @default false
+   */
+  isLabelEmphasized?: boolean;
+  /**
+   * Size affects the overall size of the select field, but it also influences
+   * the size of iconAtStart.
+   * @default md
+   */
+  size?: SelectFieldSize;
+  /** The content to display as the label. */
+  label: ReactNode;
+  /** Error text that appears below select field. */
+  errorText?: ReactNode;
+  /** Helper text that appears below select field. */
+  helperText?: ReactNode;
+  /** Temporary text that occupies select field when it is empty. */
+  placeholder?: string;
+  /** Left aligned icon on the select field. */
+  iconAtStart?: IconSymbol;
+};
+
+type SelectFieldAttributeProps = {
+  /** Label props associated with field. */
+  labelProps?: DOMAttributes<FocusableElement>;
+  /** Helper text props associated with field. */
+  helperTextProps?: DOMAttributes<FocusableElement>;
+  /** Error text props associated with field. */
+  errorTextProps?: DOMAttributes<FocusableElement>;
+  /** Field value props. */
+  valueProps?: DOMAttributes<FocusableElement>;
+};
+
+type SelectFieldProps = BaseSelectFieldProps & SelectFieldAttributeProps;
+
+export function SelectField(props: SelectFieldProps) {
+  const {
+    isLabelVisuallyHidden = false,
+    isDisabled = false,
+    validationState = "valid",
+    isLabelEmphasized = false,
+    size = "md",
+    label,
+    errorText,
+    helperText,
+    placeholder,
+    iconAtStart,
+    labelProps,
+    valueProps,
+    errorTextProps,
+    helperTextProps,
+  } = props;
+  const { triggerRef, selectState } = useInternalSelectContext();
+
+  const hasError = validationState === "invalid";
+  const showErrorText = hasError && errorText;
+  const showHelperText = !showErrorText && helperText;
+  const captionProps = showHelperText ? helperTextProps : errorTextProps;
+  const captionText = showHelperText ? helperText : errorText;
+
+  return (
+    <div className={classNames(styles.fieldRoot)}>
+      <Label
+        isLabelVisuallyHidden={isLabelVisuallyHidden}
+        fieldSize={size}
+        hasError={hasError}
+        isLabelEmphasized={isLabelEmphasized}
+        {...labelProps}
+      >
+        {label}
+      </Label>
+      <HiddenSelect
+        isDisabled={isDisabled}
+        state={selectState}
+        triggerRef={triggerRef}
+        label={label}
+      />
+      <SelectTrigger
+        valueProps={valueProps}
+        iconAtStart={iconAtStart}
+        hasError={hasError}
+        isDisabled={isDisabled}
+        size={size}
+      >
+        {selectState.selectedItem ? (
+          selectState.selectedItem.rendered
+        ) : (
+          <Text color="subdued">{placeholder}</Text>
+        )}
+      </SelectTrigger>
+      {(showErrorText || showHelperText) && (
+        <InputCaption
+          variant={showHelperText ? "helper" : "error"}
+          {...captionProps}
+        >
+          {captionText}
+        </InputCaption>
+      )}
+    </div>
+  );
+}
diff --git a/easy-ui-react/src/Select/SelectOption.tsx b/easy-ui-react/src/Select/SelectOption.tsx
new file mode 100644
index 00000000..2d0fbc59
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectOption.tsx
@@ -0,0 +1,63 @@
+import React, { ReactNode } from "react";
+import { useOption } from "react-aria";
+import { Item, Node, SelectState } from "react-stately";
+import { Text } from "../Text";
+import { NoInfer } from "../types";
+
+import styles from "./Select.module.scss";
+
+export type SelectOptionProps = {
+  /** An accessibility label for the option. */
+  "aria-label"?: string;
+  /** Rendered contents of the option or child options. */
+  children: ReactNode;
+};
+
+/**
+ * @privateRemarks
+ * This is what is exposed as `<Select.Option />`. This is a wrapper around
+ * @react-stately's Item component to control the props that are
+ * allowed for the component.
+ */
+export function SelectOption<T>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _props: SelectOptionProps & NoInfer<T>,
+) {
+  return null;
+}
+
+Object.assign(SelectOption, Item);
+
+type SelectOptionContentProps<T> = {
+  item: Node<T>;
+  state: SelectState<T>;
+};
+
+export function SelectOptionContent<T>({
+  item,
+  state,
+}: SelectOptionContentProps<T>) {
+  const ref = React.useRef(null);
+  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
+    { key: item.key },
+    state,
+    ref,
+  );
+
+  return (
+    <li
+      {...optionProps}
+      ref={ref}
+      className={styles.option}
+      data-is-disabled={isDisabled}
+      data-is-focused={isFocused}
+      data-is-selected={isSelected}
+    >
+      <div className={styles.optionContent}>
+        <Text variant="body1" truncate>
+          {item.rendered}
+        </Text>
+      </div>
+    </li>
+  );
+}
diff --git a/easy-ui-react/src/Select/SelectOverlay.tsx b/easy-ui-react/src/Select/SelectOverlay.tsx
new file mode 100644
index 00000000..7cb0a286
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectOverlay.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import {
+  DismissButton,
+  OverlayContainer,
+  mergeProps,
+  useListBox,
+  usePopover,
+} from "react-aria";
+
+import { useInternalSelectContext } from "./SelectContext";
+import { SelectOptionContent } from "./SelectOption";
+import styles from "./Select.module.scss";
+import {
+  getUnmergedPopoverStyles,
+  DEFAULT_PLACEMENT,
+  DEFAULT_WIDTH,
+  ITEM_HEIGHT,
+  Y_PADDING_INSIDE_OVERLAY,
+  OVERLAY_OFFSET,
+  OVERLAY_PADDING_FROM_CONTAINER,
+} from "../Menu/utilities";
+import { SelectSectionContent } from "./SelectSection";
+
+export function SelectOverlay() {
+  const { selectState, triggerWidth } = useInternalSelectContext();
+
+  if (!selectState.isOpen || triggerWidth === null) {
+    return null;
+  }
+  return <SelectOverlayContent />;
+}
+
+function SelectOverlayContent() {
+  const { selectState, triggerRef, listBoxPropsFromSelect, triggerWidth } =
+    useInternalSelectContext();
+
+  const popoverRef = React.useRef(null);
+  const listBoxRef = React.useRef(null);
+
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      containerPadding: OVERLAY_PADDING_FROM_CONTAINER,
+      maxHeight: ITEM_HEIGHT * Infinity + Y_PADDING_INSIDE_OVERLAY * 2 + 2,
+      offset: OVERLAY_OFFSET,
+      placement: DEFAULT_PLACEMENT,
+      popoverRef,
+      scrollRef: listBoxRef,
+      triggerRef,
+    },
+    selectState,
+  );
+
+  const { listBoxProps } = useListBox(
+    listBoxPropsFromSelect,
+    selectState,
+    listBoxRef,
+  );
+
+  const style = {
+    ...popoverProps.style,
+    ...getUnmergedPopoverStyles(DEFAULT_WIDTH, triggerWidth),
+  } as React.CSSProperties;
+
+  return (
+    <OverlayContainer>
+      <div {...underlayProps} className={styles.underlay} />
+      <div
+        {...mergeProps(popoverProps, { style })}
+        ref={popoverRef}
+        className={styles.listboxRoot}
+      >
+        <DismissButton onDismiss={selectState.close} />
+        <div
+          {...listBoxProps}
+          ref={listBoxRef}
+          className={styles.listbox}
+          data-width={DEFAULT_WIDTH}
+          data-max-items-until-scroll={Infinity}
+          data-overlayscrollbars-initialize
+        >
+          <ul className={styles.listboxList}>
+            {[...selectState.collection].map((item) => {
+              return item.type === "section" ? (
+                <SelectSectionContent
+                  key={item.key}
+                  section={item}
+                  state={selectState}
+                />
+              ) : (
+                <SelectOptionContent
+                  key={item.key}
+                  item={item}
+                  state={selectState}
+                />
+              );
+            })}
+          </ul>
+        </div>
+        <DismissButton onDismiss={selectState.close} />
+      </div>
+    </OverlayContainer>
+  );
+}
diff --git a/easy-ui-react/src/Select/SelectSection.tsx b/easy-ui-react/src/Select/SelectSection.tsx
new file mode 100644
index 00000000..1d9d142e
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectSection.tsx
@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { useListBoxSection, useSeparator } from "react-aria";
+import { Node, Section, SelectState } from "react-stately";
+import { SelectOptionContent } from "./SelectOption";
+import styles from "./Select.module.scss";
+
+export type SelectSectionProps = {
+  /** Rendered contents of the item or child items. */
+  children: ReactNode;
+
+  /** An accessibility label for the section. */
+  "aria-label"?: string;
+};
+
+/**
+ * @privateRemarks
+ * This is what is exposed as `<Select.Section />`. This is a wrapper around
+ * @react-stately's Section collection component to control the props that are
+ * allowed for the component.
+ */
+export function SelectSection(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _props: SelectSectionProps,
+) {
+  return null;
+}
+Object.assign(SelectSection, Section);
+
+type SelectSectionContentProps<T> = {
+  section: Node<T>;
+  state: SelectState<T>;
+};
+
+export function SelectSectionContent<T>({
+  section,
+  state,
+}: SelectSectionContentProps<T>) {
+  const { itemProps, groupProps } = useListBoxSection({
+    "aria-label": section["aria-label"],
+  });
+  const { separatorProps } = useSeparator({ elementType: "li" });
+  return (
+    <>
+      {section.key !== state.collection.getFirstKey() && (
+        <li {...separatorProps} className={styles.separator} />
+      )}
+      <li {...itemProps}>
+        {section.hasChildNodes && (
+          <ul {...groupProps} className={styles.sectionList}>
+            {[...section.childNodes].map((item) => {
+              return (
+                <SelectOptionContent key={item.key} item={item} state={state} />
+              );
+            })}
+          </ul>
+        )}
+      </li>
+    </>
+  );
+}
diff --git a/easy-ui-react/src/Select/SelectTrigger.tsx b/easy-ui-react/src/Select/SelectTrigger.tsx
new file mode 100644
index 00000000..405dc9eb
--- /dev/null
+++ b/easy-ui-react/src/Select/SelectTrigger.tsx
@@ -0,0 +1,80 @@
+import React, { DOMAttributes, ReactNode } from "react";
+import ExpandMoreIcon400 from "@easypost/easy-ui-icons/ExpandMore400";
+import { FocusableElement } from "@react-types/shared";
+import { useInternalSelectContext } from "./SelectContext";
+import { SelectFieldSize } from "./SelectField";
+import { UnstyledButton } from "../UnstyledButton";
+import { classNames, variationName } from "../utilities/css";
+import { IconSymbol } from "../types";
+import { InputIcon } from "../InputField/InputIcon";
+import styles from "./Select.module.scss";
+
+export type SelectTriggerProps = {
+  /**
+   * Size affects the overall size of the select field, but it also influences
+   * the size of iconAtStart.
+   * @default md
+   */
+  size?: SelectFieldSize;
+  /**
+   * Whether the select field is disabled.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether or not to apply error styles to field.
+   * @default false
+   */
+  hasError?: boolean;
+  /** Left aligned icon on the select field. */
+  iconAtStart?: IconSymbol;
+  /** Field value props. */
+  valueProps?: DOMAttributes<FocusableElement>;
+  /** Text to render. */
+  children: ReactNode;
+};
+
+export function SelectTrigger(props: SelectTriggerProps) {
+  const {
+    size = "md",
+    valueProps,
+    iconAtStart,
+    hasError,
+    isDisabled,
+    children,
+  } = props;
+  const { triggerProps, triggerRef, selectState } = useInternalSelectContext();
+
+  const hasStartIcon = !!iconAtStart;
+  const className = classNames(
+    styles.selectField,
+    styles.selectFieldIconEnd,
+    selectState.isOpen && styles.listboxOpen,
+    hasError && styles.selectFieldError,
+    hasStartIcon && styles.selectFieldIconStart,
+    styles[variationName("selectSize", size)],
+  );
+  return (
+    <div className={styles.selectFieldIconContainer}>
+      {hasStartIcon && (
+        <InputIcon
+          alignment="start"
+          icon={iconAtStart}
+          size={size}
+          isDisabled={isDisabled}
+        />
+      )}
+      <UnstyledButton {...triggerProps} ref={triggerRef} className={className}>
+        <span {...valueProps} className={styles.selectFieldText}>
+          {children}
+        </span>
+      </UnstyledButton>
+      <InputIcon
+        alignment="end"
+        icon={ExpandMoreIcon400}
+        size={size}
+        isDisabled={isDisabled}
+      />
+    </div>
+  );
+}
diff --git a/easy-ui-react/src/Select/index.ts b/easy-ui-react/src/Select/index.ts
new file mode 100644
index 00000000..b6e8a07c
--- /dev/null
+++ b/easy-ui-react/src/Select/index.ts
@@ -0,0 +1 @@
+export * from "./Select";