From e250c52f26ce8c5a54cb9d57d59defbee8ac692b Mon Sep 17 00:00:00 2001
From: jallen <jallen@easypost.com>
Date: Wed, 8 Apr 2026 17:12:55 -0400
Subject: [PATCH 1/4] add support for secondary text on select items

---
 .changeset/nice-tires-trade.md              |   5 +
 easy-ui-react/src/Select/Select.mdx         |   8 +-
 easy-ui-react/src/Select/Select.module.scss |  77 ++++++++++---
 easy-ui-react/src/Select/Select.stories.tsx |  39 +++++++
 easy-ui-react/src/Select/Select.test.tsx    |  38 +++++++
 easy-ui-react/src/Select/Select.tsx         | 114 +++++++++++---------
 easy-ui-react/src/Select/SelectContext.tsx  |   1 +
 easy-ui-react/src/Select/SelectField.tsx    |  21 +++-
 easy-ui-react/src/Select/SelectOption.tsx   |  17 ++-
 easy-ui-react/src/Select/SelectTrigger.tsx  |   6 +-
 10 files changed, 251 insertions(+), 75 deletions(-)
 create mode 100644 .changeset/nice-tires-trade.md

diff --git a/.changeset/nice-tires-trade.md b/.changeset/nice-tires-trade.md
new file mode 100644
index 000000000..2195bab8d
--- /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 63cc79c97..44c13c477 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 a6a7200ae..b4b2482b0 100644
--- a/easy-ui-react/src/Select/Select.module.scss
+++ b/easy-ui-react/src/Select/Select.module.scss
@@ -6,6 +6,7 @@
   position: fixed;
   inset: 0;
 }
+
 .listboxRoot {
   @include Menu.root;
 }
@@ -19,40 +20,61 @@
   @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 {
   @include Menu.separator;
 }
 
+.listbox,
+.option {
+  outline: none;
+}
+
 .fieldRoot {
   @include Input.root;
 }
