diff --git a/.changeset/nice-tires-trade.md b/.changeset/nice-tires-trade.md
new file mode 100644
index 00000000..2195bab8
--- /dev/null
+++ b/.changeset/nice-tires-trade.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+add support for secondary text on select items
diff --git a/easy-ui-react/src/Select/Select.mdx b/easy-ui-react/src/Select/Select.mdx
index 63cc79c9..44c13c47 100644
--- a/easy-ui-react/src/Select/Select.mdx
+++ b/easy-ui-react/src/Select/Select.mdx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Canvas, Meta, ArgTypes } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta, ArgTypes, Controls } from "@storybook/addon-docs/blocks";
 import { Select } from "./Select";
 import * as SelectStories from "./Select.stories";
 
@@ -76,6 +76,12 @@ Use `isDisabled` to disabled the field entirely.
 
 <Canvas of={SelectStories.DisabledSelect} />
 
+## With Secondary Text
+
+Each option can render a secondary description. The selected value in the closed field also shows the same secondary text.
+
+<Canvas of={SelectStories.WithSecondaryText} />
+
 ## Properties
 
 ### Select
diff --git a/easy-ui-react/src/Select/Select.module.scss b/easy-ui-react/src/Select/Select.module.scss
index a6a7200a..3fa2a48b 100644
--- a/easy-ui-react/src/Select/Select.module.scss
+++ b/easy-ui-react/src/Select/Select.module.scss
@@ -6,12 +6,14 @@
   position: fixed;
   inset: 0;
 }
+
 .listboxRoot {
   @include Menu.root;
 }
 
 .listbox {
   @include Menu.menu;
+  outline: none;
 }
 
 .listboxList,
@@ -19,34 +21,50 @@
   @include Menu.menuList;
 }
 
