diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c7b1baa3af8a..116beb8ac547 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1309,6 +1309,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "titleText": Object {
         "type": "node",
       },
@@ -2905,6 +2908,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "titleText": Object {
         "isRequired": true,
         "type": "node",
@@ -3606,6 +3612,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "sortItems": Object {
         "type": "func",
       },
@@ -5189,6 +5198,9 @@ Map {
           ],
           "type": "oneOf",
         },
+        "slug": Object {
+          "type": "node",
+        },
         "sortItems": Object {
           "type": "func",
         },
@@ -5307,6 +5319,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "sortItems": Object {
         "type": "func",
       },
@@ -6507,6 +6522,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "warn": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 00060d69c922..6771ef8be1bf 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -10,7 +10,7 @@ import Downshift, {
   ControllerStateAndHelpers,
   StateChangeOptions,
 } from 'downshift';
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React, {
   useContext,
   useEffect,
@@ -281,6 +281,11 @@ export interface ComboBoxProps<ItemType>
    */
   size?: ListBoxSize;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.
@@ -338,6 +343,7 @@ const ComboBox = forwardRef(
       warn,
       warnText,
       allowCustomValue = false,
+      slug,
       ...rest
     } = props;
     const prefix = usePrefix();
@@ -505,6 +511,7 @@ const ComboBox = forwardRef(
       {
         [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
         [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
+        [`${prefix}--list-box__wrapper--slug`]: slug,
       },
     ]);
 
@@ -516,6 +523,14 @@ const ComboBox = forwardRef(
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
 
+    // Slug is always size `mini`
+    let normalizedSlug;
+    if (slug) {
+      normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+        size: 'mini',
+      });
+    }
+
     return (
       <Downshift
         {...downshiftProps}
@@ -706,6 +721,7 @@ const ComboBox = forwardRef(
                     translateWithId={translateWithId}
                   />
                 </div>
+                {normalizedSlug}
                 <ListBox.Menu
                   {...getMenuProps({
                     'aria-label': deprecatedAriaLabel || ariaLabel,
@@ -927,6 +943,11 @@ ComboBox.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 25206b4a6b24..0b150db535e0 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -22,7 +22,7 @@ import {
   UseSelectStateChangeTypes,
 } from 'downshift';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import {
   Checkmark,
   WarningAltFilled,
@@ -198,6 +198,11 @@ export interface DropdownProps<ItemType>
    */
   size?: ListBoxSize;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
@@ -255,6 +260,7 @@ const Dropdown = React.forwardRef(
       selectedItem: controlledSelectedItem,
       downshiftProps,
       readOnly,
+      slug,
       ...other
     }: DropdownProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
@@ -351,6 +357,7 @@ const Dropdown = React.forwardRef(
         [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
         [`${prefix}--list-box__wrapper--fluid--focus`]:
           isFluid && isFocused && !isOpen,
+        [`${prefix}--list-box__wrapper--slug`]: slug,
       }
     );
 
@@ -435,6 +442,14 @@ const Dropdown = React.forwardRef(
 
     const menuProps = getMenuProps();
 
+    // Slug is always size `mini`
+    let normalizedSlug;
+    if (slug) {
+      normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+        size: 'mini',
+      });
+    }
+
     return (
       <div className={wrapperClasses} {...other}>
         {titleText && (
@@ -492,6 +507,7 @@ const Dropdown = React.forwardRef(
               translateWithId={translateWithId}
             />
           </button>
+          {normalizedSlug}
           <ListBox.Menu {...menuProps}>
             {isOpen &&
               items.map((item, index) => {
@@ -684,6 +700,11 @@ Dropdown.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index 9ec5195f91c8..391890256e34 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -7,11 +7,14 @@
 
 import React, { useState, useRef } from 'react';
 import Checkbox from '../Checkbox';
+import ComboBox from '../ComboBox';
+import Dropdown from '../Dropdown';
 import DatePicker from '../DatePicker';
 import DatePickerInput from '../DatePickerInput';
 import Form from './Form';
 import FormGroup from '../FormGroup';
 import FileUploader from '../FileUploader';
+import { MultiSelect, FilterableMultiSelect } from '../MultiSelect';
 import FluidForm from '../FluidForm';
 import FluidNumberInput from '../FluidNumberInput';
 import FluidDatePicker from '../FluidDatePicker';
@@ -117,6 +120,34 @@ const buttonEvents = {
   className: 'some-class',
 };
 
+const items = [
+  {
+    id: 'option-0',
+    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    id: 'option-3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
+  },
+  {
+    id: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    id: 'option-5',
+    text: 'Option 5',
+  },
+];
+
 export default {
   title: 'Components/Form',
   component: Form,
@@ -391,13 +422,70 @@ export const _AIForm = (args) => {
           </DatePicker>
           <TextInput {...TextInputProps} slug={slug} {...rest} />
           <TextArea {...textareaProps} slug={slug} {...rest} />
+          <Dropdown
+            id="default"
+            titleText="Dropdown title"
+            helperText="This is some helper text"
+            initialSelectedItem={items[1]}
+            label="Option 1"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            slug={slug}
+            {...rest}
+          />
+          <MultiSelect
+            label="Multiselect Label"
+            id="carbon-multiselect-example"
+            titleText="Multiselect title"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            selectionFeedback="top-after-reopen"
+            slug={slug}
+            {...rest}
+          />
+          <FilterableMultiSelect
+            id="carbon-multiselect-example-3"
+            titleText="FilterableMultiselect title"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            selectionFeedback="top-after-reopen"
+            slug={slug}
+            {...rest}
+          />
+          <ComboBox
+            onChange={() => {}}
+            id="carbon-combobox"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            titleText="ComboBox title"
+            helperText="Combobox helper text"
+            slug={slug}
+            {...rest}
+          />
+          <Select
+            id="select-1"
+            labelText="Select an option"
+            helperText="Optional helper text"
+            slug={slug}
+            {...rest}>
+            <SelectItem value="" text="" />
+            <SelectItem
+              value="An example option that is really long to show what should be done to handle long text"
+              text="An example option that is really long to show what should be done to handle long text"
+            />
+            <SelectItem value="Option 2" text="Option 2" />
+            <SelectItem value="Option 3" text="Option 3" />
+            <SelectItem value="Option 4" text="Option 4" />
+          </Select>
           <Button type="submit" className="some-class" {...buttonEvents}>
             Submit
           </Button>
         </Stack>
       </Form>
 
-      <FluidForm aria-label="sample form" className="fluid-slug-form">
+      <FluidForm aria-label="sample ai form" className="fluid-slug-form">
         <div style={{ display: 'flex' }}>
           <FluidDatePicker datePickerType="single" style={{ width: '100%' }}>
             <FluidDatePickerInput
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index 3e6cbd717a95..0c7f9ff3ccb9 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -60,6 +60,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
     useTitleInItem,
     warn,
     warnText,
+    slug,
   },
   ref
 ) {
@@ -100,6 +101,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
       [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
+      [`${prefix}--list-box__wrapper--slug`]: slug,
     }
   );
   const helperId = !helperText
@@ -207,6 +209,14 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
     }
   }
 
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug, {
+      size: 'mini',
+    });
+  }
+
   return (
     <Selection
       disabled={disabled}
@@ -448,6 +458,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
                       translateWithId={translateWithId}
                     />
                   </div>
+                  {normalizedSlug}
                   {isOpen ? (
                     <ListBox.Menu {...menuProps}>
                       {sortItems(
@@ -657,6 +668,11 @@ FilterableMultiSelect.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
+   */
+  slug: PropTypes.node,
+
   ...sortingPropTypes,
 
   /**
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 1dd72c3c72e6..b8abe4302d11 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -14,7 +14,7 @@ import {
   UseSelectStateChangeTypes,
 } from 'downshift';
 import isEqual from 'lodash.isequal';
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React, { ForwardedRef, useContext, useRef, useState } from 'react';
 import ListBox, {
   ListBoxSize,
@@ -269,6 +269,11 @@ export interface MultiSelectProps<ItemType>
    */
   size?: ListBoxSize;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
@@ -332,6 +337,7 @@ const MultiSelect = React.forwardRef(
       selectedItems: selected,
       readOnly,
       locale = 'en',
+      slug,
     }: MultiSelectProps<ItemType>,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
@@ -448,6 +454,7 @@ const MultiSelect = React.forwardRef(
         [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
         [`${prefix}--list-box__wrapper--fluid--focus`]:
           !isOpen && isFluid && isFocused,
+        [`${prefix}--list-box__wrapper--slug`]: slug,
       }
     );
     const titleClasses = cx(`${prefix}--label`, {
@@ -570,6 +577,14 @@ const MultiSelect = React.forwardRef(
         }
       : {};
 
+    // Slug is always size `mini`
+    let normalizedSlug;
+    if (slug) {
+      normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+        size: 'mini',
+      });
+    }
+
     return (
       <div className={wrapperClasses}>
         <label className={titleClasses} {...getLabelProps()}>
@@ -637,6 +652,7 @@ const MultiSelect = React.forwardRef(
                 translateWithId={translateWithId}
               />
             </button>
+            {normalizedSlug}
           </div>
           <ListBox.Menu {...getMenuProps()}>
             {isOpen &&
@@ -857,6 +873,11 @@ MultiSelect.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index f940724d686b..b119b33d9ec3 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React, {
   ChangeEventHandler,
   ComponentPropsWithRef,
@@ -119,6 +119,11 @@ interface SelectProps
    */
   size?: 'sm' | 'md' | 'lg';
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Specify whether the control is currently in warning state
    */
@@ -151,6 +156,7 @@ const Select = React.forwardRef(function Select(
     warn = false,
     warnText,
     onChange,
+    slug,
     ...other
   }: SelectProps,
   ref: ForwardedRef<HTMLSelectElement>
@@ -171,6 +177,7 @@ const Select = React.forwardRef(function Select(
     [`${prefix}--select--warning`]: warn,
     [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--select--slug`]: slug,
   });
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -241,6 +248,14 @@ const Select = React.forwardRef(function Select(
     },
   };
 
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'mini',
+    });
+  }
+
   const input = (() => {
     return (
       <>
@@ -295,6 +310,7 @@ const Select = React.forwardRef(function Select(
             onFocus={handleFocus}
             onBlur={handleFocus}>
             {input}
+            {normalizedSlug}
             {isFluid && <hr className={`${prefix}--select__divider`} />}
             {isFluid && error ? error : null}
           </div>
@@ -396,6 +412,11 @@ Select.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `Select` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Specify whether the control is currently in warning state
    */
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
index 3f0527fd192f..87c5808624d0 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/Slug/index.js
@@ -91,7 +91,9 @@ export const Slug = React.forwardRef(function Slug(
     onRevertClick,
     revertActive,
     revertLabel = 'Revert to AI input',
+    slugLabel = 'Show information',
     size = 'xs',
+    ...rest
   },
   ref
 ) {
@@ -123,6 +125,8 @@ export const Slug = React.forwardRef(function Slug(
     }
   };
 
+  const ariaLabel = `${aiText} - ${slugLabel}`;
+
   return (
     <div className={slugClasses} ref={ref} id={id}>
       {revertActive ? (
@@ -130,14 +134,13 @@ export const Slug = React.forwardRef(function Slug(
           onClick={handleOnRevertClick}
           kind="ghost"
           size="sm"
-          label={revertLabel}>
+          label={revertLabel}
+          {...rest}>
           <Undo />
         </IconButton>
       ) : (
-        <Toggletip align={align} autoAlign={autoAlign}>
-          <ToggletipButton
-            className={slugButtonClasses}
-            label="Show information">
+        <Toggletip align={align} autoAlign={autoAlign} {...rest}>
+          <ToggletipButton className={slugButtonClasses} label={ariaLabel}>
             <span className={`${prefix}--slug__text`}>{aiText}</span>
             {aiTextLabel && (
               <span className={`${prefix}--slug__additional-text`}>
@@ -233,4 +236,9 @@ Slug.propTypes = {
    * Specify the content you want rendered inside the slug ToggleTip
    */
   slugContent: PropTypes.node,
+
+  /**
+   * Specify the text that will be provided to the aria-label of the `Slug` button
+   */
+  slugLabel: PropTypes.string,
 };
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index 9d071791498d..ab29b096bc62 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -177,7 +177,6 @@
 
   .#{$prefix}--date-picker__input:disabled ~ .#{$prefix}--date-picker__icon {
     cursor: not-allowed;
-    fill: $icon-disabled;
   }
 
   .#{$prefix}--date-picker--range
@@ -194,7 +193,7 @@
   .#{$prefix}--date-picker-input__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: convert.to-rem(40px);
+    inset-inline-end: $spacing-08;
     transform: translateY(-50%);
   }
 
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index ee6a21ae7a8b..2383fc968ced 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -16,6 +16,7 @@
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../layer' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
@@ -888,6 +889,58 @@ $list-box-menu-width: convert.to-rem(300px);
     text-overflow: ellipsis;
   }
 
+  // Slug styles
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box {
+    @include ai-gradient;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-12;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug {
+    inset-inline-end: convert.to-rem(88px);
+  }
+
   // Windows HCM fix
   .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__menu,
diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
index 844e2beac44d..5d1ab7452157 100644
--- a/packages/styles/scss/components/select/_select.scss
+++ b/packages/styles/scss/components/select/_select.scss
@@ -6,12 +6,14 @@
 //
 
 @use '../form';
+@use '../../colors' as *;
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../type' as *;
 @use '../../breakpoint' as *;
 @use '../../theme' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
@@ -171,7 +173,7 @@
   }
 
   .#{$prefix}--select__invalid-icon--warning path[fill] {
-    fill: $icon-primary;
+    fill: $black-100;
     opacity: 1;
   }
 
@@ -265,7 +267,7 @@
     fill: $icon-disabled;
   }
 
-  //Skeleton State
+  // Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;
 
@@ -278,6 +280,32 @@
     display: none;
   }
 
+  // Slug styles
+  .#{$prefix}--select--slug .#{$prefix}--slug {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--select--slug .#{$prefix}--select-input {
+    @include ai-gradient;
+
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--select--slug.#{$prefix}--select--invalid
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--slug.#{$prefix}--select--warning
+    .#{$prefix}--select-input {
+    padding-inline-end: $spacing-12;
+  }
+
+  .#{$prefix}--select--slug.#{$prefix}--select--invalid .#{$prefix}--slug,
+  .#{$prefix}--select--slug.#{$prefix}--select--warning .#{$prefix}--slug {
+    inset-inline-end: $spacing-10;
+  }
+
   // Windows HCM fix
   // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--select__arrow {