@@ -60,6 +82,8 @@
 .selectField {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
   @include Input.input;
 
   &:hover {
@@ -93,8 +117,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 12955eeec..6ad4c800d 100644
--- a/easy-ui-react/src/Select/Select.stories.tsx
+++ b/easy-ui-react/src/Select/Select.stories.tsx
@@ -187,3 +187,42 @@ 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)}
+        isDescriptive
+      >
+        <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>
+    );
+  },
+};
\ No newline at end of file
diff --git a/easy-ui-react/src/Select/Select.test.tsx b/easy-ui-react/src/Select/Select.test.tsx
index d13c80fc0..336ad0ee3 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 68fda2bcb..837f5d347 100644
--- a/easy-ui-react/src/Select/Select.tsx
+++ b/easy-ui-react/src/Select/Select.tsx
@@ -43,59 +43,59 @@ 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>,
+  props: SelectProps<T, K>
 ) {
   const {
     isDisabled,
@@ -108,6 +108,7 @@ export function Select<T extends object, K extends Key>(
     helperText,
     placeholder,
     iconAtStart,
+    isDescriptive = false,
   } = props;
 
   const triggerRef = React.useRef(null);
@@ -141,8 +142,15 @@ export function Select<T extends object, K extends Key>(
       triggerRef,
       selectState,
       triggerWidth,
+      isDescriptive,
     };
-  }, [triggerProps, listBoxPropsFromSelect, selectState, triggerWidth]);
+  }, [
+    triggerProps,
+    listBoxPropsFromSelect,
+    selectState,
+    triggerWidth,
+    isDescriptive,
+  ]);
 
   return (
     <InternalSelectContext.Provider value={context}>
@@ -156,6 +164,7 @@ export function Select<T extends object, K extends Key>(
         helperText={helperText}
         placeholder={placeholder}
         iconAtStart={iconAtStart}
+        isDescriptive={isDescriptive}
         labelProps={labelProps}
         valueProps={valueProps}
         helperTextProps={helperTextProps}
@@ -165,6 +174,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/SelectContext.tsx b/easy-ui-react/src/Select/SelectContext.tsx
index 12008082e..3a42ebb02 100644
--- a/easy-ui-react/src/Select/SelectContext.tsx
+++ b/easy-ui-react/src/Select/SelectContext.tsx
@@ -8,6 +8,7 @@ type InternalSelectContextType = {
   triggerRef: MutableRefObject<null>;
   selectState: SelectState<unknown>;
   triggerWidth: number | null;
+  isDescriptive?: boolean;
 };
 
 export const InternalSelectContext =
diff --git a/easy-ui-react/src/Select/SelectField.tsx b/easy-ui-react/src/Select/SelectField.tsx
index 3a8b09829..77bba84fb 100644
--- a/easy-ui-react/src/Select/SelectField.tsx
+++ b/easy-ui-react/src/Select/SelectField.tsx
@@ -54,6 +54,11 @@ export type BaseSelectFieldProps = {
   placeholder?: string;
   /** Left aligned icon on the select field. */
   iconAtStart?: IconSymbol;
+  /**
+   * Whether the select field options include descriptive secondary text.
+   * @default false
+   */
+  isDescriptive?: boolean;
 };
 
 type SelectFieldAttributeProps = {
@@ -92,6 +97,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 +127,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 49d0d9729..030fc798f 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 405dc9ebd..415aaf87e 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"

From 4678fe71204272e95a6d7e792ededf3184eb1d3e Mon Sep 17 00:00:00 2001
From: jallen <jallen@easypost.com>
Date: Wed, 8 Apr 2026 17:56:18 -0400
Subject: [PATCH 2/4] fix lint issue

---
 easy-ui-react/src/Select/Select.module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/easy-ui-react/src/Select/Select.module.scss b/easy-ui-react/src/Select/Select.module.scss
index b4b2482b0..4ffe740bc 100644
--- a/easy-ui-react/src/Select/Select.module.scss
+++ b/easy-ui-react/src/Select/Select.module.scss
@@ -70,8 +70,7 @@
   @include Menu.separator;
 }
 
-.listbox,
-.option {
+.listbox {
   outline: none;
 }
 

From 05d258ad24665dcfe6de58ecb77a39c39fdda5a6 Mon Sep 17 00:00:00 2001
From: jallen <jallen@easypost.com>
Date: Wed, 8 Apr 2026 18:25:00 -0400
Subject: [PATCH 3/4] resolve lint issues

---
 easy-ui-react/src/Select/Select.module.scss | 5 +----
 easy-ui-react/src/Select/Select.stories.tsx | 2 +-
 easy-ui-react/src/Select/Select.test.tsx    | 8 ++++----
 easy-ui-react/src/Select/Select.tsx         | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/easy-ui-react/src/Select/Select.module.scss b/easy-ui-react/src/Select/Select.module.scss
index 4ffe740bc..3fa2a48b0 100644
--- a/easy-ui-react/src/Select/Select.module.scss
+++ b/easy-ui-react/src/Select/Select.module.scss
@@ -13,6 +13,7 @@
 
 .listbox {
   @include Menu.menu;
+  outline: none;
 }
 
 .listboxList,
@@ -70,10 +71,6 @@
   @include Menu.separator;
 }
 
-.listbox {
-  outline: none;
-}
-
 .fieldRoot {
   @include Input.root;
 }
diff --git a/easy-ui-react/src/Select/Select.stories.tsx b/easy-ui-react/src/Select/Select.stories.tsx
index 6ad4c800d..c8de0e1f0 100644
--- a/easy-ui-react/src/Select/Select.stories.tsx
+++ b/easy-ui-react/src/Select/Select.stories.tsx
@@ -225,4 +225,4 @@ export const WithSecondaryText: Story = {
       </Select>
     );
   },
-};
\ No newline at end of file
+};
diff --git a/easy-ui-react/src/Select/Select.test.tsx b/easy-ui-react/src/Select/Select.test.tsx
index 336ad0ee3..f0c675037 100644
--- a/easy-ui-react/src/Select/Select.test.tsx
+++ b/easy-ui-react/src/Select/Select.test.tsx
@@ -115,13 +115,13 @@ describe("<Select />", () => {
         ],
       }),
     );
-  
+
     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({
@@ -136,7 +136,7 @@ describe("<Select />", () => {
         ],
       }),
     );
-  
+
     expect(screen.getAllByText("Option 1")[0]).toBeInTheDocument();
     expect(screen.getByText("First description")).toBeInTheDocument();
   });
