diff --git a/superset-frontend/src/components/Select/AntdSelect.stories.tsx b/superset-frontend/src/components/Select/AntdSelect.stories.tsx
new file mode 100644
index 00000000000..e26588ad996
--- /dev/null
+++ b/superset-frontend/src/components/Select/AntdSelect.stories.tsx
@@ -0,0 +1,244 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import Select, { OptionsType, SelectProps } from './AntdSelect';
+
+export default {
+  title: 'Select',
+  component: Select,
+};
+
+const options = [
+  {
+    label: 'Such an incredibly awesome long long label',
+    value: 'Such an incredibly awesome long long label',
+  },
+  {
+    label: 'Another incredibly awesome long long label',
+    value: 'Another incredibly awesome long long label',
+  },
+  { label: 'Just a label', value: 'Just a label' },
+  { label: 'A', value: 'A' },
+  { label: 'B', value: 'B' },
+  { label: 'C', value: 'C' },
+  { label: 'D', value: 'D' },
+  { label: 'E', value: 'E' },
+  { label: 'F', value: 'F' },
+  { label: 'G', value: 'G' },
+  { label: 'H', value: 'H' },
+  { label: 'I', value: 'I' },
+];
+
+const selectPositions = [
+  {
+    id: 'topLeft',
+    style: { top: '0', left: '0' },
+  },
+  {
+    id: 'topRight',
+    style: { top: '0', right: '0' },
+  },
+  {
+    id: 'bottomLeft',
+    style: { bottom: '0', left: '0' },
+  },
+  {
+    id: 'bottomRight',
+    style: { bottom: '0', right: '0' },
+  },
+];
+
+export const AtEveryCorner = () => (
+  <>
+    {selectPositions.map(position => (
+      <div
+        key={position.id}
+        style={{
+          ...position.style,
+          width: '120px',
+          position: 'absolute',
+        }}
+      >
+        <Select ariaLabel={`gallery-${position.id}`} options={options} />
+      </div>
+    ))}
+  </>
+);
+
+AtEveryCorner.story = {
+  parameters: {
+    actions: {
+      disable: true,
+    },
+    controls: {
+      disable: true,
+    },
+    knobs: {
+      disable: true,
+    },
+  },
+};
+
+async function fetchUserList(search: string, page = 0): Promise<OptionsType> {
+  const username = search.trim().toLowerCase();
+  return new Promise(resolve => {
+    const users = [
+      'John',
+      'Liam',
+      'Olivia',
+      'Emma',
+      'Noah',
+      'Ava',
+      'Oliver',
+      'Elijah',
+      'Charlotte',
+      'Diego',
+      'Evan',
+      'Michael',
+      'Giovanni',
+      'Luca',
+      'Paolo',
+      'Francesca',
+      'Chiara',
+      'Sara',
+      'Valentina',
+      'Jessica',
+      'Angelica',
+      'Mario',
+      'Marco',
+      'Andrea',
+      'Luigi',
+      'Quarto',
+      'Quinto',
+      'Sesto',
+      'Franco',
+      'Sandro',
+      'Alehandro',
+      'Johnny',
+      'Nikole',
+      'Igor',
+      'Sipatha',
+      'Thami',
+      'Munei',
+      'Guilherme',
+      'Umair',
+      'Ashfaq',
+      'Amna',
+      'Irfan',
+      'George',
+      'Naseer',
+      'Mohammad',
+      'Rick',
+      'Saliya',
+      'Claire',
+      'Benedetta',
+      'Ilenia',
+    ];
+
+    let results: { label: string; value: string }[] = [];
+
+    if (!username) {
+      results = users.map(u => ({
+        label: u,
+        value: u,
+      }));
+    } else {
+      const foundUsers = users.find(u => u.toLowerCase().includes(username));
+      if (foundUsers && Array.isArray(foundUsers)) {
+        results = foundUsers.map(u => ({ label: u, value: u }));
+      }
+      if (foundUsers && typeof foundUsers === 'string') {
+        const u = foundUsers;
+        results = [{ label: u, value: u }];
+      }
+    }
+    const offset = !page ? 0 : page * 10;
+    const resultsNum = !page ? 10 : (page + 1) * 10;
+    results = results.length ? results.splice(offset, resultsNum) : [];
+
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Emulating network request for search string: ${
+        username || '"empty"'
+      } and page: ${page} with results: [${results
+        .map(u => u.value)
+        .join(', ')}]`,
+    );
+
+    setTimeout(() => {
+      resolve(results);
+    }, 500);
+  });
+}
+
+async function fetchUserListError(): Promise<OptionsType> {
+  return new Promise((_, reject) => {
+    // eslint-disable-next-line prefer-promise-reject-errors
+    reject('This is an error');
+  });
+}
+
+export const AsyncSelect = (args: SelectProps & { withError: boolean }) => (
+  <Select
+    {...args}
+    options={args.withError ? fetchUserListError : fetchUserList}
+  />
+);
+
+AsyncSelect.args = {
+  withError: false,
+  allowNewOptions: false,
+  paginatedFetch: false,
+};
+
+AsyncSelect.argTypes = {
+  mode: {
+    control: { type: 'select', options: ['single', 'multiple', 'tags'] },
+  },
+};
+
+AsyncSelect.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
+
+export const InteractiveSelect = (args: SelectProps) => <Select {...args} />;
+
+InteractiveSelect.args = {
+  allowNewOptions: false,
+  options,
+  showSearch: false,
+};
+
+InteractiveSelect.argTypes = {
+  mode: {
+    control: { type: 'select', options: ['single', 'multiple', 'tags'] },
+  },
+};
+
+InteractiveSelect.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
diff --git a/superset-frontend/src/components/Select/AntdSelect.tsx b/superset-frontend/src/components/Select/AntdSelect.tsx
new file mode 100644
index 00000000000..da8fe1aecf4
--- /dev/null
+++ b/superset-frontend/src/components/Select/AntdSelect.tsx
@@ -0,0 +1,355 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, {
+  ReactElement,
+  ReactNode,
+  RefObject,
+  UIEvent,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from 'react';
+import { styled, t } from '@superset-ui/core';
+import { Select as AntdSelect } from 'antd';
+import Icons from 'src/components/Icons';
+import {
+  SelectProps as AntdSelectProps,
+  SelectValue as AntdSelectValue,
+  LabeledValue as AntdLabeledValue,
+} from 'antd/lib/select';
+import debounce from 'lodash/debounce';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { hasOption } from './utils';
+
+type AntdSelectAllProps = AntdSelectProps<AntdSelectValue>;
+type PickedSelectProps = Pick<
+  AntdSelectAllProps,
+  | 'allowClear'
+  | 'autoFocus'
+  | 'value'
+  | 'defaultValue'
+  | 'disabled'
+  | 'filterOption'
+  | 'loading'
+  | 'mode'
+  | 'notFoundContent'
+  | 'onChange'
+  | 'placeholder'
+  | 'showSearch'
+  | 'value'
+>;
+export type OptionsType = Exclude<AntdSelectAllProps['options'], undefined>;
+export type OptionsPromise = (
+  search: string,
+  page?: number,
+) => Promise<OptionsType>;
+export enum ESelectTypes {
+  MULTIPLE = 'multiple',
+  TAGS = 'tags',
+  SINGLE = '',
+}
+export interface SelectProps extends PickedSelectProps {
+  allowNewOptions?: boolean;
+  ariaLabel: string;
+  header?: ReactNode;
+  name?: string; // discourage usage
+  notFoundContent?: ReactNode;
+  options: OptionsType | OptionsPromise;
+  paginatedFetch?: boolean;
+}
+
+// unexposed default behaviors
+const MAX_TAG_COUNT = 4;
+const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
+const DEBOUNCE_TIMEOUT = 800;
+
+const Error = ({ error }: { error: string }) => {
+  const StyledError = styled.div`
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    color: ${({ theme }) => theme.colors.error};
+  `;
+  return (
+    <StyledError>
+      <Icons.Error /> {error}
+    </StyledError>
+  );
+};
+
+const DropdownContent = ({
+  content,
+  error,
+}: {
+  content: ReactElement;
+  error?: string;
+  loading?: boolean;
+}) => {
+  if (error) {
+    return <Error error={error} />;
+  }
+  return content;
+};
+
+const SelectComponent = ({
+  allowNewOptions = false,
+  ariaLabel,
+  filterOption,
+  header = null,
+  loading,
+  mode,
+  name,
+  notFoundContent,
+  paginatedFetch = false,
+  placeholder = t('Select ...'),
+  options,
+  showSearch,
+  value,
+  ...props
+}: SelectProps) => {
+  const isAsync = typeof options === 'function';
+  const isSingleMode =
+    mode !== ESelectTypes.TAGS && mode !== ESelectTypes.MULTIPLE;
+  const shouldShowSearch = isAsync || allowNewOptions ? true : showSearch;
+  const initialOptions = options && Array.isArray(options) ? options : [];
+  const [selectOptions, setOptions] = useState<OptionsType>(initialOptions);
+  const [selectValue, setSelectValue] = useState(value);
+  const [searchedValue, setSearchedValue] = useState('');
+  const [isLoading, setLoading] = useState(loading);
+  const [error, setError] = useState('');
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const fetchRef = useRef(0);
+
+  const handleSelectMode = () => {
+    if (allowNewOptions && mode === ESelectTypes.MULTIPLE) {
+      return ESelectTypes.TAGS;
+    }
+    if (!allowNewOptions && mode === ESelectTypes.TAGS) {
+      return ESelectTypes.MULTIPLE;
+    }
+    return mode;
+  };
+
+  const handleTopOptions = (selectedValue: any) => {
+    // bringing selected options to the top of the list
+    if (selectedValue) {
+      const currentValue = selectedValue as string[] | string;
+      const topOptions = selectOptions.filter(opt =>
+        currentValue?.includes(opt.value),
+      );
+      const otherOptions = selectOptions.filter(
+        opt => !topOptions.find(tOpt => tOpt.value === opt.value),
+      );
+      // fallback for custom options in tags mode as they
+      // do not appear in the selectOptions state
+      if (!isSingleMode && Array.isArray(currentValue)) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const val of currentValue) {
+          if (!topOptions.find(tOpt => tOpt.value === val)) {
+            topOptions.push({ label: val, value: val });
+          }
+        }
+      }
+      setOptions([...topOptions, ...otherOptions]);
+    }
+  };
+
+  const handleOnSelect = (selectedValue: any) => {
+    if (!isSingleMode) {
+      const currentSelected = Array.isArray(selectValue) ? selectValue : [];
+      setSelectValue([...currentSelected, selectedValue]);
+    } else {
+      setSelectValue(selectedValue);
+      // in single mode the sorting must happen on selection
+      handleTopOptions(selectedValue);
+    }
+  };
+
+  const handleOnDeselect = (value: any) => {
+    if (Array.isArray(selectValue)) {
+      const selectedValues = [
+        ...(selectValue as []).filter(opt => opt !== value),
+      ];
+      setSelectValue(selectedValues);
+    }
+  };
+
+  const handleFetch = useMemo(() => {
+    const fetchOptions = options as OptionsPromise;
+    const loadOptions = (value: string, paginate?: 'paginate') => {
+      if (paginate) {
+        fetchRef.current += 1;
+      } else {
+        fetchRef.current = 0;
+      }
+      const fetchId = fetchRef.current;
+      const page = paginatedFetch ? fetchId : undefined;
+
+      fetchOptions(value, page)
+        .then((newOptions: OptionsType) => {
+          if (fetchId !== fetchRef.current) return;
+          if (newOptions && Array.isArray(newOptions) && newOptions.length) {
+            // merges with existing and creates unique options
+            setOptions(prevOptions => [
+              ...prevOptions,
+              ...newOptions.filter(
+                newOpt =>
+                  !prevOptions.find(prevOpt => prevOpt.value === newOpt.value),
+              ),
+            ]);
+          }
+        })
+        .catch(response =>
+          getClientErrorObject(response).then(e => {
+            const { error } = e;
+            setError(error);
+          }),
+        )
+        .finally(() => setLoading(false));
+    };
+    return debounce(loadOptions, DEBOUNCE_TIMEOUT);
+  }, [options, paginatedFetch]);
+
+  const handleOnSearch = (search: string) => {
+    const searchValue = search.trim();
+    // enables option creation
+    if (allowNewOptions && isSingleMode) {
+      const lastOption = selectOptions[selectOptions.length - 1].value;
+      // replaces the last search value entered with the new one
+      // only when the value wasn't part of the original options
+      if (
+        lastOption === searchedValue &&
+        !initialOptions.find(o => o.value === searchedValue)
+      ) {
+        selectOptions.pop();
+        setOptions(selectOptions);
+      }
+      if (searchValue && !hasOption(searchValue, selectOptions)) {
+        const newOption = {
+          label: searchValue,
+          value: searchValue,
+        };
+        // adds a custom option
+        const newOptions = [...selectOptions, newOption];
+        setOptions(newOptions);
+      }
+    }
+    setSearchedValue(searchValue);
+  };
+
+  const handlePagination = (e: UIEvent<HTMLElement>) => {
+    const vScroll = e.currentTarget;
+    if (
+      isAsync &&
+      paginatedFetch &&
+      vScroll.scrollTop === vScroll.scrollHeight - vScroll.offsetHeight
+    ) {
+      handleFetch(searchedValue, 'paginate');
+    }
+  };
+
+  const handleFilterOption = (search: string, option: AntdLabeledValue) => {
+    const searchValue = search.trim().toLowerCase();
+    if (filterOption && typeof filterOption === 'boolean') return filterOption;
+    if (filterOption && typeof filterOption === 'function') {
+      return filterOption(search, option);
+    }
+    const { value, label } = option;
+    if (
+      value &&
+      label &&
+      typeof value === 'string' &&
+      typeof label === 'string'
+    ) {
+      return (
+        value.toLowerCase().includes(searchValue) ||
+        label.toLowerCase().includes(searchValue)
+      );
+    }
+    return true;
+  };
+
+  const handleOnDropdownVisibleChange = (isDropdownVisible: boolean) => {
+    setIsDropdownVisible(isDropdownVisible);
+    // multiple or tags mode keep the dropdown visible while selecting options
+    // this waits for the dropdown to be closed before sorting the top options
+    if (!isSingleMode && !isDropdownVisible) {
+      handleTopOptions(selectValue);
+    }
+  };
+
+  useEffect(() => {
+    const foundOption = hasOption(searchedValue, selectOptions);
+    if (isAsync && !foundOption && !allowNewOptions) {
+      setLoading(true);
+      handleFetch(searchedValue);
+    }
+  }, [allowNewOptions, isAsync, handleFetch, searchedValue, selectOptions]);
+
+  useEffect(() => {
+    if (isAsync && allowNewOptions) {
+      setLoading(true);
+      handleFetch(searchedValue);
+    }
+  }, [allowNewOptions, isAsync, handleFetch, searchedValue]);
+
+  return (
+    <>
+      {header}
+      <AntdSelect
+        aria-label={ariaLabel || name}
+        dropdownRender={(
+          originNode: ReactElement & { ref?: RefObject<HTMLElement> },
+        ) => {
+          if (!isDropdownVisible) {
+            originNode.ref?.current?.scrollTo({ top: 0 });
+          }
+          return <DropdownContent content={originNode} error={error} />;
+        }}
+        filterOption={handleFilterOption as any}
+        getPopupContainer={triggerNode => triggerNode.parentNode}
+        loading={isLoading}
+        maxTagCount={MAX_TAG_COUNT}
+        mode={handleSelectMode()}
+        notFoundContent={isLoading ? null : notFoundContent}
+        onDeselect={handleOnDeselect}
+        onDropdownVisibleChange={handleOnDropdownVisibleChange}
+        onPopupScroll={handlePagination}
+        onSearch={handleOnSearch}
+        onSelect={handleOnSelect}
+        options={selectOptions}
+        placeholder={shouldShowSearch ? t('Search ...') : placeholder}
+        showSearch={shouldShowSearch}
+        tokenSeparators={TOKEN_SEPARATORS}
+        value={selectValue}
+        {...props}
+      />
+    </>
+  );
+};
+
+const Select = styled((
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  { ...props }: SelectProps,
+) => <SelectComponent {...props} />)`
+  width: 100%;
+`;
+
+export default Select;
diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/DeprecatedSelect.stories.tsx
similarity index 99%
rename from superset-frontend/src/components/Select/Select.stories.tsx
rename to superset-frontend/src/components/Select/DeprecatedSelect.stories.tsx
index 125f6677864..191ee81e00e 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/DeprecatedSelect.stories.tsx
@@ -28,7 +28,7 @@ const OPTIONS = [
 ];
 
 export default {
-  title: 'Select',
+  title: 'DeprecatedSelect',
   argTypes: {
     options: {
       type: 'select',
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/DeprecatedSelect.tsx
similarity index 100%
rename from superset-frontend/src/components/Select/Select.tsx
rename to superset-frontend/src/components/Select/DeprecatedSelect.tsx
diff --git a/superset-frontend/src/components/Select/index.ts b/superset-frontend/src/components/Select/index.ts
index 009e8edf220..e8f30eb7e4c 100644
--- a/superset-frontend/src/components/Select/index.ts
+++ b/superset-frontend/src/components/Select/index.ts
@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export * from './Select';
+export * from './DeprecatedSelect';
 export * from './styles';
-export { default } from './Select';
+export { default } from './DeprecatedSelect';
 export { default as OnPasteSelect } from './OnPasteSelect';
 export { NativeSelect, NativeGraySelect } from './NativeSelect';
diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index b1603e6473e..015c9bbc471 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -30,7 +30,7 @@ import { Props as SelectProps } from 'react-select/src/Select';
 import { colors as reactSelectColors } from 'react-select/src/theme';
 import { DeepNonNullable } from 'react-select/src/components';
 import { OptionType } from 'antd/lib/select';
-import { SupersetStyledSelectProps } from './Select';
+import { SupersetStyledSelectProps } from './DeprecatedSelect';
 
 export const DEFAULT_CLASS_NAME = 'Select';
 export const DEFAULT_CLASS_NAME_PREFIX = 'Select';
diff --git a/superset-frontend/src/components/Select/utils.ts b/superset-frontend/src/components/Select/utils.ts
index 497791b62d7..1195cd64711 100644
--- a/superset-frontend/src/components/Select/utils.ts
+++ b/superset-frontend/src/components/Select/utils.ts
@@ -23,6 +23,8 @@ import {
   GroupedOptionsType,
 } from 'react-select';
 
+import { OptionsType as AntdOptionsType } from './AntdSelect';
+
 /**
  * Find Option value that matches a possibly string value.
  *
@@ -57,3 +59,13 @@ export function findValue<OptionType extends OptionTypeBase>(
   // empty: https://github.com/JedWatson/react-select/blob/32ad5c040bdd96cd1ca71010c2558842d684629c/packages/react-select/src/utils.js#L64
   return (Array.isArray(value) ? value : [value]).map(find);
 }
+
+export function hasOption(search: string, options: AntdOptionsType) {
+  const searchOption = search.trim().toLowerCase();
+  return options.find(
+    opt =>
+      opt.value.toLowerCase().includes(searchOption) ||
+      (typeof opt.label === 'string' &&
+        opt.label.toLowerCase().includes(searchOption)),
+  );
+}
diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts
new file mode 100644
index 00000000000..02a919d5ae2
--- /dev/null
+++ b/superset-frontend/src/components/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { default as Select } from './Select/AntdSelect';