-.optionContent,
-.separator {
-  @include Menu.itemContent;
+.listboxList {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .option {
   text-decoration: none;
-}
+  outline: none;
 
-.optionContent {
-  @include Menu.itemContentColor;
-}
+  &:not([data-is-disabled="true"]) {
+    cursor: pointer;
+  }
 
-.listbox,
-.option {
-  outline: none;
+  &[data-is-focused="true"] .optionContent {
+    @include Menu.itemDataFocused;
+  }
+
+  &[data-is-disabled="true"] .optionContent {
+    @include Menu.itemDataDisabled;
+  }
 }
 
-.option:not([data-is-disabled="true"]) {
-  cursor: pointer;
+.optionContent,
+.separator {
+  @include Menu.itemContent;
 }
 
-.option[data-is-focused="true"] .optionContent {
-  @include Menu.itemDataFocused;
+.optionContent {
+  @include Menu.itemContentColor;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+  height: auto;
+  padding-top: design-token("space.1");
+  padding-bottom: design-token("space.1");
 }
 
-.option[data-is-disabled="true"] .optionContent {
-  @include Menu.itemDataDisabled;
+.optionDescription {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
 .separator::after {
@@ -60,6 +78,8 @@
 .selectField {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
   @include Input.input;
 
   &:hover {
@@ -93,8 +113,29 @@
 
 .selectFieldText {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: 0;
+  width: 100%;
+  text-align: left;
+  gap: 0;
+}
+
+.selectedDescription {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
 .listboxOpen {
   border-color: component-token("inputfield", "color.border.engaged");
 }
+
+// Override the absolute-positioned end icon to vertically center
+// when the trigger grows taller (e.g. descriptive two-line mode)
+.selectFieldIconContainer > :last-child {
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/easy-ui-react/src/Select/Select.stories.tsx b/easy-ui-react/src/Select/Select.stories.tsx
index 12955eee..f3e5bf82 100644
--- a/easy-ui-react/src/Select/Select.stories.tsx
+++ b/easy-ui-react/src/Select/Select.stories.tsx
@@ -187,3 +187,41 @@ export const DisabledSelect: Story = {
     isDisabled: true,
   },
 };
+
+export const WithSecondaryText: Story = {
+  render: () => {
+    const [selectedKey, setSelectedKey] = React.useState<Key>("standard");
+
+    return (
+      <Select
+        label="Rate adjustment"
+        selectedKey={selectedKey}
+        onSelectionChange={(selected) => setSelectedKey(selected)}
+      >
+        <Select.Option
+          key="standard"
+          textValue="Standard Adjustment"
+          description="One Rate Adjustment criteria is followed and added to all qualifying shipments"
+        >
+          Standard Adjustment
+        </Select.Option>
+
+        <Select.Option
+          key="cumulative"
+          textValue="Cumulative Adjustment"
+          description="Multiple Rate Adjustments are added together to create one total rate markup amount"
+        >
+          Cumulative Adjustment
+        </Select.Option>
+
+        <Select.Option
+          key="hierarchical"
+          textValue="Hierarchical Adjustment"
+          description="One Rate Adjustment will be added based on a priority order of possible Rate Adjustments"
+        >
+          Hierarchical Adjustment
+        </Select.Option>
+      </Select>
+    );
+  },
+};
diff --git a/easy-ui-react/src/Select/Select.test.tsx b/easy-ui-react/src/Select/Select.test.tsx
index d13c80fc..f0c67503 100644
--- a/easy-ui-react/src/Select/Select.test.tsx
+++ b/easy-ui-react/src/Select/Select.test.tsx
@@ -102,6 +102,44 @@ describe("<Select />", () => {
     await clickElement(user, screen.queryAllByRole("option")[0]);
     expect(handleSelectionChange).toHaveBeenCalledTimes(1);
   });
+  it("should render option descriptions in the dropdown", async () => {
+    const { user } = render(
+      getSelect({
+        options: [
+          <Select.Option key="1" description="First description">
+            Option 1
+          </Select.Option>,
+          <Select.Option key="2" description="Second description">
+            Option 2
+          </Select.Option>,
+        ],
+      }),
+    );
+
+    await clickElement(user, screen.getByRole("button"));
+
+    expect(screen.getByText("First description")).toBeInTheDocument();
+    expect(screen.getByText("Second description")).toBeInTheDocument();
+  });
+
+  it("should render selected option description in the closed field", () => {
+    render(
+      getSelect({
+        selectProps: { defaultSelectedKey: "1" },
+        options: [
+          <Select.Option key="1" description="First description">
+            Option 1
+          </Select.Option>,
+          <Select.Option key="2" description="Second description">
+            Option 2
+          </Select.Option>,
+        ],
+      }),
+    );
+
+    expect(screen.getAllByText("Option 1")[0]).toBeInTheDocument();
+    expect(screen.getByText("First description")).toBeInTheDocument();
+  });
 });
 
 function getSelect({
diff --git a/easy-ui-react/src/Select/Select.tsx b/easy-ui-react/src/Select/Select.tsx
index 68fda2bc..42c68653 100644
--- a/easy-ui-react/src/Select/Select.tsx
+++ b/easy-ui-react/src/Select/Select.tsx
@@ -43,56 +43,56 @@ export type SelectProps<T, K extends Key> = Omit<
  *
  * @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>
-*  );
-* }
-```
+ *```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, K extends Key>(
   props: SelectProps<T, K>,
@@ -165,6 +165,7 @@ export function Select<T extends object, K extends Key>(
     </InternalSelectContext.Provider>
   );
 }
+
 /**
  * Represents a section in a `<Select />`.
  *
diff --git a/easy-ui-react/src/Select/SelectField.tsx b/easy-ui-react/src/Select/SelectField.tsx
index 3a8b0982..e94d15c1 100644
--- a/easy-ui-react/src/Select/SelectField.tsx
+++ b/easy-ui-react/src/Select/SelectField.tsx
@@ -92,6 +92,9 @@ export function SelectField(props: SelectFieldProps) {
   const showHelperText = !showErrorText && helperText;
   const captionProps = showHelperText ? helperTextProps : errorTextProps;
   const captionText = showHelperText ? helperText : errorText;
+  const selectedDescription = (
+    selectState.selectedItem?.props as { description?: ReactNode } | undefined
+  )?.description;
 
   return (
     <div className={classNames(styles.fieldRoot)}>
@@ -119,7 +122,18 @@ export function SelectField(props: SelectFieldProps) {
         size={size}
       >
         {selectState.selectedItem ? (
-          selectState.selectedItem.rendered
+          <>
+            <Text variant="body2" truncate>
+              {selectState.selectedItem.rendered}
+            </Text>
+            {selectedDescription && (
+              <span className={styles.selectedDescription}>
+                <Text variant="caption" color="neutral.600" truncate>
+                  {selectedDescription}
+                </Text>
+              </span>
+            )}
+          </>
         ) : (
           <Text color="neutral.600">{placeholder}</Text>
         )}
diff --git a/easy-ui-react/src/Select/SelectOption.tsx b/easy-ui-react/src/Select/SelectOption.tsx
index 49d0d972..030fc798 100644
--- a/easy-ui-react/src/Select/SelectOption.tsx
+++ b/easy-ui-react/src/Select/SelectOption.tsx
@@ -3,7 +3,6 @@ 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 = {
@@ -11,6 +10,10 @@ export type SelectOptionProps = {
   "aria-label"?: string;
   /** Rendered contents of the option or child options. */
   children: ReactNode;
+  /** Secondary text shown under the main option text. */
+  description?: ReactNode;
+  /** Plain text value for accessibility and typeahead. */
+  textValue?: string;
 };
 
 /**
@@ -41,6 +44,9 @@ export function SelectOptionContent<T>({
     ref,
   );
 
+  const description = (item.props as SelectOptionProps | undefined)
+    ?.description;
+
   return (
     <li
       {...optionProps}
@@ -51,9 +57,16 @@ export function SelectOptionContent<T>({
       data-is-selected={isSelected}
     >
       <div className={styles.optionContent}>
-        <Text variant="body1" truncate>
+        <Text variant="body2" truncate>
           {item.rendered}
         </Text>
+        {description && (
+          <span className={styles.optionDescription}>
+            <Text variant="caption" color="neutral.600" truncate>
+              {description}
+            </Text>
+          </span>
+        )}
       </div>
     </li>
   );
diff --git a/easy-ui-react/src/Select/SelectTrigger.tsx b/easy-ui-react/src/Select/SelectTrigger.tsx
index 405dc9eb..415aaf87 100644
--- a/easy-ui-react/src/Select/SelectTrigger.tsx
+++ b/easy-ui-react/src/Select/SelectTrigger.tsx
@@ -1,4 +1,4 @@
-import React, { DOMAttributes, ReactNode } from "react";
+import React, { ReactNode, DOMAttributes } from "react";
 import ExpandMoreIcon400 from "@easypost/easy-ui-icons/ExpandMore400";
 import { FocusableElement } from "@react-types/shared";
 import { useInternalSelectContext } from "./SelectContext";
@@ -65,9 +65,9 @@ export function SelectTrigger(props: SelectTriggerProps) {
         />
       )}
       <UnstyledButton {...triggerProps} ref={triggerRef} className={className}>
-        <span {...valueProps} className={styles.selectFieldText}>
+        <div {...valueProps} className={styles.selectFieldText}>
           {children}
-        </span>
+        </div>
       </UnstyledButton>
       <InputIcon
         alignment="end"