diff --git a/.changeset/nine-vans-dress.md b/.changeset/nine-vans-dress.md
new file mode 100644
index 00000000..d972507c
--- /dev/null
+++ b/.changeset/nine-vans-dress.md
@@ -0,0 +1,6 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`STextField`): add `prefix` slot to render inline elements before input, and `filled-state` prop to manually activate the filled state on the component when the prefix presents
+
diff --git a/.changeset/real-radios-repair.md b/.changeset/real-radios-repair.md
new file mode 100644
index 00000000..03e45569
--- /dev/null
+++ b/.changeset/real-radios-repair.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`, `SDropdown`): introduce `empty` slot; it is forwarded to the underlying `SSelectDropdown` component
diff --git a/.changeset/sixty-pants-dance.md b/.changeset/sixty-pants-dance.md
new file mode 100644
index 00000000..1ea5be9a
--- /dev/null
+++ b/.changeset/sixty-pants-dance.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`STextField`): specify input font (`sora-tpg-p3`)
diff --git a/.changeset/sweet-baboons-brush.md b/.changeset/sweet-baboons-brush.md
new file mode 100644
index 00000000..e211b316
--- /dev/null
+++ b/.changeset/sweet-baboons-brush.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`, `SDropdown`): add `remote-search` prop that disables default search behaviour
diff --git a/.changeset/wild-timers-act.md b/.changeset/wild-timers-act.md
new file mode 100644
index 00000000..20341b54
--- /dev/null
+++ b/.changeset/wild-timers-act.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SSelect`): add `triggerSearch` prop to enable search input in select input
diff --git a/packages/ui/cypress/component/Select.spec.cy.ts b/packages/ui/cypress/component/Select.spec.cy.ts
index 8dfe47e1..70e2c9c7 100644
--- a/packages/ui/cypress/component/Select.spec.cy.ts
+++ b/packages/ui/cypress/component/Select.spec.cy.ts
@@ -1,5 +1,14 @@
 import { VueTestUtils } from 'cypress/vue'
-import { SSelect, SSelectBase, SSelectButton, SSelectInput, SDropdown, SelectSize, STextField } from '@/lib'
+import {
+  SSelect,
+  SSelectBase,
+  SSelectButton,
+  SSelectInput,
+  SDropdown,
+  SelectSize,
+  STextField,
+  SelectOptionType,
+} from '@/lib'
 
 const SIZES = [SelectSize.Sm, SelectSize.Md, SelectSize.Lg, SelectSize.Xl]
 
@@ -14,6 +23,7 @@ after(() => {
 })
 
 const findBtnLabel = () => cy.get('.s-select-btn__label')
+const testidSelector = (id: string) => `[data-testid=${id}]`
 
 it('Gallery - Dropdown', () => {
   cy.mount({
@@ -407,3 +417,132 @@ it('SSelectDropdown overlaps STextField', () => {
     // trying to click to ensure the element is not covered by anything
     .click()
 })
+;['SSelect', 'SDropdown'].forEach((selectVariantName) => {
+  it(`${selectVariantName} - 'empty' slot works`, () => {
+    cy.mount({
+      setup() {
+        return {
+          options: [],
+          selectVariantName,
+        }
+      },
+      template: `
+        <component :is="selectVariantName" v-bind="{ options }">
+          <template #empty>
+            <div>I'm empty</div>
+          </template>
+        </component>
+      `,
+    })
+
+    cy.get(testidSelector('select-trigger')).click()
+    cy.contains("I'm empty").should('exist')
+  })
+
+  it(`${selectVariantName} - it is possible to set option type`, () => {
+    cy.mount({
+      setup() {
+        return {
+          options: [{ label: 'label', value: 'value' }],
+          selectVariantName,
+          selectOptionTypes: Object.values(SelectOptionType),
+          selectOptionType: ref(),
+        }
+      },
+      template: `
+        <select id="options-type" v-model="selectOptionType">
+          <option v-for="type in selectOptionTypes" :value="type" />
+        </select>
+
+        <component :is="selectVariantName" v-bind="{ options }" model-value="value" :option-type="selectOptionType"/>
+      `,
+    })
+
+    cy.get('select#options-type').select(SelectOptionType.Default)
+    cy.get(testidSelector('select-trigger')).click()
+    cy.get(testidSelector('select-option-checkmark')).should('exist')
+
+    cy.get('select#options-type').select(SelectOptionType.Radio)
+    cy.get(testidSelector('select-trigger')).click()
+    cy.get(testidSelector('select-option-radio')).should('exist')
+
+    cy.get('select#options-type').select(SelectOptionType.Checkbox)
+    cy.get(testidSelector('select-trigger')).click()
+    cy.get(testidSelector('select-option-checkbox')).should('exist')
+  })
+
+  it(`${selectVariantName} - there are dropdown search that allows filter options by labels`, () => {
+    cy.mount({
+      setup() {
+        return {
+          options: [
+            { label: 'label11', value: 'value1' },
+            { label: 'label112', value: 'value2' },
+            { label: 'label133', value: 'value3' },
+            { label: 'label13', value: 'value4' },
+          ],
+          model: ref('value1'),
+          selectVariantName,
+        }
+      },
+      template: `
+        <component :is="selectVariantName" v-bind="{ options }" model-value="value" dropdown-search />
+      `,
+    })
+
+    const SEARCH_QUERY = 'label11'
+    const OPTIONS_WITH_SEARCH_QUERY_IN_LABEL = 2
+
+    cy.get(testidSelector('select-trigger')).click()
+    cy.get(testidSelector('select-dropdown-search')).type(SEARCH_QUERY)
+    cy.get(testidSelector('select-option')).should('have.length', OPTIONS_WITH_SEARCH_QUERY_IN_LABEL)
+  })
+})
+
+it(`SSelect - there are trigger search that allows filter options by labels`, () => {
+  cy.mount({
+    setup() {
+      return {
+        options: [
+          { label: 'label11', value: 'value1' },
+          { label: 'label112', value: 'value2' },
+          { label: 'label133', value: 'value3' },
+          { label: 'label13', value: 'value4' },
+        ],
+        model: ref('value1'),
+      }
+    },
+    template: `
+        <SSelect v-bind="{ options }" trigger-search />
+      `,
+  })
+
+  const SEARCH_QUERY = 'label11'
+  const OPTIONS_WITH_SEARCH_QUERY_IN_LABEL = 2
+
+  cy.get(testidSelector('select-trigger')).click()
+  cy.get(testidSelector('select-trigger')).type(SEARCH_QUERY)
+  cy.get(testidSelector('select-option')).should('have.length', OPTIONS_WITH_SEARCH_QUERY_IN_LABEL)
+})
+
+it(`SSelect - popup is same width as trigger`, () => {
+  cy.mount({
+    setup() {
+      return {
+        options: [{ label: 'label11', value: 'value1' }],
+        model: ref('value1'),
+      }
+    },
+    template: `
+        <SSelect v-bind="{ options }" />
+      `,
+  })
+
+  cy.get(testidSelector('select-trigger')).click()
+
+  cy.get(testidSelector('select-trigger')).then(($el1) => {
+    cy.get(testidSelector('select-dropdown')).should(($el2) => {
+      expect($el2).to.have.css('width', $el1.outerWidth() + 'px')
+    })
+  })
+})
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 54e1f459..77d19f95 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -367,7 +367,7 @@ showCloseBtn: boolean;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SBadge: DefineComponent<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_21<{
+export const SBadge: DefineComponent<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_22<{
 type?: "info" | "warning" | "error" | "active" | "debug" | "pending" | undefined;
 colorBackground?: boolean | undefined;
 withBorder?: boolean | undefined;
@@ -377,7 +377,7 @@ type: string;
 colorBackground: boolean;
 withBorder: boolean;
 onlyMarker: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_21<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_22<{
 type?: "info" | "warning" | "error" | "active" | "debug" | "pending" | undefined;
 colorBackground?: boolean | undefined;
 withBorder?: boolean | undefined;
@@ -475,11 +475,11 @@ export const SCheckboxAtom: FunctionalComponent<Props_8>;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SCheckboxSolo: DefineComponent<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_22<Props_9>, {
+export const SCheckboxSolo: DefineComponent<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_23<Props_9>, {
 modelValue: boolean;
 type: string;
 size: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_19<__VLS_TypePropsToRuntimeProps_22<Props_9>, {
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_23<Props_9>, {
 modelValue: boolean;
 type: string;
 size: string;
@@ -495,11 +495,11 @@ size: "md" | "lg" | "xl";
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SCollapseTransition: DefineComponent<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_23<{
+export const SCollapseTransition: DefineComponent<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_24<{
 duration?: string | undefined;
 }>, {
 duration: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_20<__VLS_TypePropsToRuntimeProps_23<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_24<{
 duration?: string | undefined;
 }>, {
 duration: string;
@@ -512,12 +512,12 @@ duration: string;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SDatePicker: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
+export const SDatePicker: DefineComponent<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_18<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
 shortcuts: () => DatePickerOptions;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_18<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
@@ -546,6 +546,7 @@ inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_10<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -558,6 +559,7 @@ inline?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>>>, {}>;
 
 // @public (undocumented)
@@ -583,6 +585,8 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
     // (undocumented)
     readonly options: UnwrapRef<SelectOption<T>[] | SelectOptionGroup<T>[]>;
     // (undocumented)
+    readonly remoteSearch: boolean;
+    // (undocumented)
     readonly searchQuery: string;
     // (undocumented)
     readonly size: SelectSize;
@@ -770,7 +774,7 @@ close: boolean;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SNavigationMenu: DefineComponent<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_27<{
+export const SNavigationMenu: DefineComponent<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_28<{
 modelValue?: string | undefined;
 collapsed?: boolean | undefined;
 }>, {
@@ -778,7 +782,7 @@ modelValue: string;
 collapsed: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_27<{
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_28<{
 modelValue?: string | undefined;
 collapsed?: boolean | undefined;
 }>, {
@@ -795,9 +799,9 @@ collapsed: boolean;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SNavigationMenuItem: DefineComponent<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_26<{
+export const SNavigationMenuItem: DefineComponent<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_27<{
 value: string;
-}>, {}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_26<{
+}>, {}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_24<__VLS_TypePropsToRuntimeProps_27<{
 value: string;
 }>, {}>>>, {}>;
 
@@ -846,7 +850,7 @@ export const SNotificationsProvider: FunctionalComponent<{
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SPagination: DefineComponent<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_29<{
+export const SPagination: DefineComponent<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_30<{
 total?: number | undefined;
 pageSize?: number | null | undefined;
 currentPage?: number | undefined;
@@ -866,7 +870,7 @@ sizesLabel: string;
 "update:currentPage": (value: number) => void;
 } & {
 "update:pageSize": (value: number) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_29<{
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_30<{
 total?: number | undefined;
 pageSize?: number | null | undefined;
 currentPage?: number | undefined;
@@ -1003,13 +1007,13 @@ innerWrapperAttrs: Record<string, any>;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SProgressBar: DefineComponent<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_18<{
+export const SProgressBar: DefineComponent<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_19<{
 percent?: number | undefined;
 lineHeight?: number | undefined;
 }>, {
 percent: number;
 lineHeight: number;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_15<__VLS_TypePropsToRuntimeProps_18<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_19<{
 percent?: number | undefined;
 lineHeight?: number | undefined;
 }>, {
@@ -1025,11 +1029,11 @@ percent: number;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SRadio: DefineComponent<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_24<Props_10>, {
+export const SRadio: DefineComponent<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_25<Props_10>, {
 disabled: boolean;
 type: string;
 size: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_21<__VLS_TypePropsToRuntimeProps_24<Props_10>, {
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_25<Props_10>, {
 disabled: boolean;
 type: string;
 size: string;
@@ -1049,12 +1053,12 @@ export const SRadioAtom: FunctionalComponent<Props_12>;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SRadioGroup: DefineComponent<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_25<Props_11>, {
+export const SRadioGroup: DefineComponent<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_26<Props_11>, {
 modelValue: null;
 radioSelector: string;
 labelledBy: string;
 describedBy: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_22<__VLS_TypePropsToRuntimeProps_25<Props_11>, {
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_23<__VLS_TypePropsToRuntimeProps_26<Props_11>, {
 modelValue: null;
 radioSelector: string;
 labelledBy: string;
@@ -1081,7 +1085,9 @@ label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
+triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 modelValue?: any;
 options?: SelectOption<any>[] | SelectOptionGroup<any>[] | undefined;
@@ -1092,7 +1098,9 @@ label?: string | undefined;
 size?: SelectSize | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
+triggerSearch?: boolean | undefined;
 dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>>>, {}>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1111,7 +1119,9 @@ syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
-dropdownSearch: boolean;
+triggerSearch?: boolean | undefined;
+dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1123,7 +1133,9 @@ noAutoClose: boolean;
 label: null;
 loading: boolean;
 sameWidthPopper: boolean;
+triggerSearch: boolean;
 dropdownSearch: boolean;
+remoteSearch: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: any) => void;
 } & {
@@ -1140,7 +1152,9 @@ syncMenuAndInputWidths?: boolean | undefined;
 noAutoClose?: boolean | undefined;
 loading?: boolean | undefined;
 sameWidthPopper?: boolean | undefined;
-dropdownSearch: boolean;
+triggerSearch?: boolean | undefined;
+dropdownSearch?: boolean | undefined;
+remoteSearch?: boolean | undefined;
 }>, {
 size: "md";
 options: () => never[];
@@ -1152,7 +1166,9 @@ noAutoClose: boolean;
 label: null;
 loading: boolean;
 sameWidthPopper: boolean;
+triggerSearch: boolean;
 dropdownSearch: boolean;
+remoteSearch: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 onSearch?: ((value: string) => any) | undefined;
@@ -1166,8 +1182,10 @@ options: SelectOption[] | SelectOptionGroup[];
 label: string | null;
 noAutoClose: boolean;
 dropdownSearch: boolean;
+remoteSearch: boolean;
 syncMenuAndInputWidths: boolean;
 sameWidthPopper: boolean;
+triggerSearch: boolean;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
@@ -1191,18 +1209,31 @@ type: SelectButtonType;
 // @public (undocumented)
 export const SSelectChevron: FunctionalComponent<Props_3>;
 
+// Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
+// Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
+//
 // @public (undocumented)
-export const SSelectInput: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {}>>, {}>;
+export const SSelectInput: DefineComponent<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_13<{
+search?: boolean | undefined;
+}>, {
+search: boolean;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_13<{
+search?: boolean | undefined;
+}>, {
+search: boolean;
+}>>>, {
+search: boolean;
+}>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SSelectOption: DefineComponent<__VLS_TypePropsToRuntimeProps_13<{
+export const SSelectOption: DefineComponent<__VLS_TypePropsToRuntimeProps_14<{
 type: SelectOptionType;
 selected?: boolean | undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 toggle: () => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_13<{
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_14<{
 type: SelectOptionType;
 selected?: boolean | undefined;
 }>>> & {
@@ -1214,10 +1245,10 @@ onToggle?: (() => any) | undefined;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SSpinner: DefineComponent<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_14<Props_4>, {
+export const SSpinner: DefineComponent<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_15<Props_4>, {
 size: string;
 width: number;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_11<__VLS_TypePropsToRuntimeProps_14<Props_4>, {
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_15<Props_4>, {
 size: string;
 width: number;
 }>>>, {
@@ -1230,12 +1261,12 @@ width: string | number;
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const SSwitch: DefineComponent<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_15<Props_5>, {
+export const SSwitch: DefineComponent<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_16<Props_5>, {
 label: string;
 disabled: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_12<__VLS_TypePropsToRuntimeProps_15<Props_5>, {
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_16<Props_5>, {
 label: string;
 disabled: boolean;
 }>>> & {
@@ -1249,12 +1280,12 @@ label: string;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const STab: DefineComponent<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_20<{
+export const STab: DefineComponent<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_21<{
 disabled?: boolean | undefined;
 name: string;
 }>, {
 disabled: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_20<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_18<__VLS_TypePropsToRuntimeProps_21<{
 disabled?: boolean | undefined;
 name: string;
 }>, {
@@ -1267,7 +1298,7 @@ disabled: boolean;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const STable: DefineComponent<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_28<{
+export const STable: DefineComponent<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_29<{
 data?: TableRow[] | undefined;
 defaultSort?: {
 prop: string;
@@ -1361,7 +1392,7 @@ select: (payload_0: TableRow[], payload_1: TableRow) => void;
 "change:current": (payload_0: TableRow | null, payload_1: TableRow | null) => void;
 } & {
 "click:row-details": (value: TableRow) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_25<__VLS_TypePropsToRuntimeProps_28<{
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_26<__VLS_TypePropsToRuntimeProps_29<{
 data?: TableRow[] | undefined;
 defaultSort?: {
 prop: string;
@@ -1605,6 +1636,7 @@ type: "default" | "details" | "selection" | "expand";
 width: string;
 minWidth: string;
 label: string;
+className: string;
 sortable: boolean | "custom";
 selectable: TableColumnRowSelectableFunc_2;
 prop: string;
@@ -1615,7 +1647,6 @@ formatter: TableColumnCellValueFormatter_2;
 showOverflowTooltip: boolean;
 align: "left" | "right" | "center";
 headerAlign: "left" | "right" | "center" | null;
-className: string;
 labelClassName: string;
 reserveSelection: boolean;
 }>;
@@ -1624,13 +1655,13 @@ reserveSelection: boolean;
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const STabsPanel: DefineComponent<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_19<{
+export const STabsPanel: DefineComponent<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_20<{
 modelValue: string;
 background?: "primary" | "secondary" | "none" | undefined;
 }>, {
 modelValue: string;
 background: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_16<__VLS_TypePropsToRuntimeProps_19<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_17<__VLS_TypePropsToRuntimeProps_20<{
 modelValue: string;
 background?: "primary" | "secondary" | "none" | undefined;
 }>, {
@@ -1669,30 +1700,36 @@ export type Status = typeof Status[keyof typeof Status];
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const STextField: DefineComponent<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_16<Props_6>, {
+export const STextField: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_6>, {
 multiline: boolean;
 password: boolean;
 disabled: boolean;
 counter: boolean;
 noEye: boolean;
 noModelValueStrictSync: boolean;
+filledState: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_13<__VLS_TypePropsToRuntimeProps_16<Props_6>, {
+} & {
+"click:input-wrapper": (value: MouseEvent) => void;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_6>, {
 multiline: boolean;
 password: boolean;
 disabled: boolean;
 counter: boolean;
 noEye: boolean;
 noModelValueStrictSync: boolean;
+filledState: boolean;
 }>>> & {
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+"onClick:input-wrapper"?: ((value: MouseEvent) => any) | undefined;
 }, {
 disabled: boolean;
 noModelValueStrictSync: boolean;
 password: boolean;
 noEye: boolean;
 counter: string | number | boolean;
+filledState: boolean;
 }>;
 
 // @public (undocumented)
@@ -1765,7 +1802,7 @@ apiKey: ProvideKey | ProvideKey[];
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
 // @public (undocumented)
-export const STooltip: DefineComponent<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_30<{
+export const STooltip: DefineComponent<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_31<{
 wrapperTag?: string | object | undefined;
 content?: string | undefined;
 header?: string | undefined;
@@ -1779,7 +1816,7 @@ header: string;
 placement: string;
 primaryButtonText: string;
 secondaryButtonText: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click:primary-button" | "click:secondary-button")[], "click:primary-button" | "click:secondary-button", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_27<__VLS_TypePropsToRuntimeProps_30<{
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click:primary-button" | "click:secondary-button")[], "click:primary-button" | "click:secondary-button", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_28<__VLS_TypePropsToRuntimeProps_31<{
 wrapperTag?: string | object | undefined;
 content?: string | undefined;
 header?: string | undefined;
diff --git a/packages/ui/src/components/Popover/SPopover.ts b/packages/ui/src/components/Popover/SPopover.ts
index 90839e89..73483c1e 100644
--- a/packages/ui/src/components/Popover/SPopover.ts
+++ b/packages/ui/src/components/Popover/SPopover.ts
@@ -190,6 +190,10 @@ export default /* @__PURE__ */ defineComponent({
     const { hover: popperHover, listeners: popperHoverListeners } = useElHover(popperRef)
     const sharedHover = or(triggerHover, popperHover)
 
+    useResizeObserver(triggerRef, () => {
+      instance.value?.update()
+    })
+
     debouncedWatch(
       () => props.trigger === 'hover' && [sharedHover.value],
       (maybeHover) => {
diff --git a/packages/ui/src/components/Select/SDropdown.vue b/packages/ui/src/components/Select/SDropdown.vue
index 7b67dec2..7fb659a3 100644
--- a/packages/ui/src/components/Select/SDropdown.vue
+++ b/packages/ui/src/components/Select/SDropdown.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   noAutoClose?: boolean
   loading?: boolean
   dropdownSearch?: boolean
+  remoteSearch?: boolean
 }>()
 
 const buttonType = computed(() => (props.inline ? SelectButtonType.Inline : SelectButtonType.Default))
@@ -30,7 +31,10 @@ function isThereLabelSlot() {
 <template>
   <SSelectBase v-bind="{ ...$attrs, ...$props } as any">
     <template #control>
-      <SSelectButton :type="buttonType">
+      <SSelectButton
+        data-testid="select-trigger"
+        :type="buttonType"
+      >
         <template
           v-if="isThereLabelSlot() || label"
           #label="binding"
@@ -45,11 +49,15 @@ function isThereLabelSlot() {
       </SSelectButton>
     </template>
 
-    <template #dropdown>
+    <template #dropdown="{ search }">
       <SSelectDropdown
-        :search="!!dropdownSearch"
+        :search="search"
         :item-type="optionType ?? SelectOptionType.Default"
-      />
+      >
+        <template #empty>
+          <slot name="empty" />
+        </template>
+      </SSelectDropdown>
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelect.vue b/packages/ui/src/components/Select/SSelect.vue
index 6ae97cc2..cc0d8263 100644
--- a/packages/ui/src/components/Select/SSelect.vue
+++ b/packages/ui/src/components/Select/SSelect.vue
@@ -14,7 +14,9 @@ const props = defineProps<{
   size?: SelectSize
   noAutoClose?: boolean
   loading?: boolean
+  triggerSearch?: boolean
   dropdownSearch?: boolean
+  remoteSearch?: boolean
 }>()
 
 const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Checkbox : SelectOptionType.Radio))
@@ -25,8 +27,11 @@ const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Chec
     v-bind="{ ...$attrs, ...$props } as any"
     same-width-popper
   >
-    <template #control>
-      <SSelectInput>
+    <template #control="{ search }">
+      <SSelectInput
+        data-testid="select-trigger"
+        :search="search"
+      >
         <template #label="binding">
           <slot
             name="label"
@@ -38,11 +43,15 @@ const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Chec
       </SSelectInput>
     </template>
 
-    <template #dropdown>
+    <template #dropdown="{ search }">
       <SSelectDropdown
-        :search="!!dropdownSearch"
+        :search="search"
         :item-type="optionType ?? defaultOptionType"
-      />
+      >
+        <template #empty>
+          <slot name="empty" />
+        </template>
+      </SSelectDropdown>
     </template>
   </SSelectBase>
 </template>
diff --git a/packages/ui/src/components/Select/SSelectBase.vue b/packages/ui/src/components/Select/SSelectBase.vue
index da8812d9..af1aad59 100644
--- a/packages/ui/src/components/Select/SSelectBase.vue
+++ b/packages/ui/src/components/Select/SSelectBase.vue
@@ -53,9 +53,19 @@ const props = withDefaults(
     sameWidthPopper?: boolean
 
     /**
-     * Adds search field to dropdown
+     * When enabled, passes `search: true` to the `trigger` slot
      */
-    dropdownSearch: boolean
+    triggerSearch?: boolean
+
+    /**
+     * When enabled, passes `search: true` to the `dropdown` slot
+     */
+    dropdownSearch?: boolean
+
+    /**
+     * By default, the component filters options by their labels. Set `true` to disable automatic filtering.
+     */
+    remoteSearch?: boolean
   }>(),
   {
     size: SelectSize.Md,
@@ -68,7 +78,9 @@ const props = withDefaults(
     label: null,
     loading: false,
     sameWidthPopper: false,
+    triggerSearch: false,
     dropdownSearch: false,
+    remoteSearch: false,
   },
 )
 
@@ -78,12 +90,13 @@ const emit = defineEmits<{
 }>()
 
 const model = useVModel(props, 'modelValue', emit)
-const { multiple, disabled, loading, options, size, label, noAutoClose } = toRefs(props)
+const { multiple, disabled, loading, options, size, label, noAutoClose, remoteSearch } = toRefs(props)
 
 const modeling = useSelectModel({
   model,
   multiple,
   options,
+  storeSelectedOptions: remoteSearch,
   singleModeAutoClose: not(noAutoClose),
   onAutoClose: () => togglePopper(false),
 })
@@ -94,7 +107,7 @@ const [showPopper, togglePopper] = useToggle(false)
 whenever(and(disabled, showPopper), () => togglePopper(false), { immediate: true })
 
 const searchQuery = ref('')
-whenever(not(showPopper), () => {
+whenever(and(not(showPopper), not(remoteSearch)), () => {
   searchQuery.value = ''
 })
 
@@ -116,6 +129,7 @@ const api: SelectApi<any> = reactive({
   size,
   noAutoClose,
   searchQuery,
+  remoteSearch,
   updateSearchQuery,
 })
 
@@ -134,7 +148,10 @@ provide(SELECT_API_KEY, api)
     >
       <template #trigger>
         <div>
-          <slot name="control" />
+          <slot
+            name="control"
+            v-bind="{ 'search': triggerSearch }"
+          />
         </div>
       </template>
 
@@ -145,7 +162,10 @@ provide(SELECT_API_KEY, api)
           :wrapper-attrs="{ 'class': 'z-10' }"
           :inner-wrapper-attrs="{ 'class': { 'w-full': sameWidthPopper } }"
         >
-          <slot name="dropdown" />
+          <slot
+            name="dropdown"
+            v-bind="{ 'search': dropdownSearch }"
+          />
         </SPopoverWrappedTransition>
       </template>
     </SPopover>
diff --git a/packages/ui/src/components/Select/SSelectButton.vue b/packages/ui/src/components/Select/SSelectButton.vue
index 9da1067c..35754b82 100644
--- a/packages/ui/src/components/Select/SSelectButton.vue
+++ b/packages/ui/src/components/Select/SSelectButton.vue
@@ -52,7 +52,7 @@ const slots = useSlots()
       typography(),
       {
         's-select-btn_empty': !api.isSomethingSelected,
-        's-select-btn_disabled': api.disabled || api.loading,
+        's-select-btn_disabled': api.disabled,
       },
     ]"
     @click="toggle"
diff --git a/packages/ui/src/components/Select/SSelectChevron.scss b/packages/ui/src/components/Select/SSelectChevron.scss
index c5986f04..035ce684 100644
--- a/packages/ui/src/components/Select/SSelectChevron.scss
+++ b/packages/ui/src/components/Select/SSelectChevron.scss
@@ -1,5 +1,6 @@
 .s-select-chevron {
   transition: transform 0.15s;
+  fill: currentColor;
   @apply ease-in-out;
 
   &_rotate {
diff --git a/packages/ui/src/components/Select/SSelectChevron.ts b/packages/ui/src/components/Select/SSelectChevron.ts
index eda3b1fc..9ad702ab 100644
--- a/packages/ui/src/components/Select/SSelectChevron.ts
+++ b/packages/ui/src/components/Select/SSelectChevron.ts
@@ -1,22 +1,28 @@
-import { FunctionalComponent, h } from 'vue'
-import IconChevronBottom from '~icons/mdi/chevron-down'
+import { FunctionalComponent, h, PropType } from 'vue'
+import { IconChevronBottom16, IconArrowsChevronBottom24 } from '@/components/icons'
 import './SSelectChevron.scss'
 
 interface Props {
   rotate?: boolean
+  variant?: 16 | 24
 }
 
-const component: FunctionalComponent<Props> = ({ rotate }) =>
-  h(IconChevronBottom, {
+const component: FunctionalComponent<Props> = ({ rotate, variant }) =>
+  h(variant === 24 ? IconArrowsChevronBottom24 : IconChevronBottom16, {
     class: [
       's-select-chevron',
       {
         's-select-chevron_rotate': rotate,
       },
     ],
+    width: '1em',
+    height: '1em',
   })
 
-component.props = { rotate: Boolean }
+component.props = {
+  rotate: Boolean,
+  variant: Number as PropType<16 | 24>,
+}
 component.displayName = 'SSelectChevron'
 
 export default component
diff --git a/packages/ui/src/components/Select/SSelectChip.vue b/packages/ui/src/components/Select/SSelectChip.vue
new file mode 100644
index 00000000..9db9f742
--- /dev/null
+++ b/packages/ui/src/components/Select/SSelectChip.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { IconClose } from '@/components/icons'
+
+withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: '',
+  },
+)
+
+const emit = defineEmits<(event: 'click:delete') => void>()
+</script>
+
+<template>
+  <span class="s-select-chip inline-flex items-center px-6px">
+    <span class="truncate">
+      {{ label }}
+    </span>
+
+    <button
+      class="flex-shrink-0 ml-4px"
+      tabindex="-1"
+      @click.stop="emit('click:delete')"
+    >
+      <IconClose
+        width="16"
+        height="16"
+      />
+    </button>
+  </span>
+</template>
+
+<style lang="scss">
+@use '@/theme';
+
+.s-select-chip {
+  background: theme.token-as-var('sys.color.background');
+}
+</style>
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index ee48cd49..978d0b43 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -7,6 +7,7 @@ import { isSelectOptions } from '@/components/Select/utils'
 import SSpinner from '@/components/Spinner/SSpinner.vue'
 import { IconBasicSearch24 } from '@/components/icons'
 import escapeStringRegexp from 'escape-string-regexp'
+import { MaybeElementRef } from '@vueuse/core'
 
 const props = defineProps<{
   itemType: SelectOptionType
@@ -27,16 +28,17 @@ const optionGroups: ComputedRef<SelectOptionGroup[]> = computed(() => {
   return options
 })
 
-const isSearching = eagerComputed(() => props.search && api.searchQuery)
+const isSearching = eagerComputed(() => api.searchQuery)
 
 const escapedQuery = computed(() => new RegExp(escapeStringRegexp(api.searchQuery), 'i'))
 const shownOptionGroups: ComputedRef<SelectOptionGroup[]> = computed(() => {
-  if (!api.searchQuery) {
+  if (!api.searchQuery || api.remoteSearch) {
     return optionGroups.value
   }
 
   return optionGroups.value.map((x) => ({ ...x, items: x.items.filter((x) => escapedQuery.value.test(x.label)) }))
 })
+const isNothingToShow = eagerComputed(() => shownOptionGroups.value.every((x) => !x.items.length))
 
 function isActionButtonShown(selectAllBtn: boolean) {
   return api.multiple && selectAllBtn
@@ -52,6 +54,16 @@ function handleSearchInput(event: Event) {
   }
 }
 
+const searchInputRef = ref<MaybeElementRef>(null)
+
+function handleMouseDown(event: Event) {
+  if (event.target === searchInputRef.value) {
+    return
+  }
+
+  event.preventDefault()
+}
+
 const HEADER_FONT = {
   [SelectSize.Xl]: 'sora-tpg-ch2',
   [SelectSize.Lg]: 'sora-tpg-ch3',
@@ -78,10 +90,13 @@ const SEARCH_ICON_SIZE = {
   <div
     class="s-select-dropdown"
     :class="`s-select-dropdown_size_${api.size}`"
+    data-testid="select-dropdown"
+    @mousedown="handleMouseDown"
   >
     <div
       v-if="search"
       class="s-select-dropdown__search flex items-center"
+      data-testid="select-dropdown-search"
     >
       <IconBasicSearch24
         class="s-select-dropdown__search-icon flex-shrink-0 mr-8px"
@@ -90,6 +105,7 @@ const SEARCH_ICON_SIZE = {
       />
 
       <input
+        ref="searchInputRef"
         class="s-select-dropdown__search-input flex-grow bg-transparent"
         :class="MAIN_FONT[api.size]"
         :value="api.searchQuery"
@@ -105,6 +121,16 @@ const SEARCH_ICON_SIZE = {
       <SSpinner />
     </div>
 
+    <div
+      v-else-if="isNothingToShow"
+      class="flex items-center justify-center m-16px"
+      :class="MAIN_FONT[api.size]"
+    >
+      <slot name="empty">
+        No data
+      </slot>
+    </div>
+
     <template v-else>
       <template
         v-for="(optionGroup, i) in shownOptionGroups"
@@ -124,6 +150,7 @@ const SEARCH_ICON_SIZE = {
             v-if="isActionButtonShown(!!optionGroup.selectAllBtn)"
             class="s-select-dropdown__action cursor-pointer ml-auto"
             :class="MAIN_FONT[api.size]"
+            tabindex="-1"
             @click="api.toggleGroupSelection(optionGroup)"
           >
             {{ api.isGroupSelected(optionGroup) ? 'Deselect all' : 'Select all' }}
diff --git a/packages/ui/src/components/Select/SSelectInput.vue b/packages/ui/src/components/Select/SSelectInput.vue
index d78a4097..55807cc7 100644
--- a/packages/ui/src/components/Select/SSelectInput.vue
+++ b/packages/ui/src/components/Select/SSelectInput.vue
@@ -2,12 +2,32 @@
 import { useSelectApi } from './api'
 import { SelectSize } from './types'
 import SSelectChevron from './SSelectChevron'
+import SSelectChip from './SSelectChip.vue'
+import STextField from '@/components/TextField/STextField.vue'
+import { IconBasicSearch24 } from '@/components/icons'
+import { MaybeElementRef } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    search?: boolean
+  }>(),
+  {
+    search: false,
+  },
+)
 
 const slots = useSlots()
 const api = useSelectApi()
 
 const selectionsJoined = computed<string>(() => api.selectedOptions.map((x) => x.label).join(', '))
 
+const SEARCH_ICON_SIZE = {
+  [SelectSize.Xl]: 24,
+  [SelectSize.Lg]: 20,
+  [SelectSize.Md]: 18,
+  [SelectSize.Sm]: 15,
+} as const
+
 /**
  * Column layout - when label is on top of the selection.
  * Non-column: `<label>: <selection>`
@@ -16,6 +36,8 @@ const isColumnLayout = computed<boolean>(() => {
   return api.size === SelectSize.Xl
 })
 
+const shouldUseChips = computed(() => api.multiple && props.search)
+
 function typographyLabel(): string {
   return !api.isSomethingSelected && api.size === SelectSize.Xl ? 'sora-tpg-p3' : 'sora-tpg-p4'
 }
@@ -24,6 +46,57 @@ function typographySelection(): string {
   return api.size === SelectSize.Xl ? 'sora-tpg-p3' : 'sora-tpg-p4'
 }
 
+const inputRef = ref<MaybeElementRef>(null)
+const isFocused = ref(false)
+const shouldShowLabel = computed(
+  () => !(props.search && (api.searchQuery || api.isSomethingSelected || isFocused.value)),
+)
+
+function focusInput() {
+  if (!(inputRef.value instanceof HTMLInputElement)) {
+    return
+  }
+
+  inputRef.value.focus()
+  isFocused.value = true
+}
+
+function handleInputBlur() {
+  api.menuToggle(false)
+  isFocused.value = false
+}
+
+function handleInputClick(event: MouseEvent) {
+  if (!props.search) {
+    api.menuToggle()
+
+    return
+  }
+
+  if (event.target !== document.activeElement) {
+    event.preventDefault()
+  }
+
+  focusInput()
+  api.menuToggle(true)
+}
+
+function handleMouseDown(event: MouseEvent) {
+  if (event.target === inputRef.value) {
+    return
+  }
+
+  event.preventDefault()
+}
+
+function handleInput(event: Event) {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return
+  }
+
+  api.updateSearchQuery(event.target.value)
+}
+
 const FLabel = () => {
   const label = slots.label?.(api) ?? api.label
   return h(
@@ -48,16 +121,63 @@ const FSelection = () =>
 </script>
 
 <template>
+  <STextField
+    v-if="search && isColumnLayout"
+    :model-value="api.searchQuery"
+    :label="api.label || ''"
+    :filled-state="api.isSomethingSelected"
+    :disabled="api.disabled"
+    @update:model-value="api.updateSearchQuery"
+    @click:input-wrapper="api.menuToggle(true)"
+    @blur="api.menuToggle(false)"
+  >
+    <template #label>
+      <slot
+        name="label"
+        v-bind="api"
+      />
+    </template>
+
+    <template #prefix>
+      <template v-if="shouldUseChips">
+        <SSelectChip
+          v-for="option in api.selectedOptions"
+          :key="option.label"
+          :label="option.label"
+          class="min-w-0 mr-8px mt-4px"
+          :class="typographySelection()"
+          @click:delete="api.unselect(option.value)"
+          @mousedown.prevent.stop
+        />
+      </template>
+      <FSelection
+        v-else
+        class="mr-8px"
+      />
+    </template>
+
+    <template #append>
+      <SSelectChevron
+        :rotate="api.isMenuOpened"
+        :variant="24"
+        width="24"
+        height="24"
+      />
+    </template>
+  </STextField>
+
   <div
+    v-else
     :class="[
       's-select-input',
       `s-select-input_size_${api.size}`,
       {
         's-select-input_empty': !api.isSomethingSelected,
-        's-select-input_disabled': api.disabled || api.loading,
+        's-select-input_disabled': api.disabled,
       },
     ]"
-    @click="api.menuToggle()"
+    @click="handleInputClick"
+    @mousedown="handleMouseDown"
   >
     <template v-if="isColumnLayout">
       <div class="flex flex-col flex-1 truncate">
@@ -67,13 +187,57 @@ const FSelection = () =>
     </template>
 
     <template v-else>
-      <div class="flex items-center flex-1 truncate">
-        <FLabel /> <FSelection />
+      <div
+        class="flex items-center flex-1 truncate"
+        :class="{
+          'flex-wrap': shouldUseChips,
+          '-mt-4px': shouldUseChips,
+        }"
+      >
+        <IconBasicSearch24
+          v-if="search && !shouldUseChips"
+          class="s-select-input__search-icon flex-shrink-0 mr-8px"
+          :width="SEARCH_ICON_SIZE[api.size]"
+          :height="SEARCH_ICON_SIZE[api.size]"
+        />
+        <FLabel
+          v-if="shouldShowLabel"
+          :class="{ 'mt-4px': shouldUseChips }"
+        />
+
+        <template v-if="shouldUseChips">
+          <SSelectChip
+            v-for="option in api.selectedOptions"
+            :key="option.label"
+            class="min-w-0 mr-8px mt-4px"
+            :class="typographySelection()"
+            :label="option.label"
+            @click:delete="api.unselect(option.value)"
+            @mousedown.prevent.stop
+          />
+        </template>
+        <FSelection
+          v-else
+          class="min-w-0 flex-grow-1 ml-4px mr-4px"
+        />
+
+        <input
+          v-if="search"
+          ref="inputRef"
+          :value="api.searchQuery"
+          class="min-w-1/4 bg-transparent outline-none flex-grow basis-0"
+          :class="[{ 'mt-4px': shouldUseChips }, typographySelection()]"
+          @input="handleInput"
+          @blur="handleInputBlur"
+        >
       </div>
     </template>
 
     <div>
-      <SSelectChevron :rotate="api.isMenuOpened" />
+      <SSelectChevron
+        :rotate="api.isMenuOpened"
+        :variant="24"
+      />
     </div>
   </div>
 </template>
@@ -90,6 +254,7 @@ const FSelection = () =>
 
   background: theme.token-as-var('sys.color.background');
   color: theme.token-as-var('sys.color.content-primary');
+  border: 1px solid transparent;
 
   &_disabled {
     @apply pointer-events-none opacity-75;
@@ -99,8 +264,15 @@ const FSelection = () =>
     background: theme.token-as-var('sys.color.background-hover');
   }
 
-  &__label {
+  &:focus-within {
+    background: transparent;
+    border: 1px solid theme.token-as-var('sys.color.border-primary');
+  }
+
+  &__label,
+  &__search-icon {
     color: theme.token-as-var('sys.color.content-tertiary');
+    fill: currentColor;
   }
 
   &_size {
@@ -129,6 +301,17 @@ const FSelection = () =>
     @include x-paddings('md', 12px);
     @include x-paddings('lg', 12px);
     @include x-paddings('xl', 16px);
+
+    @mixin y-paddings($size, $pt, $pb) {
+      &_#{$size} {
+        @apply pt-#{$pt} pb-#{$pb};
+      }
+    }
+
+    @include y-paddings('sm', 0, 0);
+    @include y-paddings('md', 4px, 4px);
+    @include y-paddings('lg', 8px, 8px);
+    @include y-paddings('xl', 10px, 6px);
   }
 
   // magic spacing fix
diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index 33bcde80..9d87dced 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -38,28 +38,35 @@ const CHECK_ICON_SIZE = {
         's-select-option_selected': selected,
       },
     ]"
+    data-testid="select-option"
     @click="emit('toggle')"
   >
     <template v-if="type === SelectOptionType.Checkbox">
       <SCheckboxAtom
+        class="flex-shrink-0"
+        data-testid="select-option-checkbox"
         :checked="selected"
         :size="RADIO_CHECKBOX_SIZE[api.size]"
       />
     </template>
     <template v-if="type === SelectOptionType.Radio">
       <SRadioAtom
+        class="flex-shrink-0"
+        data-testid="select-option-radio"
         :checked="selected"
         :size="RADIO_CHECKBOX_SIZE[api.size]"
       />
     </template>
 
-    <div class="s-select-option__content">
+    <div class="s-select-option__content truncate">
       <slot />
     </div>
 
     <template v-if="type === SelectOptionType.Default">
       <IconCheckMark
         v-if="selected"
+        class="flex-shrink-0"
+        data-testid="select-option-checkmark"
         :width="CHECK_ICON_SIZE[api.size]"
         :height="CHECK_ICON_SIZE[api.size]"
       />
diff --git a/packages/ui/src/components/Select/api.ts b/packages/ui/src/components/Select/api.ts
index 9321fbde..47fd2956 100644
--- a/packages/ui/src/components/Select/api.ts
+++ b/packages/ui/src/components/Select/api.ts
@@ -12,6 +12,7 @@ export interface SelectApi<T> extends UnwrapRef<UseSelectModelReturn<T>> {
   readonly size: SelectSize
   readonly noAutoClose: boolean
   readonly searchQuery: string
+  readonly remoteSearch: boolean
 
   readonly isMenuOpened: boolean
   /**
diff --git a/packages/ui/src/components/Select/sizes-mixin.scss b/packages/ui/src/components/Select/sizes-mixin.scss
index adb08e3b..253a2e16 100644
--- a/packages/ui/src/components/Select/sizes-mixin.scss
+++ b/packages/ui/src/components/Select/sizes-mixin.scss
@@ -1,17 +1,17 @@
 @mixin s-select-sizes {
   &_sm {
-    height: 24px;
+    min-height: 24px;
   }
 
   &_md {
-    height: 32px;
+    min-height: 32px;
   }
 
   &_lg {
-    height: 40px;
+    min-height: 40px;
   }
 
   &_xl {
-    height: 56px;
+    min-height: 56px;
   }
 }
diff --git a/packages/ui/src/components/Select/use-model.spec.ts b/packages/ui/src/components/Select/use-model.spec.ts
index a8b0c290..3dde3705 100644
--- a/packages/ui/src/components/Select/use-model.spec.ts
+++ b/packages/ui/src/components/Select/use-model.spec.ts
@@ -9,10 +9,14 @@ const OPTIONS = [
 ]
 
 describe('Auto-closing', () => {
-  function useFactory(props: Except<UseSelectModelParams<any>, 'options' | 'multiple'>, mode: 'single' | 'multi') {
+  function useFactory(
+    props: Except<UseSelectModelParams<any>, 'options' | 'multiple' | 'storeSelectedOptions'>,
+    mode: 'single' | 'multi',
+  ) {
     return useSelectModel({
       options: ref(OPTIONS),
       multiple: ref(mode === 'multi' ? true : false),
+      storeSelectedOptions: ref(false),
       ...props,
     })
   }
@@ -85,3 +89,25 @@ describe('Auto-closing', () => {
     expect(onAutoClose).not.toBeCalled()
   })
 })
+
+describe('Storing options', () => {
+  test('when selected option is removed from options list, it is selected anyway', () => {
+    const changingOptions = ref(OPTIONS)
+    const modeling = useSelectModel({
+      model: ref(null),
+      options: changingOptions,
+      multiple: ref(true),
+      storeSelectedOptions: ref(true),
+      singleModeAutoClose: ref(true),
+      onAutoClose: () => {},
+    })
+
+    modeling.select('thin')
+    modeling.select('regular')
+    modeling.select('deep')
+
+    changingOptions.value = [OPTIONS[1], OPTIONS[2]]
+
+    expect(modeling.selectedOptions.value).toHaveLength(3)
+  })
+})
diff --git a/packages/ui/src/components/Select/use-model.ts b/packages/ui/src/components/Select/use-model.ts
index 0b5064af..07f9339c 100644
--- a/packages/ui/src/components/Select/use-model.ts
+++ b/packages/ui/src/components/Select/use-model.ts
@@ -31,7 +31,12 @@ export interface UseSelectModelParams<T> {
   multiple: Ref<boolean>
   model: Ref<null | T | T[]>
   options: Ref<SelectOption<T>[] | SelectOptionGroup<T>[]>
-
+  /**
+   * Enables options remembering for async search in multiple select when, for example,
+   * the options are changed on search query changes. If there are no options for selected values,
+   * then options without labels are created (e.g. for cases when model is changed externally)
+   */
+  storeSelectedOptions: Ref<boolean>
   singleModeAutoClose: Ref<boolean>
   /**
    * Should be used to actually perform menu closing
@@ -45,6 +50,7 @@ export function useSelectModel<T = any>({
   options,
   singleModeAutoClose,
   onAutoClose,
+  storeSelectedOptions,
 }: UseSelectModelParams<T>): UseSelectModelReturn<T> {
   const triggerAutoClose = () => singleModeAutoClose.value && onAutoClose()
 
@@ -59,6 +65,60 @@ export function useSelectModel<T = any>({
     return new Set(modelAsArray.value)
   })
 
+  const optionItems = computed(() => {
+    if (isSelectOptions(options.value)) {
+      return options.value
+    }
+
+    return options.value.flatMap((x) => x.items)
+  })
+
+  const storedOptions = shallowReactive(new Map<T, SelectOption<T>>())
+
+  let modelChangedManually = false
+  watch(
+    modelAsArray,
+    () => {
+      if (modelChangedManually) {
+        modelChangedManually = false
+
+        return
+      }
+
+      if (!storeSelectedOptions.value) {
+        return
+      }
+
+      storedOptions.forEach((_, value) => {
+        if (!modelAsArray.value.includes(value)) {
+          storedOptions.delete(value)
+        }
+      })
+      modelAsArray.value.forEach(rememberOption)
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  function rememberOption(value: T) {
+    if (storedOptions.has(value)) {
+      return
+    }
+
+    const option = optionItems.value.find((x) => x.value === value)
+
+    if (option) {
+      storedOptions.set(option.value, option)
+
+      return
+    }
+
+    storedOptions.set(value, { label: '', value })
+  }
+
+  function forgetOption(value: T) {
+    storedOptions.delete(value)
+  }
+
   function isValueSelected(value: T): boolean {
     return selectedSet.value.has(value)
   }
@@ -69,18 +129,49 @@ export function useSelectModel<T = any>({
 
   function select(value: T): void {
     if (multiple.value) {
+      modelChangedManually = true
       model.value = [...new Set([...modelAsArray.value, value])]
+
+      if (storeSelectedOptions.value) {
+        rememberOption(value)
+      }
     } else {
+      modelChangedManually = true
+
+      if (storeSelectedOptions.value) {
+        let oldValue = Array.isArray(model.value) ? model.value[0] : model.value
+
+        if (oldValue) {
+          forgetOption(oldValue)
+        }
+      }
+
       model.value = value
+
+      if (storeSelectedOptions.value) {
+        rememberOption(value)
+      }
+
       triggerAutoClose()
     }
   }
 
   function unselect(value: T) {
     if (multiple.value) {
+      modelChangedManually = true
       model.value = modelAsArray.value.filter((x) => x !== value)
+
+      if (storeSelectedOptions.value) {
+        forgetOption(value)
+      }
     } else {
+      modelChangedManually = true
       model.value = null
+
+      if (storeSelectedOptions.value) {
+        forgetOption(value)
+      }
+
       triggerAutoClose()
     }
   }
@@ -90,26 +181,38 @@ export function useSelectModel<T = any>({
   }
 
   function toggleGroupSelection(optionGroup: SelectOptionGroup<T>): void {
+    const optionGroupValues = optionGroup.items.map((x) => x.value)
+
     if (isGroupSelected(optionGroup)) {
-      const optionGroupSet = new Set(optionGroup.items.map((x) => x.value))
-      model.value = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
+      const optionGroupSet = new Set(optionGroupValues)
+      const newModel = modelAsArray.value.filter((x) => !optionGroupSet.has(x))
+      modelChangedManually = true
+      model.value = newModel
+
+      if (storeSelectedOptions.value) {
+        newModel.forEach(forgetOption)
+      }
 
       return
     }
 
-    model.value = [...new Set([...modelAsArray.value, ...optionGroup.items.map((x) => x.value)])]
+    const newModel = [...new Set([...modelAsArray.value, ...optionGroupValues])]
+    modelChangedManually = true
+    model.value = newModel
+
+    if (storeSelectedOptions.value) {
+      newModel.forEach(rememberOption)
+    }
   }
 
-  const optionItems = computed(() => {
-    if (isSelectOptions(options.value)) {
-      return options.value
+  const selectedOptions = computed<SelectOption<T>[]>(() => {
+    if (storeSelectedOptions.value) {
+      return [...storedOptions.values()]
     }
 
-    return options.value.flatMap((x) => x.items)
+    return optionItems.value.filter((x) => isValueSelected(x.value))
   })
 
-  const selectedOptions = computed<SelectOption[]>(() => optionItems.value.filter((x) => isValueSelected(x.value)))
-
   const isSomethingSelected = computed<boolean>(() => !!selectedSet.value.size)
 
   const isModelAnArray = computed<boolean>(() => Array.isArray(model.value))
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index a9d3f8fe..92800548 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -8,6 +8,7 @@ export default {
 import { StyleValue } from 'vue'
 import { Status } from '@/types'
 import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons'
+import { MaybeElementRef } from '@vueuse/core'
 
 /**
  * warning: don't use it inside of `Props`. Vue compiler determines it
@@ -104,6 +105,10 @@ interface Props {
    * Also you can use `message` slot.
    */
   message?: string
+  /**
+   * Manually activates filled state
+   */
+  filledState?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -113,9 +118,13 @@ const props = withDefaults(defineProps<Props>(), {
   counter: false,
   noEye: false,
   noModelValueStrictSync: false,
+  filledState: false,
 })
 
-const emit = defineEmits<(event: 'update:modelValue', value: string) => void>()
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+  (event: 'click:input-wrapper', value: MouseEvent): void
+}>()
 
 const slots = useSlots()
 
@@ -141,7 +150,30 @@ function onInput(e: Event) {
 
 const isValueEmpty = computed(() => !model.value)
 const isFocused = ref(false)
-const labelTypographyClass = computed(() => (!isFocused.value && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4'))
+const labelTypographyClass = computed(() =>
+  !(props.filledState || isFocused.value) && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4',
+)
+
+const inputRef = ref<MaybeElementRef>(null)
+
+function handleInputWrapperClick(event: MouseEvent) {
+  if (event.target !== document.activeElement) {
+    event.preventDefault()
+  }
+
+  if (inputRef.value instanceof HTMLInputElement && !isFocused.value) {
+    inputRef.value.focus()
+    isFocused.value = true
+  }
+
+  emit('click:input-wrapper', event)
+}
+
+function handleInputWrapperMouseDown(event: MouseEvent) {
+  if (event.target === inputRef.value) return
+
+  event.preventDefault()
+}
 
 // MESSAGE
 
@@ -211,7 +243,8 @@ const inputType = computed(() =>
     :class="[
       's-text-field',
       {
-        's-text-field_empty': isValueEmpty,
+        's-text-field_empty': isValueEmpty && !filledState,
+        's-text-field_filled-state': filledState,
         's-text-field_disabled': disabled,
       },
       rootClass(),
@@ -219,7 +252,13 @@ const inputType = computed(() =>
     :style="rootStyle()"
     :data-status="status"
   >
-    <div class="s-text-field__input-wrapper">
+    <!-- key events works with input element -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+    <div
+      class="s-text-field__input-wrapper"
+      @click="handleInputWrapperClick"
+      @mousedown="handleInputWrapperMouseDown"
+    >
       <label
         :for="id"
         :class="labelTypographyClass"
@@ -227,16 +266,22 @@ const inputType = computed(() =>
         <slot name="label">{{ label }}</slot>
       </label>
 
-      <input
-        :id="id"
-        :value="model"
-        :type="inputType"
-        :disabled="disabled"
-        v-bind="inputAttrs()"
-        @input="onInput"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
-      >
+      <div class="s-text-field__input-line">
+        <slot name="prefix" />
+
+        <input
+          :id="id"
+          ref="inputRef"
+          class="sora-tpg-p3"
+          :value="model"
+          :type="inputType"
+          :disabled="disabled"
+          v-bind="inputAttrs()"
+          @input="onInput"
+          @focus="isFocused = true"
+          @blur="isFocused = false"
+        >
+      </div>
 
       <div
         v-if="shouldRenderAppend()"
@@ -258,7 +303,7 @@ const inputType = computed(() =>
           class="s-text-field__eye"
           data-testid="eye"
           type="button"
-          @click="toggleForceReveal()"
+          @click.stop="toggleForceReveal()"
         >
           <IconEye v-if="!forceRevealPassword" />
           <IconEyeOff v-else />
@@ -309,6 +354,7 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
   }
 
   &:not(&_empty),
+  &_filled-state,
   &:focus-within {
     label {
       transform: translateY(#{$label-top-secondary});
@@ -322,7 +368,7 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
     @apply relative flex;
     @apply transition-all;
 
-    height: $height;
+    min-height: $height;
 
     &:hover:not(:focus-within) {
       background: $theme-bg-hover;
@@ -342,10 +388,14 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
       // primary state by default
       transform: translateY(#{$label-top-primary});
     }
+  }
+
+  &__input-line {
+    @apply flex flex-wrap flex-grow min-w-0;
+    padding: $input-padding;
 
     input {
-      @apply h-full flex-1 w-full min-w-0;
-      padding: $input-padding;
+      @apply flex-1 w-full min-w-1/4;
 
       background: transparent;
       &:focus {
@@ -355,7 +405,7 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
   }
 
   &__append {
-    @apply h-full flex items-center space-x-4 pr-4;
+    @apply flex items-center space-x-4 pr-4;
   }
 
   &__counter {
diff --git a/packages/ui/stories/SSelect.stories.ts b/packages/ui/stories/SSelect.stories.ts
index 777cd384..3ab3e502 100644
--- a/packages/ui/stories/SSelect.stories.ts
+++ b/packages/ui/stories/SSelect.stories.ts
@@ -51,6 +51,10 @@ const OPTIONS: SelectOption[] = [
     label: 'England',
     value: 'en',
   },
+  {
+    label: 'United Arab Emirates',
+    value: 'ae',
+  },
   {
     label: 'Iceland',
     value: 'is',
@@ -73,6 +77,10 @@ const OPTION_GROUPS: SelectOptionGroup[] = [
         label: 'England',
         value: 'en',
       },
+      {
+        label: 'United Arab Emirates',
+        value: 'ae',
+      },
     ],
   },
   {
@@ -202,25 +210,108 @@ export const Dropdown = defineStory((args) => ({
 Dropdown.argTypes = commonArgTypes
 Dropdown.args = commonArgs
 
+const modelSingle = ref()
+const modelSingleRemote = ref()
+const modelMultiple = ref()
+const modelMultipleRemote = ref()
+const modelDropdown = ref()
+const modelDropdownDropdown = ref()
+
 export const WithSearch = defineStory((args) => ({
   components: { SSelect, SDropdown },
   setup() {
+    const asyncOptions = shallowRef([...OPTIONS])
+    const isLoadingAsyncOptions = ref(false)
+
+    async function handleSearch(value: string) {
+      isLoadingAsyncOptions.value = true
+      asyncOptions.value = await new Promise((resolve) => {
+        setTimeout(() => resolve(OPTIONS.filter((x) => new RegExp(value, 'i').test(x.label))), 1000)
+      })
+      isLoadingAsyncOptions.value = false
+    }
+
     return {
       OPTION_GROUPS,
-      model: ref(['en', 'jp']),
+      asyncOptions,
+      isLoadingAsyncOptions,
+      modelSingle,
+      modelSingleRemote,
+      modelMultiple,
+      modelMultipleRemote,
+      modelDropdown,
+      modelDropdownDropdown,
+      handleSearch,
       args,
     }
   },
   template: `
     <SSelect