diff --git a/easy-ui-react/src/Select/Select.tsx b/easy-ui-react/src/Select/Select.tsx
index 837f5d347..bfc46eb72 100644
--- a/easy-ui-react/src/Select/Select.tsx
+++ b/easy-ui-react/src/Select/Select.tsx
@@ -95,7 +95,7 @@ export type SelectProps<T, K extends Key> = Omit<
  * ```
  */
 export function Select<T extends object, K extends Key>(
-  props: SelectProps<T, K>
+  props: SelectProps<T, K>,
 ) {
   const {
     isDisabled,

From 6502f0f3e6782f8c8243641c12b69a1524734ddd Mon Sep 17 00:00:00 2001
From: jallen <jallen@easypost.com>
Date: Thu, 9 Apr 2026 10:22:12 -0400
Subject: [PATCH 4/4] review comment

---
 easy-ui-react/src/Select/Select.stories.tsx |  1 -
 easy-ui-react/src/Select/Select.tsx         | 11 +----------
 easy-ui-react/src/Select/SelectContext.tsx  |  1 -
 easy-ui-react/src/Select/SelectField.tsx    |  5 -----
 4 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/easy-ui-react/src/Select/Select.stories.tsx b/easy-ui-react/src/Select/Select.stories.tsx
index c8de0e1f0..f3e5bf829 100644
--- a/easy-ui-react/src/Select/Select.stories.tsx
+++ b/easy-ui-react/src/Select/Select.stories.tsx
@@ -197,7 +197,6 @@ export const WithSecondaryText: Story = {
         label="Rate adjustment"
         selectedKey={selectedKey}
         onSelectionChange={(selected) => setSelectedKey(selected)}
-        isDescriptive
       >
         <Select.Option
           key="standard"
diff --git a/easy-ui-react/src/Select/Select.tsx b/easy-ui-react/src/Select/Select.tsx
index bfc46eb72..42c686536 100644
--- a/easy-ui-react/src/Select/Select.tsx
+++ b/easy-ui-react/src/Select/Select.tsx
@@ -108,7 +108,6 @@ export function Select<T extends object, K extends Key>(
     helperText,
     placeholder,
     iconAtStart,
-    isDescriptive = false,
   } = props;
 
   const triggerRef = React.useRef(null);
@@ -142,15 +141,8 @@ export function Select<T extends object, K extends Key>(
       triggerRef,
       selectState,
       triggerWidth,
-      isDescriptive,
     };
-  }, [
-    triggerProps,
-    listBoxPropsFromSelect,
-    selectState,
-    triggerWidth,
-    isDescriptive,
-  ]);
+  }, [triggerProps, listBoxPropsFromSelect, selectState, triggerWidth]);
 
   return (
     <InternalSelectContext.Provider value={context}>
@@ -164,7 +156,6 @@ export function Select<T extends object, K extends Key>(
         helperText={helperText}
         placeholder={placeholder}
         iconAtStart={iconAtStart}
-        isDescriptive={isDescriptive}
         labelProps={labelProps}
         valueProps={valueProps}
         helperTextProps={helperTextProps}
diff --git a/easy-ui-react/src/Select/SelectContext.tsx b/easy-ui-react/src/Select/SelectContext.tsx
index 3a42ebb02..12008082e 100644
--- a/easy-ui-react/src/Select/SelectContext.tsx
+++ b/easy-ui-react/src/Select/SelectContext.tsx
@@ -8,7 +8,6 @@ type InternalSelectContextType = {
   triggerRef: MutableRefObject<null>;
   selectState: SelectState<unknown>;
   triggerWidth: number | null;
-  isDescriptive?: boolean;
 };
 
 export const InternalSelectContext =
diff --git a/easy-ui-react/src/Select/SelectField.tsx b/easy-ui-react/src/Select/SelectField.tsx
index 77bba84fb..e94d15c14 100644
--- a/easy-ui-react/src/Select/SelectField.tsx
+++ b/easy-ui-react/src/Select/SelectField.tsx
@@ -54,11 +54,6 @@ export type BaseSelectFieldProps = {
   placeholder?: string;
   /** Left aligned icon on the select field. */
   iconAtStart?: IconSymbol;
-  /**
-   * Whether the select field options include descriptive secondary text.
-   * @default false
-   */
-  isDescriptive?: boolean;
 };
 
 type SelectFieldAttributeProps = {