diff --git a/src/input-group/input-group-list-addon.tsx b/src/input-group/input-group-list-addon.tsx
index f4514cc21..888374ed5 100644
--- a/src/input-group/input-group-list-addon.tsx
+++ b/src/input-group/input-group-list-addon.tsx
@@ -1,11 +1,14 @@
 import type { OpenChangeReason } from "@floating-ui/react";
-import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 
 import { concatIds, VisuallyHidden } from "../shared/accessibility";
 import { DropdownList, DropdownListState } from "../shared/dropdown-list";
 import { ElementWithDropdown } from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+import {
+    LabelContainer,
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { SimpleIdGenerator } from "../util";
 import {
     Divider,
@@ -182,32 +185,14 @@ export const Component = <T, V>(
     // =============================================================================
     const renderLabel = () => {
         if (selected) {
-            return (
-                <div className={dropdownWrapperStyles.valueLabel}>
-                    {getDisplayValue()}
-                </div>
-            );
+            return <ValueLabel>{getDisplayValue()}</ValueLabel>;
         }
 
-        return (
-            <div
-                className={clsx(
-                    dropdownWrapperStyles.valueLabel,
-                    dropdownWrapperStyles.placeholderLabel
-                )}
-            >
-                {placeholder}
-            </div>
-        );
+        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;
     };
 
     const renderSelectorContent = () => (
-        <div
-            className={dropdownWrapperStyles.labelContainer}
-            data-disabled={disabled}
-        >
-            {renderLabel()}
-        </div>
+        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>
     );
 
     const renderElement = () => {
@@ -273,9 +258,7 @@ export const Component = <T, V>(
                     aria-describedby={ariaDescribedBy}
                     aria-invalid={ariaInvalid}
                 >
-                    <div className={dropdownWrapperStyles.valueLabel}>
-                        {getDisplayValue()}
-                    </div>
+                    <ValueLabel>{getDisplayValue()}</ValueLabel>
                 </SelectorReadOnly>
             ) : null;
         } else {
diff --git a/src/input-multi-select/input-multi-select.tsx b/src/input-multi-select/input-multi-select.tsx
index 4ee4b3fc9..6a5618752 100644
--- a/src/input-multi-select/input-multi-select.tsx
+++ b/src/input-multi-select/input-multi-select.tsx
@@ -1,5 +1,4 @@
 import type { OpenChangeReason } from "@floating-ui/react";
-import clsx from "clsx";
 import findIndex from "lodash/findIndex";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -10,7 +9,11 @@ import {
     ExpandableElement,
 } from "../shared/dropdown-list";
 import { ElementWithDropdown } from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+import {
+    LabelContainer,
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { InputBox } from "../shared/input-wrapper";
 import { SimpleIdGenerator } from "../util";
 import type { InputMultiSelectProps } from "./types";
@@ -186,37 +189,27 @@ export const InputMultiSelect = <T, V>({
     const renderLabel = () => {
         if (!selected || selected.length === 0) {
             return (
-                <div
-                    className={clsx(
-                        dropdownWrapperStyles.valueLabel,
-                        dropdownWrapperStyles.placeholderLabel
-                    )}
-                    data-variant={variant}
-                    data-truncate={optionTruncationType}
+                <PlaceholderLabel
+                    variant={variant}
+                    truncateType={optionTruncationType}
                 >
                     {placeholder}
-                </div>
+                </PlaceholderLabel>
             );
         } else {
             return (
-                <div
-                    className={dropdownWrapperStyles.valueLabel}
-                    data-variant={variant}
-                    data-truncate={optionTruncationType}
+                <ValueLabel
+                    variant={variant}
+                    truncateType={optionTruncationType}
                 >
                     {getDisplayValue()}
-                </div>
+                </ValueLabel>
             );
         }
     };
 
     const renderSelectorContent = () => (
-        <div
-            className={dropdownWrapperStyles.labelContainer}
-            data-disabled={disabled}
-        >
-            {renderLabel()}
-        </div>
+        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>
     );
 
     const renderElement = () => {
diff --git a/src/input-nested-multi-select/input-nested-multi-select.tsx b/src/input-nested-multi-select/input-nested-multi-select.tsx
index fd712b592..7ad3a8ffc 100644
--- a/src/input-nested-multi-select/input-nested-multi-select.tsx
+++ b/src/input-nested-multi-select/input-nested-multi-select.tsx
@@ -1,5 +1,4 @@
 import type { OpenChangeReason } from "@floating-ui/react";
-import clsx from "clsx";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import type React from "react";
@@ -15,7 +14,11 @@ import {
     NestedDropdownList,
 } from "../shared/dropdown-list";
 import { ElementWithDropdown } from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+import {
+    LabelContainer,
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { InputBox } from "../shared/input-wrapper";
 import { SimpleIdGenerator, StringHelper } from "../util";
 import type { SelectedItem } from "./helpers";
@@ -250,36 +253,23 @@ export const InputNestedMultiSelect = <V1, V2, V3>({
     const renderLabel = () => {
         if (isEmpty(selectedItems)) {
             return (
-                <div
-                    className={clsx(
-                        dropdownWrapperStyles.valueLabel,
-                        dropdownWrapperStyles.placeholderLabel
-                    )}
-                    data-truncate={optionTruncationType}
-                >
+                <PlaceholderLabel truncateType={optionTruncationType}>
                     {placeholder}
-                </div>
+                </PlaceholderLabel>
             );
         } else {
             return (
-                <div
-                    className={dropdownWrapperStyles.valueLabel}
-                    data-truncate={optionTruncationType}
-                >
+                <ValueLabel truncateType={optionTruncationType}>
                     {truncateValue(getDisplayValue())}
-                </div>
+                </ValueLabel>
             );
         }
     };
 
     const renderSelectorContent = () => (
-        <div
-            className={dropdownWrapperStyles.labelContainer}
-            ref={labelContainerRef}
-            data-disabled={disabled}
-        >
+        <LabelContainer ref={labelContainerRef} disabled={disabled}>
             {renderLabel()}
-        </div>
+        </LabelContainer>
     );
 
     const renderElement = () => {
diff --git a/src/input-nested-select/input-nested-select.tsx b/src/input-nested-select/input-nested-select.tsx
index 04b6e9071..c34705580 100644
--- a/src/input-nested-select/input-nested-select.tsx
+++ b/src/input-nested-select/input-nested-select.tsx
@@ -1,5 +1,4 @@
 import type { OpenChangeReason } from "@floating-ui/react";
-import clsx from "clsx";
 import isEmpty from "lodash/isEmpty";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -15,7 +14,11 @@ import {
     NestedDropdownList,
 } from "../shared/dropdown-list";
 import { ElementWithDropdown } from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+import {
+    LabelContainer,
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { InputBox } from "../shared/input-wrapper";
 import { SimpleIdGenerator, StringHelper } from "../util";
 import type {
@@ -206,36 +209,23 @@ export const InputNestedSelect = <V1, V2, V3>({
     const renderLabel = () => {
         if (isEmpty(selectedItem)) {
             return (
-                <div
-                    className={clsx(
-                        dropdownWrapperStyles.valueLabel,
-                        dropdownWrapperStyles.placeholderLabel
-                    )}
-                    data-truncate={optionTruncationType}
-                >
+                <PlaceholderLabel truncateType={optionTruncationType}>
                     {placeholder}
-                </div>
+                </PlaceholderLabel>
             );
         } else {
             return (
-                <div
-                    className={dropdownWrapperStyles.valueLabel}
-                    data-truncate={optionTruncationType}
-                >
+                <ValueLabel truncateType={optionTruncationType}>
                     {truncateValue(getDisplayValue())}
-                </div>
+                </ValueLabel>
             );
         }
     };
 
     const renderSelectorContent = () => (
-        <div
-            className={dropdownWrapperStyles.labelContainer}
-            ref={labelContainerRef}
-            data-disabled={disabled}
-        >
+        <LabelContainer ref={labelContainerRef} disabled={disabled}>
             {renderLabel()}
-        </div>
+        </LabelContainer>
     );
 
     const renderElement = () => {
diff --git a/src/input-range-select/input-range-select.tsx b/src/input-range-select/input-range-select.tsx
index 5e77f872c..c34e64a97 100644
--- a/src/input-range-select/input-range-select.tsx
+++ b/src/input-range-select/input-range-select.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import type React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
@@ -7,7 +6,10 @@ import { concatIds, VisuallyHidden } from "../shared/accessibility";
 import type { DropdownListApi } from "../shared/dropdown-list";
 import { DropdownList, DropdownListState } from "../shared/dropdown-list";
 import { ElementWithDropdown } from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+import {
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { RangeInputInnerContainer } from "../shared/range-input-inner-container";
 import { SimpleIdGenerator } from "../util";
 import { StringHelper } from "../util/string-helper";
@@ -284,15 +286,9 @@ export const InputRangeSelect = <T, V>({
 
         if (!selected) {
             return (
-                <div
-                    className={clsx(
-                        dropdownWrapperStyles.valueLabel,
-                        dropdownWrapperStyles.placeholderLabel
-                    )}
-                    data-truncate={optionTruncationType}
-                >
+                <PlaceholderLabel truncateType={optionTruncationType}>
                     {truncateValue(rangeType, placeholders?.[rangeType] || "")}
-                </div>
+                </PlaceholderLabel>
             );
         }
 
@@ -301,12 +297,9 @@ export const InputRangeSelect = <T, V>({
         }
 
         return (
-            <div
-                className={dropdownWrapperStyles.valueLabel}
-                data-truncate={optionTruncationType}
-            >
+            <ValueLabel truncateType={optionTruncationType}>
                 {truncateValue(rangeType, getDisplayValue(rangeType))}
-            </div>
+            </ValueLabel>
         );
     };
 
diff --git a/src/input-select/input-select.tsx b/src/input-select/input-select.tsx
index 01fdb29a8..94539d653 100644
--- a/src/input-select/input-select.tsx
+++ b/src/input-select/input-select.tsx
@@ -1,5 +1,4 @@
 import type { OpenChangeReason } from "@floating-ui/react";
-import clsx from "clsx";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
@@ -8,11 +7,12 @@ import {
     DropdownListState,
     ExpandableElement,
 } from "../shared/dropdown-list";
+import { ElementWithDropdown } from "../shared/dropdown-wrapper";
 import {
-    type DropdownWrapperValueLabelDataAttrs,
-    ElementWithDropdown,
-} from "../shared/dropdown-wrapper";
-import * as dropdownWrapperStyles from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
+    LabelContainer,
+    PlaceholderLabel,
+    ValueLabel,
+} from "../shared/dropdown-wrapper/dropdown-wrapper";
 import { InputBox } from "../shared/input-wrapper";
 import { SimpleIdGenerator } from "../util";
 import { StringHelper } from "../util/string-helper";
@@ -181,45 +181,33 @@ export const InputSelect = <T, V>({
     // RENDER FUNCTIONS
     // =============================================================================
     const renderLabel = () => {
-        const valueLabelProps: DropdownWrapperValueLabelDataAttrs = {
-            "data-variant": variant,
-            "data-truncate": optionTruncationType,
-        };
-
         if (!selected) {
             return (
-                <div
-                    className={clsx(
-                        dropdownWrapperStyles.valueLabel,
-                        dropdownWrapperStyles.placeholderLabel
-                    )}
-                    {...valueLabelProps}
+                <PlaceholderLabel
+                    variant={variant}
+                    truncateType={optionTruncationType}
                 >
                     {placeholder}
-                </div>
+                </PlaceholderLabel>
             );
         } else if (renderCustomSelectedOption) {
             return renderCustomSelectedOption(selected);
         } else {
             return (
-                <div
-                    className={dropdownWrapperStyles.valueLabel}
-                    {...valueLabelProps}
+                <ValueLabel
+                    variant={variant}
+                    truncateType={optionTruncationType}
                 >
                     {truncateValue(getDisplayValue())}
-                </div>
+                </ValueLabel>
             );
         }
     };
 
     const renderSelectorContent = () => (
-        <div
-            className={dropdownWrapperStyles.labelContainer}
-            ref={labelContainerRef}
-            data-disabled={disabled}
-        >
+        <LabelContainer ref={labelContainerRef} disabled={disabled}>
             {renderLabel()}
-        </div>
+        </LabelContainer>
     );
 
     const renderElement = () => {
diff --git a/src/shared/dropdown-wrapper/dropdown-wrapper.tsx b/src/shared/dropdown-wrapper/dropdown-wrapper.tsx
new file mode 100644
index 000000000..989075b5a
--- /dev/null
+++ b/src/shared/dropdown-wrapper/dropdown-wrapper.tsx
@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import * as styles from "./dropdown-wrapper.styles";
+import type { LabelContainerProps, ValueLabelProps } from "./types";
+
+export const ValueLabel = ({
+    variant,
+    truncateType,
+    children,
+}: ValueLabelProps) => (
+    <div
+        className={styles.valueLabel}
+        data-variant={variant}
+        data-truncate={truncateType}
+    >
+        {children}
+    </div>
+);
+
+export const PlaceholderLabel = ({
+    variant,
+    truncateType,
+    children,
+}: ValueLabelProps) => (
+    <div
+        className={clsx(styles.valueLabel, styles.placeholderLabel)}
+        data-variant={variant}
+        data-truncate={truncateType}
+    >
+        {children}
+    </div>
+);
+
+export const LabelContainer = forwardRef<HTMLDivElement, LabelContainerProps>(
+    function LabelContainer({ disabled, children }, ref) {
+        return (
+            <div
+                className={styles.labelContainer}
+                data-disabled={disabled}
+                ref={ref}
+            >
+                {children}
+            </div>
+        );
+    }
+);
diff --git a/src/shared/dropdown-wrapper/types.ts b/src/shared/dropdown-wrapper/types.ts
index 823b9f268..74d58b8b6 100644
--- a/src/shared/dropdown-wrapper/types.ts
+++ b/src/shared/dropdown-wrapper/types.ts
@@ -12,9 +12,15 @@ export interface DropdownSelectorProps {
     variant?: DropdownVariantType | undefined;
 }
 
-export type DropdownAlignmentType = "left" | "right";
+export interface ValueLabelProps {
+    variant?: DropdownVariantType | undefined;
+    truncateType?: TruncateType | undefined;
+    children: React.ReactNode;
+}
 
-export interface DropdownWrapperValueLabelDataAttrs {
-    "data-variant"?: DropdownVariantType;
-    "data-truncate"?: TruncateType;
+export interface LabelContainerProps {
+    disabled?: boolean | undefined;
+    children: React.ReactNode;
 }
+
+export type DropdownAlignmentType = "left" | "right";