-      v-model="model"
-      label="Multi select"
+      v-model="modelSingle"
+      label="Search"
+      :options="OPTION_GROUPS"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+      trigger-search
+    />
+    <SSelect
+      v-model="modelSingleRemote"
+      label="Remote search"
+      :options="asyncOptions"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="isLoadingAsyncOptions"
+      :option-type="args.optionType"
+      trigger-search
+      remote-search
+      @search="handleSearch"
+    />
+    <SSelect
+      v-model="modelMultiple"
+      label="Search - multiple"
       :options="OPTION_GROUPS"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
       multiple
+      trigger-search
+    />
+    <SSelect
+      v-model="modelMultipleRemote"
+      label="Remote search - multiple"
+      :options="asyncOptions"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="isLoadingAsyncOptions"
+      :option-type="args.optionType"
+      multiple
+      trigger-search
+      remote-search
+      @search="handleSearch"
+    />
+    <SSelect
+      v-model="modelDropdown"
+      label="Menu search"
+      :options="OPTION_GROUPS"
       :size="args.size"
       :disabled="args.disabled"
       :loading="args.loading"
       :option-type="args.optionType"
+      multiple
+      dropdown-search
+    />
+    <SDropdown
+      v-model="modelDropdownDropdown"
+      label="Menu search"
+      :options="OPTION_GROUPS"
+      :size="args.size"
+      :disabled="args.disabled"
+      :loading="args.loading"
+      :option-type="args.optionType"
+      multiple
       dropdown-search
     />
   `,