diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts
index b9f16f8a6..74d6ef925 100644
--- a/packages/crayons-core/src/components.d.ts
+++ b/packages/crayons-core/src/components.d.ts
@@ -1827,7 +1827,7 @@ export namespace Components {
         /**
           * The UI variant of the select to be used.
          */
-        "variant": 'button' | 'standard' | 'mail';
+        "variant": 'button' | 'standard' | 'mail' | 'search';
         /**
           * Warning text displayed below the text box.
          */
@@ -4775,7 +4775,7 @@ declare namespace LocalJSX {
         /**
           * The UI variant of the select to be used.
          */
-        "variant"?: 'button' | 'standard' | 'mail';
+        "variant"?: 'button' | 'standard' | 'mail' | 'search';
         /**
           * Warning text displayed below the text box.
          */
diff --git a/packages/crayons-core/src/components/select/readme.md b/packages/crayons-core/src/components/select/readme.md
index d3c6abb3b..a363dc2ab 100644
--- a/packages/crayons-core/src/components/select/readme.md
+++ b/packages/crayons-core/src/components/select/readme.md
@@ -1694,6 +1694,169 @@ function App() {
 </code-block>
 </code-group>
 
+### Demo with search variant
+
+```html live
+<fw-select
+  id="search"
+  label="Rick & Morty Characters"
+  no-data-text="Type to search.."
+  not-found-text="Not available in this universe"
+  placeholder="Your choices"
+  hint-text="Select multiple options"
+  options-variant="avatar"
+  tag-variant="avatar"
+  multiple
+  caret="false"
+  variant="search"
+>
+</fw-select>
+
+<script type="application/javascript">
+  var searchVariant = document.getElementById('search');
+  baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
+  searchVariant.selectedOptions = [
+    {
+      text: 'Rick Sanchez',
+      subText: 'Human',
+      value: '1',
+      graphicsProps: {
+        image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
+      },
+    },
+  ];
+  searchVariant.search = (value, source) => {
+    // Sample function to mimic the dynamic filter over network
+    return fetch(baseURL)
+      .then((resp) => resp.json())
+      .then((data) => {
+        const result = data.filter((x) =>
+          x.name.toLowerCase().includes(value.toLowerCase())
+        );
+        return result.map((x) => {
+          return {
+            text: x.name,
+            subText: x.type,
+            value: x.id.toString(),
+            graphicsProps: { image: x.image },
+          };
+        });
+      });
+  };
+</script>
+```
+
+### Usage of search variant
+
+<code-group>
+<code-block title="HTML">
+
+```html
+<fw-select
+  id="search"
+  label="Rick & Morty Characters"
+  no-data-text="Type to search.."
+  not-found-text="Not available in this universe"
+  placeholder="Your choices"
+  hint-text="Select multiple options"
+  options-variant="avatar"
+  tag-variant="avatar"
+  multiple
+  caret="false"
+  variant="search"
+>
+</fw-select>
+
+<script type="application/javascript">
+  var searchVariant = document.getElementById('search');
+  baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
+  searchVariant.selectedOptions = [
+    {
+      text: 'Rick Sanchez',
+      subText: 'Human',
+      value: '1',
+      graphicsProps: {
+        image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
+      },
+    },
+  ];
+  searchVariant.search = (value, source) => {
+    // Sample function to mimic the dynamic filter over network
+    return fetch(baseURL)
+      .then((resp) => resp.json())
+      .then((data) => {
+        const result = data.filter((x) =>
+          x.name.toLowerCase().includes(value.toLowerCase())
+        );
+        return result.map((x) => {
+          return {
+            text: x.name,
+            subText: x.type,
+            value: x.id.toString(),
+            graphicsProps: { image: x.image },
+          };
+        });
+      });
+  };
+</script>
+```
+
+</code-block>
+<code-block title="React">
+
+```jsx
+function Select() {
+  var baseURL = 'https://api.sampleapis.com/rickandmorty/characters';
+  const searchFn = (value, source) => {
+    // Sample function to mimic the dynamic filter over network
+    return fetch(baseURL)
+      .then((resp) => resp.json())
+      .then((data) => {
+        const result = data.filter((x) =>
+          x.name.toLowerCase().includes(value.toLowerCase())
+        );
+        return result.map((x) => {
+          return {
+            text: x.name,
+            subText: x.type,
+            value: x.id.toString(),
+            graphicsProps: { image: x.image },
+          };
+        });
+      });
+  };
+  return (
+    <FwSelect
+      id='search'
+      label={'Rick & Morty Characters'}
+      notFoundText='Not available in this universe'
+      placeholder='Your choices'
+      hintText='Select multiple options'
+      optionsVariant='avatar'
+      tagVariant='avatar'
+      search={searchFn}
+      multiple
+      selectedOptions={[
+        {
+          text: 'Rick Sanchez',
+          subText: 'Human',
+          value: '1',
+          graphicsProps: {
+            image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
+          },
+        },
+      ]}
+      variant="search"
+      caret={false}
+    ></FwSelect>
+  );
+}
+export default Select;
+```
+
+</code-block>
+</code-group>
+
 ## Styling
 
 Refer the css variables in fw-popover to control the height and width of the select popup.
@@ -1743,7 +1906,7 @@ Refer the [css variables](#css-custom-properties) for modifying the appearance o
 | `tagVariant`         | `tag-variant`       | The variant of tag to be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `"avatar" \| "standard"`                                                                                                                                             | `'standard'`                                                                                                                       |
 | `type`               | `type`              | Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `"number" \| "text"`                                                                                                                                                 | `'text'`                                                                                                                           |
 | `value`              | `value`             | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.                                                                                                                                                                                                                                                                                                                                                                                                                                             | `any`                                                                                                                                                                | `undefined`                                                                                                                        |
-| `variant`            | `variant`           | The UI variant of the select to be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `"button" \| "mail" \| "standard"`                                                                                                                                   | `'standard'`                                                                                                                       |
+| `variant`            | `variant`           | The UI variant of the select to be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `"button" \| "mail" \| "search" \| "standard"`                                                                                                                       | `'standard'`                                                                                                                       |
 | `warningText`        | `warning-text`      | Warning text displayed below the text box.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `string`                                                                                                                                                             | `''`                                                                                                                               |
 
 
diff --git a/packages/crayons-core/src/components/select/select.scss b/packages/crayons-core/src/components/select/select.scss
index 680228329..78f5cfe28 100644
--- a/packages/crayons-core/src/components/select/select.scss
+++ b/packages/crayons-core/src/components/select/select.scss
@@ -106,6 +106,7 @@ $disabled-color: $input-disabled-color;
         margin-block-start: 4px;
         display: flex;
         min-width: inherit;
+        --fw-popover-min-width: 0;
       }
     }
 
diff --git a/packages/crayons-core/src/components/select/select.tsx b/packages/crayons-core/src/components/select/select.tsx
index 2b81cb35d..cb754ff62 100644
--- a/packages/crayons-core/src/components/select/select.tsx
+++ b/packages/crayons-core/src/components/select/select.tsx
@@ -57,7 +57,7 @@ export class Select {
       this.setFocus();
       // Select the whole text in case of single select
       this.multiple || this.selectInput?.select?.();
-      if (this.variant !== 'mail') {
+      if (!['search', 'mail'].includes(this.variant)) {
         this.openDropdown();
       }
       this.focusedValues = [];
@@ -153,7 +153,7 @@ export class Select {
   /**
    * The UI variant of the select to be used.
    */
-  @Prop() variant: 'button' | 'standard' | 'mail' = 'standard';
+  @Prop() variant: 'button' | 'standard' | 'mail' | 'search' = 'standard';
   /**
    * Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row.
    * The props for the icon or avatar are passed as an object via the graphicsProps.
@@ -312,7 +312,7 @@ export class Select {
   @Listen('fwLoading')
   onLoading(event) {
     this.isLoading = event.detail.isLoading;
-    if (this.variant === 'mail' && !this.isLoading) {
+    if (['search', 'mail'].includes(this.variant) && !this.isLoading) {
       this.selectInput?.value?.trim() && this.openDropdown();
     }
   }
@@ -323,7 +323,7 @@ export class Select {
       this.selectedOptionsState = selectedItem.detail?.meta?.selectedOptions;
       this.value = selectedItem.detail.value;
       this.renderInput();
-      if (!this.multiple || this.variant === 'mail') {
+      if (!this.multiple || ['search', 'mail'].includes(this.variant)) {
         this.closeDropdown();
       }
       selectedItem.stopImmediatePropagation();
@@ -550,6 +550,8 @@ export class Select {
           } else {
             this.tagArrowKeyCounter = 0;
           }
+          ev.preventDefault();
+          ev.stopPropagation();
           ev.stopImmediatePropagation();
           break;
         case 'ArrowRight':
@@ -559,6 +561,8 @@ export class Select {
             this.tagArrowKeyCounter++;
             this.focusOnTag(this.tagArrowKeyCounter);
           }
+          ev.preventDefault();
+          ev.stopPropagation();
           ev.stopImmediatePropagation();
           break;
       }
@@ -596,7 +600,6 @@ export class Select {
       [...tags][index].scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
-        inline: 'start',
       });
     }
   }
@@ -628,11 +631,11 @@ export class Select {
     if (this.changeEmittable()) {
       this.searchValue = this.selectInput?.value;
       if (this.selectInput?.value) {
-        this.variant !== 'mail' && this.openDropdown();
+        !['search', 'mail'].includes(this.variant) && this.openDropdown();
       } else {
         // Clear selected value in case of single select.
         this.multiple || this.setSelectedValues('');
-        this.variant === 'mail' && this.closeDropdown();
+        ['search', 'mail'].includes(this.variant) && this.closeDropdown();
       }
       this.focusedValues = [];
     }
@@ -645,7 +648,6 @@ export class Select {
       e.currentTarget.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
-        inline: 'start',
       });
       if (!this.selectedOptionsState[index]?.disabled) {
         const focusedIndex = this.focusedValues.indexOf(index);