diff --git a/mkdocs.yml b/mkdocs.yml
index 784c68809..1bafe035e 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -103,6 +103,7 @@ nav:
       - Inputs:
           - CheckBoxField: 'components/CheckboxField/README.md'
           - FileInputField: 'components/FileInputField/README.md'
+          - MultiSelectField: 'components/MultiSelectField/README.md'
           - Radio: 'components/Radio/README.md'
           - SelectField: 'components/SelectField/README.md'
           - TextArea: 'components/TextArea/README.md'
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index ba00a03d8..3c26f357c 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -50,7 +50,8 @@ there are longer validation messages or help texts.
 The FormLayout supports buttons and all React UI form fields:
 [Button](/components/Button), [CheckboxField](/components/CheckboxField),
 [FileInputField](/components/FileInputField),
-[InputGroup](/components/InputGroup), [Radio](/components/Radio),
+[InputGroup](/components/InputGroup),
+[MultiSelectField](/components/MultiSelectField), [Radio](/components/Radio),
 [SelectField](/components/SelectField), [TextArea](/components/TextArea),
 [TextField](/components/TextField), and [Toggle](/components/Toggle).
 
@@ -58,6 +59,7 @@ The FormLayout supports buttons and all React UI form fields:
 React.createElement(() => {
   const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
+  const [preferredFruits, setPreferredFruits] = React.useState(['apple']);
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
   const options = [
@@ -138,6 +140,12 @@ React.createElement(() => {
           options={options}
           value={fruit}
         />
+        <MultiSelectField
+          label="Fruits to order"
+          onChange={(value) => setPreferredFruits(value)}
+          options={options}
+          value={preferredFruits}
+        />
         <TextArea
           fullWidth
           label="Message"
diff --git a/src/components/InputGroup/InputGroup.types.ts b/src/components/InputGroup/InputGroup.types.ts
index 6f41dad10..f5ec4d8cf 100644
--- a/src/components/InputGroup/InputGroup.types.ts
+++ b/src/components/InputGroup/InputGroup.types.ts
@@ -14,6 +14,7 @@ export type InputGroupProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>,
   /**
    * Supported elements to be grouped:
    * * `Button`
+   * * `MultiSelectField`
    * * `SelectField`
    * * `TextField`
    *
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index 0b5be320c..29633fbcc 100644
--- a/src/components/InputGroup/README.md
+++ b/src/components/InputGroup/README.md
@@ -64,11 +64,6 @@ See [API](#api) for all available options.
   make use of its built-in features like disabling all nested inputs or pairing
   the group with a form outside. Consult [the MDN docs][fieldset] to learn more.
 
-- InputGroup currently **supports grouping of**
-  [TextField](/components/TextField), [SelectField](/components/SelectField),
-  [FileInputField](/components/FileInputField), and [Button](/components/Button)
-  components.
-
 - To group [Buttons](/components/Button) only, use the
   [ButtonGroup](/components/ButtonGroup) component which is designed
   specifically for that purpose.
@@ -77,6 +72,85 @@ See [API](#api) for all available options.
   case, its `layout` prop is ignored and the value is inherited from
   FormLayout instead.
 
+## Supported Form Fields
+
+The InputGroup supports buttons and the following React UI form fields:
+[Button](/components/Button), [FileInputField](/components/FileInputField),
+[MultiSelectField](/components/MultiSelectField),
+[SelectField](/components/SelectField), and [TextField](/components/TextField).
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  const [countries, setCountries] = React.useState(['cz']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Pear',
+      value: 'pear',
+    },
+    {
+      label: 'Cherry',
+      value: 'cherry',
+    },
+  ];
+  const countryOptions = [
+    {
+      label: 'Czech Republic',
+      value: 'cz',
+    },
+    {
+      label: 'Poland',
+      value: 'pl',
+    },
+    {
+      label: 'Slovakia',
+      value: 'sk',
+    },
+  ];
+  return (
+    <FormLayout>
+      <InputGroup label="TextField">
+        <TextField
+          label="Variety"
+          placeholder="Eg. Golden delicious"
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="SelectField">
+        <SelectField
+          label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
+          options={options}
+          value={fruit}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="MultiSelectField">
+        <MultiSelectField
+          label="Countries of origin"
+          onChange={(value) => setCountries(value)}
+          options={countryOptions}
+          value={countries}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+      <InputGroup label="FileInputField">
+        <FileInputField
+          id="supported-form-fields-attachment"
+          label="Attachment"
+          onFilesChanged={() => {}}
+        />
+        <Button label="Submit" />
+      </InputGroup>
+    </FormLayout>
+  );
+})
+```
+
 ## Sizes
 
 All existing field and button sizes are also available on the input group level:
diff --git a/src/components/MultiSelectField/MultiSelectField.module.scss b/src/components/MultiSelectField/MultiSelectField.module.scss
new file mode 100644
index 000000000..a1a45b0cf
--- /dev/null
+++ b/src/components/MultiSelectField/MultiSelectField.module.scss
@@ -0,0 +1,150 @@
+@use "../../styles/settings/form-fields" as settings;
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/theme/form-fields" as theme;
+@use "theme" as multi-select-field-theme;
+
+@layer components.multi-select-field {
+    // Foundation
+    .root {
+        @include foundation.root();
+
+        cursor: text;
+    }
+
+    .isRootDisabled {
+        opacity: theme.$disabled-opacity;
+        cursor: theme.$disabled-cursor;
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .inputContainer {
+        @include box-field-elements.input-container();
+    }
+
+    .input {
+        @include box-field-elements.input();
+
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5em; // Space between tags
+        align-items: center;
+        height: auto;
+        min-height: var(--rui-local-height);
+
+        // Leave out space for the caret so the tags wrap instead of sliding under it.
+        padding-right: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
+    }
+
+    .caret {
+        @include box-field-elements.caret();
+    }
+
+    .caretIcon {
+        @include box-field-elements.caret-icon();
+    }
+
+    .bottomLine {
+        @include box-field-elements.bottom-line();
+    }
+
+    // The input is rendered as a `div` and the focus usually sits on its children
+    // (the search input or tags) which the `bottom-line` mixin does not cover.
+    .input:focus-within ~ .bottomLine {
+        background-color: var(--rui-local-border-color);
+        opacity: 1;
+        transform: scaleX(1);
+    }
+
+    .isRootDropdownOpen .input {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // Variants
+    .isRootVariantFilled {
+        @include variants.visual(box, $variant: filled, $has-caret: true);
+    }
+
+    .isRootVariantOutline {
+        @include variants.visual(box, $variant: outline, $has-caret: true);
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Invisible label
+    .isLabelHidden {
+        @include accessibility.hide-text();
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical();
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootFullWidth {
+        @include box-field-layout.full-width();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout();
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout();
+    }
+
+    // When grouped, the field creates its own stacking context on focus (see the in-group-layout
+    // mixin) which traps the dropdown z-index inside. Raise the whole field while the dropdown
+    // is open so the dropdown is not covered by the content following the group.
+    .isRootGrouped.isRootDropdownOpen {
+        isolation: isolate;
+        z-index: multi-select-field-theme.$dropdown-z-index;
+    }
+}
diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx
new file mode 100644
index 000000000..791fe5b3c
--- /dev/null
+++ b/src/components/MultiSelectField/MultiSelectField.tsx
@@ -0,0 +1,315 @@
+import React, {
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames';
+import { transferProps } from '../../helpers/transferProps';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from '../InputGroup';
+import { MultiSelectFieldDropdown } from './_components/MultiSelectFieldDropdown';
+import { MultiSelectFieldSearchInput } from './_components/MultiSelectFieldSearchInput';
+import { MultiSelectFieldTag } from './_components/MultiSelectFieldTag';
+import { getOptionsLabelMap } from './_helpers/getOptionsLabelMap';
+import { isPrintableCharacterKey } from './_helpers/isPrintableCharacterKey';
+import { keyDetected } from './_helpers/keyDetected';
+import {
+  caseInsensitiveAccentSensitivePrefixSearch,
+} from './_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch';
+import keyBindings from './keyBindings';
+import styles from './MultiSelectField.module.scss';
+import type { MultiSelectFieldProps } from './MultiSelectField.types';
+
+export const MultiSelectField = React.forwardRef<HTMLDivElement, MultiSelectFieldProps>(({
+  disabled = false,
+  fullWidth = false,
+  helpText,
+  id,
+  isLabelVisible = true,
+  label,
+  layout = 'vertical',
+  onChange,
+  options,
+  renderAsRequired = false,
+  required = false,
+  searchAlgorithm = caseInsensitiveAccentSensitivePrefixSearch,
+  size = 'medium',
+  validationState,
+  validationText,
+  variant = 'outline',
+  value,
+  ...restProps
+}, ref) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const inputRef = useRef<HTMLDivElement>(null);
+  const optionsRef = useRef<HTMLDivElement[]>([]);
+  const rootRef = useRef<HTMLLabelElement>(null);
+  const searchRef = useRef<HTMLSpanElement>(null);
+  const tagsRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const optionsLabelMap = useMemo(() => getOptionsLabelMap(options), [options]);
+
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
+
+  const resolvedDisabled = resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled);
+  const resolvedSize = resolveContextOrProp(inputGroupContext && inputGroupContext.size, size);
+
+  const isSearchEnabled = searchAlgorithm != null;
+  const displayedOptions = (isSearchEnabled && search.length > 0)
+    ? searchAlgorithm(options, search)
+    : options;
+
+  const closeDropdown = () => {
+    setIsDropdownOpen(false);
+    setSearch('');
+    if (searchRef.current) {
+      searchRef.current.textContent = '';
+    }
+  };
+
+  const closeDropdownAndFocusInput = () => {
+    closeDropdown();
+    inputRef.current?.focus();
+  };
+
+  const openDropdown = () => {
+    setIsDropdownOpen(true);
+    if (isSearchEnabled) {
+      searchRef.current?.focus();
+    }
+  };
+
+  useClickOutside(rootRef, () => {
+    if (isDropdownOpen) {
+      closeDropdown();
+    }
+  });
+
+  return (
+    <label
+      className={classNames(
+        styles.root,
+        fullWidth && styles.isRootFullWidth,
+        formLayoutContext && styles.isRootInFormLayout,
+        isDropdownOpen && styles.isRootDropdownOpen,
+        resolvedDisabled && styles.isRootDisabled,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
+        inputGroupContext && styles.isRootGrouped,
+        (renderAsRequired || required) && styles.isRootRequired,
+        getRootSizeClassName(
+          styles,
+          resolvedSize,
+        ),
+        getRootValidationStateClassName(styles, validationState),
+        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
+      )}
+      htmlFor={id}
+      id={id && `${id}__label`}
+      onBlur={(event) => {
+        // Close the dropdown when the focus moves out of the component. When `relatedTarget` is
+        // `null` (focus lost by clicking a non-focusable element), closing is left to the
+        // click-outside handler so that clicks inside the component do not close the dropdown.
+        if (
+          isDropdownOpen
+          && event.relatedTarget !== null
+          && rootRef.current
+          && !rootRef.current.contains(event.relatedTarget)
+        ) {
+          closeDropdown();
+        }
+      }}
+      ref={rootRef}
+    >
+      <div
+        className={classNames(
+          styles.label,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
+        )}
+        id={id && `${id}__labelText`}
+      >
+        {label}
+      </div>
+      <div className={styles.field}>
+        <div className={styles.inputContainer}>
+          <div
+            {...transferProps(restProps)}
+            aria-controls={id && `${id}__dropdown`}
+            aria-disabled={resolvedDisabled}
+            aria-expanded={isDropdownOpen}
+            aria-haspopup="listbox"
+            aria-labelledby={id && `${id}__labelText`}
+            aria-required={required}
+            className={styles.input}
+            id={id}
+            onClick={(event) => {
+              if (resolvedDisabled) {
+                return;
+              }
+
+              // Clicks inside the search input must not close the open dropdown, e.g. when
+              // the user positions the cursor within the search text.
+              if (isDropdownOpen && searchRef.current?.contains(event.target as Node)) {
+                return;
+              }
+
+              if (isDropdownOpen) {
+                closeDropdown();
+              } else {
+                openDropdown();
+              }
+            }}
+            onKeyDown={(event) => {
+              // Key presses on tags and on the search input are handled by themselves and
+              // must not be processed a second time when they bubble up here.
+              if (resolvedDisabled || event.target !== event.currentTarget) {
+                return;
+              }
+
+              if (isDropdownOpen && keyDetected(event, keyBindings.closeDropdown)) {
+                event.preventDefault();
+                closeDropdownAndFocusInput();
+                return;
+              }
+
+              if (keyDetected(
+                event,
+                [
+                  ...keyBindings.focusNextDropdownItem,
+                  ...keyBindings.focusPreviousDropdownItem,
+                  ...keyBindings.openDropdown,
+                ],
+              )) {
+                event.preventDefault();
+                openDropdown();
+                return;
+              }
+
+              // Typing a character opens the dropdown and moves focus to the search input.
+              // The default action is intentionally kept so the typed character is inserted
+              // into the freshly focused search input.
+              if (isSearchEnabled && isPrintableCharacterKey(event)) {
+                openDropdown();
+              }
+            }}
+            ref={(element) => {
+              inputRef.current = element;
+              if (typeof ref === 'function') {
+                ref(element);
+              } else if (ref != null) {
+                ref.current = element; // eslint-disable-line no-param-reassign
+              }
+            }}
+            role="combobox"
+            tabIndex={resolvedDisabled ? -1 : 0}
+          >
+            {value.map((selectedValue, index) => (
+              <MultiSelectFieldTag
+                disabled={resolvedDisabled}
+                isFocusable={isDropdownOpen}
+                key={selectedValue}
+                onCloseDropdown={closeDropdownAndFocusInput}
+                onRemoveTag={() => {
+                  onChange(value.filter((otherValue) => otherValue !== selectedValue));
+
+                  const tags = tagsRef.current.filter(Boolean);
+                  const fallbackTarget = isSearchEnabled ? searchRef.current : inputRef.current;
+                  const target = tags[index - 1] ?? tags[index + 1] ?? fallbackTarget;
+                  target?.focus();
+                }}
+                priority={variant}
+                ref={(element) => {
+                  tagsRef.current[index] = element;
+                }}
+                size={resolvedSize}
+              >
+                {optionsLabelMap[selectedValue] ?? selectedValue}
+              </MultiSelectFieldTag>
+            ))}
+            {isSearchEnabled && (
+              <MultiSelectFieldSearchInput
+                disabled={resolvedDisabled}
+                id={id}
+                isFocusable={isDropdownOpen}
+                onCloseDropdown={closeDropdownAndFocusInput}
+                onFocusFirstDropdownItem={() => {
+                  optionsRef.current[0]?.focus();
+                }}
+                onFocusLastDropdownItem={() => {
+                  optionsRef.current[optionsRef.current.length - 1]?.focus();
+                }}
+                onFocusLastTag={() => {
+                  const tags = tagsRef.current.filter(Boolean);
+                  tags[tags.length - 1]?.focus();
+                }}
+                onSearchInput={(searchValue) => {
+                  setSearch(searchValue);
+
+                  // Typing into the search input while the dropdown is closed reopens it,
+                  // e.g. after the dropdown was closed by removing a tag.
+                  if (!isDropdownOpen) {
+                    setIsDropdownOpen(true);
+                  }
+                }}
+                ref={searchRef}
+                searchValue={search}
+              />
+            )}
+          </div>
+          <div className={styles.caret}>
+            <span className={styles.caretIcon} />
+          </div>
+          {variant === 'filled' && (
+            <div className={styles.bottomLine} />
+          )}
+        </div>
+        {isDropdownOpen && (
+          <MultiSelectFieldDropdown
+            autoFocusFirstOptionOnOpen={!isSearchEnabled}
+            id={id}
+            onClose={closeDropdownAndFocusInput}
+            onItemSelected={(selectedValue) => {
+              if (value.includes(selectedValue)) {
+                onChange(value.filter((otherValue) => otherValue !== selectedValue));
+              } else {
+                onChange([...value, selectedValue]);
+              }
+            }}
+            options={displayedOptions}
+            optionsRef={optionsRef}
+            value={value}
+          />
+        )}
+        {(helpText && !inputGroupContext) && (
+          <div
+            className={styles.helpText}
+            id={id && `${id}__helpText`}
+          >
+            {helpText}
+          </div>
+        )}
+        {(validationText && !inputGroupContext) && (
+          <div
+            className={styles.validationText}
+            id={id && `${id}__validationText`}
+          >
+            {validationText}
+          </div>
+        )}
+      </div>
+    </label>
+  );
+});
+
+export const MultiSelectFieldWithGlobalProps = withGlobalProps<MultiSelectFieldProps, HTMLDivElement>(MultiSelectField, 'MultiSelectField');
+
+export default MultiSelectFieldWithGlobalProps;
diff --git a/src/components/MultiSelectField/MultiSelectField.types.ts b/src/components/MultiSelectField/MultiSelectField.types.ts
new file mode 100644
index 000000000..bc20ff36c
--- /dev/null
+++ b/src/components/MultiSelectField/MultiSelectField.types.ts
@@ -0,0 +1,147 @@
+import type {
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+import type {
+  Layout,
+  Size,
+  ValidationState,
+} from '../../types';
+
+export type MultiSelectFieldOption = {
+  disabled?: boolean;
+  key?: string;
+  label: string;
+  value: string | number;
+};
+
+export type MultiSelectFieldOptionGroup = {
+  disabled?: boolean;
+  key?: string;
+  label: string;
+  options: MultiSelectFieldOption[];
+};
+
+/**
+ * Search algorithm filtering the options by the text typed into the search input.
+ */
+export type MultiSelectFieldSearchAlgorithm = (
+  options: (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[],
+  searchString: string,
+) => (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[];
+
+export type MultiSelectFieldVariant = 'filled' | 'outline';
+
+/**
+ * Props of the `MultiSelectField` component.
+ */
+export type MultiSelectFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the field will span the full width of its parent.
+   */
+  fullWidth?: boolean;
+  /**
+   * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
+   */
+  helpText?: ReactNode;
+  /**
+   * ID of the input HTML element.
+   *
+   * Also serves as a prefix for important inner elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`,
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   * * `<ID>__dropdown`
+   *
+   * and of individual options:
+   * * `<ID>__item__<VALUE>`
+   *
+   * If `key` in the option definition object is set,
+   * then `option.key` is used instead of `option.value` in place of `<VALUE>`.
+   */
+  id?: string;
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
+   */
+  isLabelVisible?: boolean;
+  /**
+   * Multi select field label.
+   */
+  label: ReactNode;
+  /**
+   * Layout of the field.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
+   */
+  layout?: Layout;
+  /**
+   * Callback fired when the selection changes. Called with the new array of selected
+   * option values.
+   */
+  onChange: (value: MultiSelectFieldOption['value'][]) => void;
+  /**
+   * Set of options to be chosen from.
+   *
+   * Either set of individual or grouped options is acceptable.
+   *
+   * For generating unique IDs the `option.value` is normally used. For cases when this is not practical or
+   * the `option.value` values are not unique the `option.key` attribute can be set manually.
+   * The same applies for the `label` value of grouped options which is supposed to be unique.
+   * To ensure uniqueness `key` attribute can be set manually.
+   */
+  options: MultiSelectFieldOption[] | MultiSelectFieldOptionGroup[];
+  /**
+   * If `true`, the input will be rendered as if it was required.
+   */
+  renderAsRequired?: boolean;
+  /**
+   * If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
+   */
+  required?: boolean;
+  /**
+   * Search algorithm used to filter the options by the text typed into the search input.
+   * The function is called with the `options` array and the search string and returns
+   * the options to be displayed.
+   *
+   * Defaults to the provided `caseInsensitiveAccentSensitivePrefixSearch` algorithm.
+   * Set to `null` to disable searching.
+   */
+  searchAlgorithm?: MultiSelectFieldSearchAlgorithm | null;
+  /**
+   * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
+   */
+  size?: Size;
+  /**
+   * Alter the field to provide feedback based on validation result.
+   */
+  validationState?: ValidationState;
+  /**
+   * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
+   */
+  validationText?: ReactNode;
+  /**
+   * Array of selected option values.
+   */
+  value: MultiSelectFieldOption['value'][];
+  /**
+   * Design variant of the field, further customizable with CSS custom properties.
+   */
+  variant?: MultiSelectFieldVariant;
+};
diff --git a/src/components/MultiSelectField/README.md b/src/components/MultiSelectField/README.md
new file mode 100644
index 000000000..769931a0c
--- /dev/null
+++ b/src/components/MultiSelectField/README.md
@@ -0,0 +1,1161 @@
+# MultiSelectField
+
+MultiSelectField allows users to select multiple options from a set.
+
+## Basic Usage
+
+To implement the MultiSelectField component, you need to import it first:
+
+```js
+import { MultiSelectField } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [value, setValue] = React.useState(['CZ', 'SK', 'PL', 'DE', 'HU']);
+  const COUNTRIES = [
+    { label: 'Austria', value: 'AT' },
+    { label: 'Belgium', value: 'BE', disabled: true },
+    { label: 'Bulgaria', value: 'BG' },
+    { label: 'Croatia', value: 'HR', disabled: true },
+    { label: 'Cyprus', value: 'CY' },
+    { label: 'Czech Republic', value: 'CZ' },
+    { label: 'Denmark', value: 'DK' },
+    { label: 'Estonia', value: 'EE' },
+    { label: 'Finland', value: 'FI' },
+    { label: 'France', value: 'FR' },
+    { label: 'Germany', value: 'DE' },
+    { label: 'Greece', value: 'GR' },
+    { label: 'Hungary', value: 'HU' },
+    { label: 'Ireland', value: 'IE' },
+    { label: 'Italy', value: 'IT' },
+    { label: 'Latvia', value: 'LV' },
+    { label: 'Lithuania', value: 'LT' },
+    { label: 'Luxembourg', value: 'LU' },
+    { label: 'Malta', value: 'MT' },
+    { label: 'Netherlands', value: 'NL' },
+    { label: 'Poland', value: 'PL' },
+    { label: 'Portugal', value: 'PT' },
+    { label: 'Romania', value: 'RO' },
+    { label: 'Slovakia', value: 'SK' },
+    { label: 'Slovenia', value: 'SI' },
+    { label: 'Spain', value: 'ES' },
+    { label: 'Sweden', value: 'SE' }
+  ];
+  return (
+    <>
+    <MultiSelectField
+      label="Select countries"
+      onChange={(selectedValues) => setValue(selectedValues)}
+      options={COUNTRIES}
+      value={value}
+      variant="outline"
+    />
+    <MultiSelectField
+      label="Select countries"
+      onChange={(selectedValues) => setValue(selectedValues)}
+      options={COUNTRIES}
+      value={value}
+      variant="filled"
+    />
+    </>
+  );
+});
+```
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+- Use MultiSelectField when users should select **multiple options** from
+  a set. To select just a single option, use the
+  [SelectField](/components/SelectField) component instead.
+
+- For sets of just a few options consider using a group of
+  [CheckboxField](/components/CheckboxField) components. This will help keep
+  your UI clean and prevent your users from being overwhelmed by too many
+  options.
+
+- Use **short and descriptive labels**, ideally nouns rather than seemingly
+  polite phrases like _Please select your favourite fruits_. Short labels will
+  help your users accomplish their task faster.
+
+- Only make the MultiSelectField's label invisible when there is **another
+  visual clue** to guide users through filling the input.
+
+- When a short label is not enough, use **help texts to guide users** before
+  they enter anything.
+
+- Use **clear, calm error messages** when there's a problem with what they
+  entered.
+
+- In case of a large amount of options, consider **grouping related items
+  together** by nesting them.
+
+### Keyboard Interaction
+
+- **Enter**, **Space**, **Arrow Up**, or **Arrow Down** opens the dropdown.
+  Typing a character opens the dropdown too (when [search](#search) is
+  enabled).
+- **Typing** into the search input filters the displayed options (when
+  [search](#search) is enabled).
+- **Arrow Up** and **Arrow Down** move focus between the options.
+- **Enter** or **Space** toggles selection of the focused option.
+- **Delete** or **Backspace** removes a focused tag. **Backspace** in an empty
+  search input moves focus to the last tag.
+- **Escape** closes the dropdown and returns focus to the input.
+- **Tab** moves focus through the tags and further out of the field while the
+  dropdown is open.
+
+## Design Variants
+
+To satisfy the design requirements of your project, all input fields in React UI
+come in two design variants to choose from: outline and filled. Both can be
+further [customized](#theming) with CSS custom properties.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        variant="filled"
+        value={fruits}
+      />
+    </>
+  );
+});
+```
+
+## Sizes
+
+Aside from the default (medium) size, two additional sizes are available: small
+and large.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        size="small"
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        size="large"
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        size="small"
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        size="large"
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+});
+```
+
+Full-width fields span the full width of a parent:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        fullWidth
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        fullWidth
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+});
+```
+
+## Grouping Related Options
+
+For a large amount of options you can group related items together by nesting
+them (implements the `optgroup` HTML element).
+
+```docoff-react-preview
+React.createElement(() => {
+  const [crops, setCrops] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Fruits',
+      options: [
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Grapefruit',
+          value: 'grapefruit',
+        },
+      ],
+    },
+    {
+      label: 'Vegetables',
+      options: [
+        {
+          label: 'Beetroot',
+          value: 'beetroot',
+        },
+        {
+          label: 'Carrot',
+          value: 'carrot',
+        },
+        {
+          label: 'Tomato',
+          value: 'tomato',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+    <MultiSelectField
+      label="Your favourite crops"
+      onChange={(value) => setCrops(value)}
+      options={options}
+      value={crops}
+      variant="outline"
+    />
+    <MultiSelectField
+      label="Your favourite crops"
+      onChange={(value) => setCrops(value)}
+      options={options}
+      value={crops}
+      variant="filled"
+    />
+    </>
+  );
+});
+```
+
+## Invisible Label
+
+While it may be acceptable for login screens with just a few fields or for other
+simple forms, it's dangerous to hide labels from users in most cases. Keep in
+mind you should **provide another visual clue** so users know what to fill into
+the input.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        isLabelVisible={false}
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        isLabelVisible={false}
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+});
+```
+
+## Horizontal Layout
+
+The default vertical layout is very easy to use and work with. However, there
+are situations where horizontal layout suits better — and that's why React UI
+supports this kind of layout as well.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        fullWidth
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        fullWidth
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        fullWidth
+        isLabelVisible={false}
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        fullWidth
+        isLabelVisible={false}
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+});
+```
+
+## Help Text
+
+You may provide an additional help text to clarify how the input should be
+filled.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        fullWidth
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        fullWidth
+        helpText="Choose one or more kinds of fruit to feel happy."
+        label="Your favourite fruits"
+        layout="horizontal"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+});
+```
+
+## States
+
+### Validation States
+
+Validation states visually present the result of validation of the input. You
+should always **provide a validation message for states other than valid** so
+users know what happened and what action they should take or what options they
+have.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        validationState="valid"
+        validationText="Great, they're in stock!"
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        validationState="warning"
+        validationText="Oh, really?"
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        validationState="invalid"
+        validationText="You must select at least one kind of fruit."
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        validationState="valid"
+        validationText="Great, they're in stock!"
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        validationState="warning"
+        validationText="Oh, really?"
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        required
+        value={fruits}
+        validationState="invalid"
+        validationText="You must select at least one kind of fruit."
+        variant="filled"
+      />
+    </>
+  );
+})
+```
+
+### Required State
+
+The required state indicates that the input is mandatory.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <MultiSelectField
+      label="Your favourite fruits"
+      onChange={(value) => setFruits(value)}
+      options={options}
+      required
+      value={fruits}
+    />
+  );
+});
+```
+
+#### Styling the Required State
+
+All form fields in React UI can be
+[styled](/docs/customize/theming/forms/#required-state)
+to indicate the required state.
+
+However, you may find yourself in a situation where a form field is valid in
+both selected and unselected states, for example to turn on or off a feature.
+If your project uses the label color as the primary means to indicate the
+required state of input fields and the usual asterisk `*` is omitted, you may
+want to keep the label color consistent for both states to avoid confusion.
+
+For this edge case, there is the `renderAsRequired` prop:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+   <React.Fragment>
+      <style>
+      {`
+        .example {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem 0.5rem;
+        }
+
+        .example--themed-form-fields {
+          --rui-FormField__label__color: var(--rui-color-text-secondary);
+          --rui-FormField--required__label__color: var(--rui-color-text-primary);
+          --rui-FormField--required__sign: '';
+        }
+      `}
+      </style>
+      <div class="example example--themed-form-fields">
+        <MultiSelectField
+          label="This field is optional"
+          onChange={(value) => setFruits(value)}
+          options={options}
+          value={fruits}
+        />
+        <MultiSelectField
+          label="This field is optional but looks like required"
+          onChange={(value) => setFruits(value)}
+          options={options}
+          renderAsRequired
+          value={fruits}
+        />
+      </div>
+    </React.Fragment>
+  );
+});
+```
+
+It renders the field as if it was required, but doesn't mark the input as
+required for assistive technologies.
+
+### Disabled State
+
+It's possible to disable just some options or the whole input.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      disabled: true,
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Grapefruit',
+      value: 'grapefruit',
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        disabled
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+      />
+      <MultiSelectField
+        disabled
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+})
+```
+
+## Search
+
+The MultiSelectField component uses a search algorithm to filter the
+options based on the user's input.
+
+### Disabled search
+
+If you want to disable the search, you can set the `searchAlgorithm` prop to `null`.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Ovoce',
+      options: [
+        {
+          label: 'Jablko',
+          value: 'apple',
+        },
+        {
+          label: 'Banán',
+          value: 'banana',
+        },
+        {
+          label: 'Grep',
+          value: 'grapefruit',
+        },
+        {
+          label: 'Jahoda',
+          value: 'strawberry',
+        },
+      ],
+    },
+    {
+      label: 'Zelenina',
+      options: [
+        {
+          label: 'Řepa',
+          value: 'beetroot',
+        },
+        {
+          label: 'Mrkev',
+          value: 'carrot',
+        },
+        {
+          label: 'Rajče',
+          value: 'tomato',
+        },
+      ],
+    },
+  ];
+  return (
+    <MultiSelectField
+      label="Your favourite fruits"
+      onChange={(value) => setFruits(value)}
+      options={options}
+      searchAlgorithm={null}
+      value={fruits}
+    />
+  );
+})
+```
+
+### Provided search algorithms
+
+The default case-insensitive, accent sensitive, prefix search algorithm is
+suitable for most cases. However, you can choose from the following search
+algorithms to better suit your needs:
+
+```js
+import {
+  caseInsensitiveAccentInsensitivePrefixSearch,
+  caseInsensitiveAccentInsensitiveSubstringSearch,
+  caseInsensitiveAccentSensitivePrefixSearch,
+  caseInsensitiveAccentSensitiveSubstringSearch,
+} from '@react-ui-org/react-ui';
+```
+
+Provided search algorithms preserve grouping (if defined) and only filter the options
+inside the groups. Empty groups are not displayed.
+
+The following example demonstrates the use of all search algorithms:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Ovoce',
+      options: [
+        {
+          label: 'Jablko',
+          value: 'apple',
+        },
+        {
+          label: 'Banán',
+          value: 'banana',
+        },
+        {
+          label: 'Grep',
+          value: 'grapefruit',
+        },
+        {
+          label: 'Jahoda',
+          value: 'strawberry',
+        },
+      ],
+    },
+    {
+      label: 'Zelenina',
+      options: [
+        {
+          label: 'Řepa',
+          value: 'beetroot',
+        },
+        {
+          label: 'Mrkev',
+          value: 'carrot',
+        },
+        {
+          label: 'Rajče',
+          value: 'tomato',
+        },
+      ],
+    },
+  ];
+  return (
+    <>
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        searchAlgorithm={caseInsensitiveAccentInsensitivePrefixSearch}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        searchAlgorithm={caseInsensitiveAccentInsensitiveSubstringSearch}
+        value={fruits}
+        variant="filled"
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        searchAlgorithm={caseInsensitiveAccentSensitivePrefixSearch}
+        value={fruits}
+      />
+      <MultiSelectField
+        label="Your favourite fruits"
+        onChange={(value) => setFruits(value)}
+        options={options}
+        searchAlgorithm={caseInsensitiveAccentSensitiveSubstringSearch}
+        value={fruits}
+        variant="filled"
+      />
+    </>
+  );
+})
+```
+
+### Provided generic search algorithm
+
+For advanced search, you can use `genericSearch` which accepts a custom
+comparator function. `genericSearch` will do the filtering based on the result
+of the comparator function, so you do not need to worry about the search
+algorithm itself.
+
+```js
+import { genericSearch } from '@react-ui-org/react-ui';
+```
+
+The following example demonstrates the use of `genericSearch` with a custom
+comparator function:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Ovoce',
+      options: [
+        {
+          label: 'Jablko',
+          value: 'apple',
+        },
+        {
+          label: 'Banán',
+          value: 'banana',
+        },
+        {
+          label: 'Grep',
+          value: 'grapefruit',
+        },
+        {
+          label: 'Jahoda',
+          value: 'strawberry',
+        },
+      ],
+    },
+    {
+      label: 'Zelenina',
+      options: [
+        {
+          label: 'Řepa',
+          value: 'beetroot',
+        },
+        {
+          label: 'Mrkev',
+          value: 'carrot',
+        },
+        {
+          label: 'Rajče',
+          value: 'tomato',
+        },
+      ],
+    },
+  ];
+  const customCaseSensitiveSubstringSearch = (options, searchString) => genericSearch(
+    options,
+    searchString,
+    (optionLabel, searchValue) => optionLabel.includes(searchValue)
+  );
+  return (
+    <MultiSelectField
+      label="Your favourite fruits"
+      onChange={(value) => setFruits(value)}
+      options={options}
+      searchAlgorithm={customCaseSensitiveSubstringSearch}
+      value={fruits}
+    />
+  );
+})
+```
+
+### Custom search algorithm
+
+If provided search algorithms do not suit your needs, you can create your own
+search algorithm. The search algorithm is a function that accepts an array of
+options and a search string and returns an array of options that match the
+search string.
+
+The following example demonstrates the use of a custom search algorithm that
+is case-insensitive, accent sensitive, but removes grouping:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruits, setFruits] = React.useState(['apple']);
+  const options = [
+    {
+      label: 'Ovoce',
+      options: [
+        {
+          label: 'Jablko',
+          value: 'apple',
+        },
+        {
+          label: 'Banán',
+          value: 'banana',
+        },
+        {
+          label: 'Grep',
+          value: 'grapefruit',
+        },
+        {
+          label: 'Jahoda',
+          value: 'strawberry',
+        },
+      ],
+    },
+    {
+      label: 'Zelenina',
+      options: [
+        {
+          label: 'Řepa',
+          value: 'beetroot',
+        },
+        {
+          label: 'Mrkev',
+          value: 'carrot',
+        },
+        {
+          label: 'Rajče',
+          value: 'tomato',
+        },
+      ],
+    },
+  ];
+  const customFlatPrefixSearch = (options, searchString) => {
+    const searchStringTransformed = searchString.toLowerCase();
+    const flatOptions = options.flatMap((option) => option.options ? option.options : option);
+    return flatOptions.filter((option) => option.label.toLowerCase().startsWith(searchStringTransformed));
+  };
+  return (
+    <MultiSelectField
+      label="Your favourite fruits"
+      onChange={(value) => setFruits(value)}
+      options={options}
+      searchAlgorithm={customFlatPrefixSearch}
+      value={fruits}
+    />
+  );
+})
+```
+
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<div>` HTML element representing the input of the field. This enables making
+the component interactive and helps to improve its accessibility.
+
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the `<div>` HTML element representing
+the input of the field.
+
+## API
+
+<docoff-react-props src="/components/MultiSelectField/MultiSelectField.tsx" name="MultiSelectField"></docoff-react-props>
+
+## Theming
+
+Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
+options. On top of that, the following options are available for
+MultiSelectField.
+
+| Custom Property                                                       | Description                                          |
+|------------------------------------------------------------------------|------------------------------------------------------|
+| `--rui-MultiSelectField__dropdown__background-color`                    | Dropdown background color                            |
+| `--rui-MultiSelectField__dropdown__border-color`                        | Dropdown border color                                |
+| `--rui-MultiSelectField__dropdown__box-shadow`                          | Dropdown box shadow                                  |
+| `--rui-MultiSelectField__dropdown__max-height`                          | Dropdown max height                                  |
+| `--rui-MultiSelectField__dropdown__z-index`                             | Dropdown z-index                                     |
+| `--rui-MultiSelectField__dropdown-group__color`                         | Text color of group labels                           |
+| `--rui-MultiSelectField__dropdown-group__font-weight`                   | Font weight of group labels                          |
+| `--rui-MultiSelectField__dropdown-item__background-color`               | Background color of dropdown items                   |
+| `--rui-MultiSelectField__dropdown-item__border-radius`                  | Corner radius of dropdown item background            |
+| `--rui-MultiSelectField__dropdown-item__color`                          | Text color of dropdown items                         |
+| `--rui-MultiSelectField__dropdown-item__gap`                            | Gap around dropdown item background                  |
+| `--rui-MultiSelectField__dropdown-item--selected__background-color`     | Background color of selected dropdown items          |
+| `--rui-MultiSelectField__dropdown-item--selected__color`                | Text color of selected dropdown items                |
+| `--rui-MultiSelectField__dropdown-item--selected__font-weight`          | Font weight of selected dropdown items               |
+| `--rui-MultiSelectField__dropdown-item--selected--focus__background-color` | Background color of selected dropdown items when hovered or focused |
+| `--rui-MultiSelectField__dropdown-item--selected--focus__color`         | Text color of selected dropdown items when hovered or focused |
+| `--rui-MultiSelectField__dropdown-item--focus__background-color`        | Background color of hovered or focused dropdown items |
+| `--rui-MultiSelectField__dropdown-item--focus__color`                   | Text color of hovered or focused dropdown items      |
+| `--rui-MultiSelectField__dropdown-text-item__color`                     | Text color of text items (e.g. no options found)     |
+| `--rui-MultiSelectField__tag__border-width`                             | Tag border width                                     |
+| `--rui-MultiSelectField__tag__border-radius`                            | Tag corner radius                                    |
+| `--rui-MultiSelectField__tag__gap`                                      | Gap between the tag label and the remove icon        |
+| `--rui-MultiSelectField--<VARIANT>__tag--<INTERACTION STATE>__background-color` | Tag background color                          |
+| `--rui-MultiSelectField--<VARIANT>__tag--<INTERACTION STATE>__border-color`     | Tag border color                              |
+| `--rui-MultiSelectField--<VARIANT>__tag--<INTERACTION STATE>__color`            | Tag text color                                |
+| `--rui-MultiSelectField--<SIZE>__tag__font-size`                        | Tag font size                                        |
+| `--rui-MultiSelectField--<SIZE>__tag__padding-inline`                   | Tag horizontal padding                               |
+
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx
new file mode 100644
index 000000000..88a85edac
--- /dev/null
+++ b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx
@@ -0,0 +1,837 @@
+import {
+  expect,
+  mixPropTests,
+  propTests,
+  test,
+} from '../../../../tests/playwright';
+import { openMultiSelectFieldOptionsTest } from './_propTests/openMultiSelectFieldOptionsTest';
+
+const baseOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+const partiallyDisabledOptions = [
+  {
+    disabled: false,
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: true,
+    label: 'option2',
+    value: 'value2',
+  },
+  {
+    disabled: false,
+    label: 'option3',
+    value: 'value3',
+  },
+];
+
+const groupedOptions = [
+  {
+    label: 'optgroup1',
+    options: [
+      {
+        disabled: false,
+        label: 'option1',
+        value: 'value1',
+      },
+      {
+        disabled: false,
+        label: 'option2',
+        value: 'value2',
+      },
+    ],
+  },
+  {
+    label: 'optgroup2',
+    options: [
+      {
+        disabled: false,
+        label: 'option3',
+        value: 'value3',
+      },
+      {
+        disabled: false,
+        label: 'option4',
+        value: 'value4',
+      },
+    ],
+  },
+];
+
+test.describe('MultiSelectField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.requiredPropTest,
+        ...propTests.sizePropTest,
+        ...mixPropTests([
+          propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest,
+          propTests.variantPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', props);
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot({ animations: 'disabled' });
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+
+      /**
+       * Full page screenshot is required for the dropdown tests because the dropdown
+       * is rendered outside of the bounding box of the component root element.
+       */
+      test.describe('fullPage', () => {
+        [
+          ...openMultiSelectFieldOptionsTest,
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
+        }) => {
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            // The field with its open dropdown only covers a small part of the page
+            await page.setViewportSize({
+              height: 320,
+              width: 320,
+            });
+
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
+
+            const component = await mount('MultiSelectField/MultiSelectFieldForTest', props);
+
+            if (onBeforeSnapshot) {
+              await onBeforeSnapshot(page, component);
+            }
+
+            const screenshot = await page.screenshot({ animations: 'disabled' });
+            expect(screenshot).toMatchSnapshot({ maxDiffPixelRatio: 0.001 });
+          });
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const testId = 'testId';
+        const testLabel = 'testLabel';
+        const testHelpText = 'testHelpText';
+        const testValidationText = 'testValidationText';
+
+        const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+          helpText: testHelpText,
+          id: testId,
+          label: testLabel,
+          options: baseOptions,
+          validationText: testValidationText,
+        });
+
+        await expect(component.getByRole('combobox')).toHaveAttribute('id', testId);
+        await expect(component.getByText(testHelpText)).toHaveAttribute('id', `${testId}__helpText`);
+        await expect(component.getByText(testValidationText)).toHaveAttribute('id', `${testId}__validationText`);
+        await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
+        await expect(component).toHaveAttribute('id', `${testId}__label`);
+
+        await component.getByRole('combobox').click();
+
+        await expect(component.getByRole('listbox')).toHaveAttribute('id', `${testId}__dropdown`);
+        await expect(component.getByRole('option').first()).toHaveAttribute('id', `${testId}__item__${baseOptions[0].key}`);
+        await expect(component.getByRole('option').last()).toHaveAttribute('id', `${testId}__item__${baseOptions[1].value}`);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount('MultiSelectField/MultiSelectFieldForRefTest', {
+          testRefAttrName: 'test-ref',
+          testRefAttrValue: 'test-ref-value',
+        });
+
+        await expect(component.getByRole('combobox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+
+      test('renders custom translations', async ({
+        mount,
+        page,
+      }) => {
+        const component = await mount('MultiSelectField/MultiSelectFieldForTranslationsTest');
+
+        await expect(component.getByRole('button', { name: 'option1' })).toHaveAttribute('title', 'Remove this tag');
+        await expect(component.getByRole('textbox')).toHaveAttribute('aria-label', 'Search options');
+
+        await component.getByRole('combobox').click();
+        await page.keyboard.type('nonexistent');
+
+        await expect(component.getByText('Nothing found')).toBeVisible();
+      });
+    });
+
+    test.describe('functionality', () => {
+      test.describe('opening', () => {
+        test('opens dropdown on mouse click', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+          // Focus moves to the search input
+          await expect(component.getByRole('textbox')).toBeFocused();
+        });
+
+        ['Enter', 'Space', 'ArrowDown', 'ArrowUp'].forEach((openKey) => {
+          test(`opens dropdown on ${openKey} key press`, async ({ mount }) => {
+            const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+            const combobox = component.getByRole('combobox');
+            await combobox.focus();
+            await combobox.press(openKey);
+
+            await expect(component.getByRole('listbox')).toBeVisible();
+          });
+        });
+
+        test('opens dropdown on character key press', async ({
+          mount,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('o');
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+          await expect(component.getByRole('textbox')).toBeFocused();
+        });
+
+        test('does not open dropdown when disabled', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            disabled: true,
+          });
+
+          // `force` is needed as Playwright refuses to click elements with `aria-disabled="true"`
+          const combobox = component.getByRole('combobox');
+          await combobox.click({ force: true });
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+
+          // Disabled tags are not removable
+          const tag = component.getByRole('button', { name: 'option1' });
+          await tag.click({ force: true });
+          await expect(tag).toBeVisible();
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([]);
+        });
+      });
+
+      test.describe('closing', () => {
+        test('closes dropdown on Escape key press in the search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          const combobox = component.getByRole('combobox');
+          await combobox.click();
+          await expect(component.getByRole('listbox')).toBeVisible();
+
+          await page.keyboard.press('Escape');
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+          await expect(combobox).toBeFocused();
+        });
+
+        test('closes dropdown on Escape key press on a focused option', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('Escape');
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+          await expect(combobox).toBeFocused();
+        });
+
+        test('closes dropdown on Escape key press on a focused tag', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          // Open using keyboard as clicking the center of the input could hit one of the tags
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          await page.keyboard.press('Shift+Tab');
+          await expect(component.getByRole('button', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('Escape');
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+          await expect(combobox).toBeFocused();
+        });
+
+        test('closes dropdown on Escape key press on the input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          // Open using keyboard as clicking the center of the input could hit one of the tags
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          // Walk back from the search input to the input itself
+          await page.keyboard.press('Shift+Tab');
+          await page.keyboard.press('Shift+Tab');
+          await expect(combobox).toBeFocused();
+
+          await page.keyboard.press('Escape');
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+          await expect(combobox).toBeFocused();
+        });
+
+        test('closes dropdown on moving focus out of the field', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForFocusTests');
+
+          await component.getByRole('combobox').first().click();
+          await expect(component.getByRole('listbox')).toBeVisible();
+
+          // Tab moves focus from the search input of the first field to the second field
+          await page.keyboard.press('Tab');
+
+          await expect(component.getByRole('combobox').last()).toBeFocused();
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+        });
+
+        test('closes dropdown on clicking the input', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          const combobox = component.getByRole('combobox');
+          await combobox.click();
+          await expect(component.getByRole('listbox')).toBeVisible();
+
+          // Click next to the caret so neither a tag nor the search input is hit
+          await combobox.click({
+            position: {
+              x: 230,
+              y: 17,
+            },
+          });
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+        });
+
+        test('does not close dropdown on clicking the search input', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await expect(component.getByRole('listbox')).toBeVisible();
+
+          await component.getByRole('textbox').click();
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+        });
+
+        test('closes dropdown on clicking outside the field', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await expect(component.getByRole('listbox')).toBeVisible();
+
+          // Click far away from the component and its dropdown
+          await page.mouse.click(600, 500);
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+        });
+
+        test('clears the search input on closing the dropdown', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          const combobox = component.getByRole('combobox');
+          await combobox.click();
+          await page.keyboard.type('option2');
+          await expect(component.getByRole('option')).toHaveCount(1);
+
+          await page.keyboard.press('Escape');
+          await combobox.press('Enter');
+
+          // All options are displayed again
+          await expect(component.getByRole('option')).toHaveCount(2);
+        });
+      });
+
+      test.describe('selection', () => {
+        test('selects an option on click', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: [],
+          });
+
+          await component.getByRole('combobox').click();
+          await component.getByRole('option', { name: 'option1' }).click();
+
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([['value1']]);
+          await expect(component.getByRole('button', { name: 'option1' })).toBeVisible();
+          // Dropdown stays open to allow selecting more options
+          await expect(component.getByRole('listbox')).toBeVisible();
+        });
+
+        test('unselects a selected option on click', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: ['value1'],
+          });
+
+          await component.getByRole('combobox').click();
+          await component.getByRole('option', { name: 'option1' }).click();
+
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([[]]);
+          await expect(component.getByRole('button', { name: 'option1' })).toHaveCount(0);
+        });
+
+        ['Enter', 'Space'].forEach((selectKey) => {
+          test(`selects an option on ${selectKey} key press`, async ({
+            mount,
+            page,
+          }) => {
+            const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+              initialValue: [],
+            });
+
+            const combobox = component.getByRole('combobox');
+            await combobox.focus();
+            await combobox.press('Enter');
+
+            await expect(component.getByRole('listbox')).toBeVisible();
+
+            await page.keyboard.press('ArrowDown');
+            await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+            await page.keyboard.press(selectKey);
+            await expect.poll(() => component.getSpyValue('onChange')).toEqual([['value1']]);
+          });
+        });
+
+        test('selects an option filtered by search', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: [],
+          });
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.type('option2');
+          await component.getByRole('option', { name: 'option2' }).click();
+
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([['value2']]);
+        });
+
+        test('does not select a disabled option', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: [],
+            options: partiallyDisabledOptions,
+          });
+
+          await component.getByRole('combobox').click();
+
+          // `force` is needed as Playwright refuses to click elements with `aria-disabled="true"`
+          await component.getByRole('option', { name: 'option2' }).click({ force: true });
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([]);
+        });
+      });
+
+      test.describe('navigation', () => {
+        test('moves focus to the first option on ArrowDown key press in the search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.press('ArrowDown');
+
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+        });
+
+        test('moves focus to the last option on ArrowUp key press in the search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.press('ArrowUp');
+
+          await expect(component.getByRole('option', { name: 'option2' })).toBeFocused();
+        });
+
+        test('skips disabled options on arrow key press', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            options: partiallyDisabledOptions,
+          });
+
+          await component.getByRole('combobox').click();
+
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+          // The disabled option2 is skipped
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option3' })).toBeFocused();
+        });
+
+        test('moves focus across group boundaries on arrow key press', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            options: groupedOptions,
+          });
+
+          await component.getByRole('combobox').click();
+
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option2' })).toBeFocused();
+
+          // Focus moves to the first option of the following group
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option3' })).toBeFocused();
+        });
+
+        test('does not move focus past the first or last option', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowUp');
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('ArrowDown');
+          await page.keyboard.press('ArrowDown');
+          await expect(component.getByRole('option', { name: 'option2' })).toBeFocused();
+        });
+
+        test('moves focus through tags to the search input on Tab key press', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            initialValue: ['value1', 'value2'],
+          });
+
+          // Open using keyboard as clicking the center of the input could hit one of the tags
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          // Walk back to the input first
+          await page.keyboard.press('Shift+Tab');
+          await page.keyboard.press('Shift+Tab');
+          await page.keyboard.press('Shift+Tab');
+          await expect(combobox).toBeFocused();
+
+          await page.keyboard.press('Tab');
+          await expect(component.getByRole('button', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('Tab');
+          await expect(component.getByRole('button', { name: 'option2' })).toBeFocused();
+
+          await page.keyboard.press('Tab');
+          await expect(component.getByRole('textbox')).toBeFocused();
+        });
+      });
+
+      test.describe('tags', () => {
+        test('removes a tag on click', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: ['value1'],
+          });
+
+          await component.getByRole('button', { name: 'option1' }).click();
+
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([[]]);
+          await expect(component.getByRole('button', { name: 'option1' })).toHaveCount(0);
+          // Clicking a tag must not open the dropdown
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+        });
+
+        ['Delete', 'Backspace'].forEach((removeKey) => {
+          test(`removes a tag on ${removeKey} key press`, async ({
+            mount,
+            page,
+          }) => {
+            const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+              initialValue: ['value1', 'value2'],
+            });
+
+            // Open using keyboard as clicking the center of the input could hit one of the tags
+            const combobox = component.getByRole('combobox');
+            await combobox.focus();
+            await combobox.press('Enter');
+
+            // Focus moves from the search input back to the last tag
+            await page.keyboard.press('Shift+Tab');
+            await expect(component.getByRole('button', { name: 'option2' })).toBeFocused();
+
+            await page.keyboard.press(removeKey);
+
+            await expect.poll(() => component.getSpyValue('onChange')).toEqual([['value1']]);
+            // Focus moves to the previous tag
+            await expect(component.getByRole('button', { name: 'option1' })).toBeFocused();
+          });
+        });
+
+        test('moves focus to the next tag on removing the first tag', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldSpyForTest', {
+            initialValue: ['value1', 'value2'],
+          });
+
+          // Open using keyboard as clicking the center of the input could hit one of the tags
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          await page.keyboard.press('Shift+Tab');
+          await page.keyboard.press('Shift+Tab');
+          await expect(component.getByRole('button', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('Delete');
+
+          await expect.poll(() => component.getSpyValue('onChange')).toEqual([['value2']]);
+          // There is no previous tag, focus moves to the next one
+          await expect(component.getByRole('button', { name: 'option2' })).toBeFocused();
+        });
+
+        test('moves focus to the last tag on Backspace key press in the empty search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            initialValue: ['value1', 'value2'],
+          });
+
+          // Open using keyboard as clicking the center of the input could hit one of the tags
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          await page.keyboard.press('Backspace');
+
+          await expect(component.getByRole('button', { name: 'option2' })).toBeFocused();
+        });
+      });
+
+      test.describe('search', () => {
+        test('filters options on typing into the search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.type('option2');
+
+          await expect(component.getByRole('option')).toHaveCount(1);
+          await expect(component.getByRole('option', { name: 'option2' })).toBeVisible();
+        });
+
+        test('displays text item when no options match the search', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.type('nonexistent');
+
+          await expect(component.getByRole('option')).toHaveCount(0);
+          await expect(component.getByText('No options')).toBeVisible();
+        });
+
+        test('reopens dropdown on typing into the focused search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest');
+
+          // Removing the only tag with dropdown closed moves focus to the search input
+          await component.getByRole('button', { name: 'option1' }).click();
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+          await expect(component.getByRole('textbox')).toBeFocused();
+
+          await page.keyboard.type('option2');
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+          await expect(component.getByRole('option', { name: 'option2' })).toBeVisible();
+        });
+
+        test('does not render search input when search is disabled', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            searchAlgorithm: null,
+          });
+
+          await component.getByRole('combobox').click();
+
+          await expect(component.getByRole('listbox')).toBeVisible();
+          await expect(component.getByRole('textbox')).toHaveCount(0);
+        });
+
+        test('moves focus to the first option on open when search is disabled', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            searchAlgorithm: null,
+          });
+
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('Enter');
+
+          await expect(component.getByRole('option', { name: 'option1' })).toBeFocused();
+
+          await page.keyboard.press('Escape');
+          await expect(combobox).toBeFocused();
+        });
+
+        test('does not open dropdown on typing a character when search is disabled', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            searchAlgorithm: null,
+          });
+
+          const combobox = component.getByRole('combobox');
+          await combobox.focus();
+          await combobox.press('o');
+
+          await expect(component.getByRole('listbox')).toHaveCount(0);
+        });
+
+        test('moves focus to the input on removing the last tag when search is disabled', async ({ mount }) => {
+          const component = await mount('MultiSelectField/MultiSelectFieldForTest', {
+            searchAlgorithm: null,
+          });
+
+          await component.getByRole('button', { name: 'option1' }).click();
+
+          await expect(component.getByRole('button')).toHaveCount(0);
+          await expect(component.getByRole('combobox')).toBeFocused();
+        });
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount('MultiSelectField/MultiSelectFieldForFormLayoutTests', props);
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot({ animations: 'disabled' });
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-defaultComponentProps-object-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--048b9-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--048b9-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..df2dd6f58
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--048b9-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--29ae6-ationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--29ae6-ationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--29ae6-ationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--3fbc6-dationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--3fbc6-dationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..ffd25366d
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--3fbc6-dationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--4506b-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--4506b-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..98325a90f
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--4506b-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6c549-ionState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6c549-ionState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..a61e03134
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6c549-ionState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6ce0f-ationState-undefined-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6ce0f-ationState-undefined-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..f509fe660
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--6ce0f-ationState-undefined-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7032a-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7032a-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..42fee9f2a
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7032a-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7ef8f-State-string-invalid-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7ef8f-State-string-invalid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..4a170a020
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--7ef8f-State-string-invalid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--809d8-ionState-string-valid-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--809d8-ionState-string-valid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..52005a10d
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--809d8-ionState-string-valid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--90e99-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--90e99-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..d011f94e8
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--90e99-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--bd913-onState-string-valid-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--bd913-onState-string-valid-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..77cb3f059
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--bd913-onState-string-valid-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4bb7-State-string-warning-variant-string-outline-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4bb7-State-string-warning-variant-string-outline-1-chromium-linux.png
new file mode 100644
index 000000000..d6334c50c
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4bb7-State-string-warning-variant-string-outline-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4c6c-dationState-undefined-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4c6c-dationState-undefined-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..3bbafb494
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c4c6c-dationState-undefined-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c9c51-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c9c51-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..d2a61cc55
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--c9c51-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--cf6de-nState-string-warning-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--cf6de-nState-string-warning-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..697fed479
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--cf6de-nState-string-warning-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--e6fdb-nState-string-invalid-variant-string-filled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--e6fdb-nState-string-invalid-variant-string-filled-1-chromium-linux.png
new file mode 100644
index 000000000..b54fa7e4d
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-disabled-boolean--e6fdb-nState-string-invalid-variant-string-filled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png
new file mode 100644
index 000000000..fb1c50a58
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-searchAlgorithm-null-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-searchAlgorithm-null-1-chromium-linux.png
new file mode 100644
index 000000000..1f1947133
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-searchAlgorithm-null-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-large-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-large-1-chromium-linux.png
new file mode 100644
index 000000000..58a6e0a36
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-large-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-small-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-small-1-chromium-linux.png
new file mode 100644
index 000000000..fc1fbfa98
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultOpened-size-string-small-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png
new file mode 100644
index 000000000..58245b5ae
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-defaultPartiallyDisabled-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png
new file mode 100644
index 000000000..c13473b71
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-grouped-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png
new file mode 100644
index 000000000..52df066ad
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-partiallyDisabledGrouped-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchFiltered-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchFiltered-1-chromium-linux.png
new file mode 100644
index 000000000..c5cb49048
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchFiltered-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchWithoutResults-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchWithoutResults-1-chromium-linux.png
new file mode 100644
index 000000000..4da4ea6e9
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-searchWithoutResults-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-selectedOptionFocused-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-selectedOptionFocused-1-chromium-linux.png
new file mode 100644
index 000000000..b919295a9
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullPage-options-shape-selectedOptionFocused-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..30d156fec
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..00d816b2e
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..02fa9d292
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..ceca6328d
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..53f309fd2
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png
new file mode 100644
index 000000000..abd4c51ab
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..6ca7ca3d5
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-node-normal-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-node-normal-1-chromium-linux.png
new file mode 100644
index 000000000..17585f971
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-node-normal-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-string-long-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-string-long-1-chromium-linux.png
new file mode 100644
index 000000000..99bd7f1c1
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-label-string-long-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..98325a90f
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..d011f94e8
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..df2dd6f58
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..2a921db74
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..3b997ff13
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..9361422d6
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..cf688ac68
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..2a921db74
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..98325a90f
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..d011f94e8
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..df2dd6f58
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-1-chromium-linux.png
new file mode 100644
index 000000000..2a921db74
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png
new file mode 100644
index 000000000..3b997ff13
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png
new file mode 100644
index 000000000..9361422d6
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png
new file mode 100644
index 000000000..cf688ac68
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png
new file mode 100644
index 000000000..2a921db74
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-large-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-large-1-chromium-linux.png
new file mode 100644
index 000000000..4a55a480f
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-large-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-medium-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-medium-1-chromium-linux.png
new file mode 100644
index 000000000..57b4de424
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-medium-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-small-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-small-1-chromium-linux.png
new file mode 100644
index 000000000..cbab4b11b
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-base-visual-size-string-small-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png
new file mode 100644
index 000000000..518a29ccf
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png
new file mode 100644
index 000000000..37b1397bd
Binary files /dev/null and b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx-snapshots/MultiSelectField-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ
diff --git a/src/components/MultiSelectField/__tests__/MultiSelectField.story.tsx b/src/components/MultiSelectField/__tests__/MultiSelectField.story.tsx
new file mode 100644
index 000000000..f364b6bfb
--- /dev/null
+++ b/src/components/MultiSelectField/__tests__/MultiSelectField.story.tsx
@@ -0,0 +1,154 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { TranslationsProvider } from '../../../providers/translations';
+import { FormLayoutContext } from '../../FormLayout/FormLayoutContext';
+import { MultiSelectField } from '..';
+import type { MultiSelectFieldProps } from '..';
+import {
+  useSpy,
+  withSpy,
+} from '../../../../tests/playwright/utils/spy';
+import type { StoryProps } from '../../../../tests/playwright';
+
+type MultiSelectFieldForTestProps = Omit<StoryProps<MultiSelectFieldProps, 'label' | 'onChange' | 'options'>, 'value'> & {
+  initialValue?: MultiSelectFieldProps['value'];
+};
+type MultiSelectFieldForRefTestProps = MultiSelectFieldForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type MultiSelectFieldForFormLayoutTestsProps = MultiSelectFieldForTestProps & {
+  layout: 'vertical' | 'horizontal';
+};
+
+const defaultLabel = 'test-label';
+const defaultOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: false,
+    key: 'key2',
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+export const MultiSelectFieldForTest = ({
+  initialValue,
+  label = defaultLabel,
+  onChange,
+  options = defaultOptions,
+  ...props
+}: MultiSelectFieldForTestProps) => {
+  const [value, setValue] = useState<MultiSelectFieldProps['value']>(initialValue ?? ['value1']);
+
+  return (
+    <MultiSelectField
+      label={label}
+      options={options}
+      {...props}
+      onChange={(newValue) => {
+        onChange?.(newValue);
+        setValue(newValue);
+      }}
+      value={value}
+    />
+  );
+};
+
+export const MultiSelectFieldForRefTest = ({
+  label = defaultLabel,
+  options = defaultOptions,
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+}: MultiSelectFieldForRefTestProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState<MultiSelectFieldProps['value']>(['value1']);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <MultiSelectField
+      label={label}
+      options={options}
+      {...props}
+      onChange={(newValue) => setValue(newValue)}
+      ref={ref}
+      value={value}
+    />
+  );
+};
+
+export const MultiSelectFieldForFocusTests = ({
+  ...props
+}: MultiSelectFieldForTestProps) => (
+  <>
+    <MultiSelectFieldForTest
+      {...props}
+    />
+    <MultiSelectFieldForTest
+      label="another-test-label"
+    />
+  </>
+);
+
+export const MultiSelectFieldForTranslationsTest = ({
+  ...props
+}: MultiSelectFieldForTestProps) => (
+  <TranslationsProvider
+    translations={{
+      MultiSelectField: {
+        noOptions: 'Nothing found',
+        removeTag: 'Remove this tag',
+        search: 'Search options',
+      },
+    }}
+  >
+    <MultiSelectFieldForTest
+      {...props}
+    />
+  </TranslationsProvider>
+);
+
+export const MultiSelectFieldSpyForTest = withSpy((props: MultiSelectFieldForTestProps) => {
+  const onChange = useSpy('onChange');
+
+  return (
+    <MultiSelectFieldForTest
+      onChange={onChange}
+      {...props}
+    />
+  );
+});
+
+export const MultiSelectFieldForFormLayoutTests = ({
+  layout,
+  ...props
+}: MultiSelectFieldForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <MultiSelectFieldForTest
+        {...props}
+      />
+      <MultiSelectFieldForTest
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
diff --git a/src/components/MultiSelectField/__tests__/_propTests/openMultiSelectFieldOptionsTest.ts b/src/components/MultiSelectField/__tests__/_propTests/openMultiSelectFieldOptionsTest.ts
new file mode 100644
index 000000000..28065ccfe
--- /dev/null
+++ b/src/components/MultiSelectField/__tests__/_propTests/openMultiSelectFieldOptionsTest.ts
@@ -0,0 +1,142 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+const partiallyDisabledBaseOptions = [
+  {
+    disabled: false,
+    key: 'key1',
+    label: 'option1',
+    value: 'value1',
+  },
+  {
+    disabled: true,
+    key: 'key2',
+    label: 'option2',
+    value: 'value2',
+  },
+];
+
+const groupedOptions = [
+  {
+    key: 'optgroup_key1',
+    label: 'optgroup1',
+    options: [
+      {
+        disabled: false,
+        label: 'option1',
+        value: 'value1',
+      },
+      {
+        disabled: false,
+        label: 'option2',
+        value: 'value2',
+      },
+    ],
+  },
+];
+
+const partiallyDisabledGroupOptions = [
+  ...groupedOptions,
+  {
+    key: 'optgroup_key2',
+    label: 'optgroup2',
+    options: [
+      {
+        disabled: true,
+        label: 'option3',
+        value: 'value3',
+      },
+      {
+        disabled: false,
+        label: 'option4',
+        value: 'value4',
+      },
+    ],
+  },
+];
+
+export const openMultiSelectFieldOptionsTest: PropTests = [
+  {
+    name: 'options:shape[defaultOpened]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: {},
+  },
+  {
+    name: 'options:shape[defaultOpened] & size:string=small',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { size: 'small' },
+  },
+  {
+    name: 'options:shape[defaultOpened] & size:string=large',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { size: 'large' },
+  },
+  {
+    name: 'options:shape[defaultOpened] & searchAlgorithm:null',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { searchAlgorithm: null },
+  },
+  {
+    name: 'options:shape[selectedOptionFocused]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      // Focus the first option which is selected by default
+      await page.keyboard.press('ArrowDown');
+      await page.waitForTimeout(500);
+    },
+    props: {},
+  },
+  {
+    name: 'options:shape[defaultPartiallyDisabled]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: partiallyDisabledBaseOptions },
+  },
+  {
+    name: 'options:shape[grouped]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: groupedOptions },
+  },
+  {
+    name: 'options:shape[partiallyDisabledGrouped]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.waitForTimeout(500);
+    },
+    props: { options: partiallyDisabledGroupOptions },
+  },
+  {
+    name: 'options:shape[searchFiltered]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.keyboard.type('option2');
+      await page.waitForTimeout(500);
+    },
+    props: {},
+  },
+  {
+    name: 'options:shape[searchWithoutResults]',
+    onBeforeSnapshot: async (page, component) => {
+      await component.getByRole('combobox').click();
+      await page.keyboard.type('nonexistent');
+      await page.waitForTimeout(500);
+    },
+    props: {},
+  },
+];
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.module.scss
new file mode 100644
index 000000000..67efb6c73
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.module.scss
@@ -0,0 +1,17 @@
+@use "../../theme";
+
+@layer components.multi-select-field {
+    .root {
+        position: absolute;
+        z-index: theme.$dropdown-z-index;
+        max-height: theme.$dropdown-max-height;
+        overflow: hidden auto;
+        border-width: var(--rui-dimension-border-width-1);
+        border-style: solid;
+        border-color: theme.$dropdown-border-color;
+        border-radius: var(--rui-dimension-radius-1);
+        background-color: theme.$dropdown-background-color;
+        box-shadow: theme.$dropdown-box-shadow;
+        transform: translateY(-1px);
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.tsx
new file mode 100644
index 000000000..dce73b455
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.tsx
@@ -0,0 +1,132 @@
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import { TranslationsContext } from '../../../../providers/translations';
+import { MultiSelectFieldDropdownGroup } from '../MultiSelectFieldDropdownGroup';
+import { MultiSelectFieldDropdownItem } from '../MultiSelectFieldDropdownItem';
+import { MultiSelectFieldDropdownTextItem } from '../MultiSelectFieldDropdownTextItem';
+import type { MultiSelectFieldOption } from '../../MultiSelectField.types';
+import styles from './MultiSelectFieldDropdown.module.scss';
+import type { MultiSelectFieldDropdownProps } from './MultiSelectFieldDropdown.types';
+
+const MultiSelectFieldDropdown: React.FunctionComponent<MultiSelectFieldDropdownProps> = ({
+  autoFocusFirstOptionOnOpen,
+  id,
+  onClose,
+  onItemSelected,
+  options,
+  optionsRef,
+  value,
+}: MultiSelectFieldDropdownProps) => {
+  const translations = useContext(TranslationsContext);
+  const focusedOptionIndexRef = useRef(-1);
+
+  // Index of each option that can receive focus, i.e. of each displayed option that is not disabled,
+  // among all focusable options, in the order of rendering.
+  const focusableOptionIndexes = new Map<MultiSelectFieldOption, number>();
+  options.forEach((option) => {
+    if ('options' in option) {
+      option.options.forEach((groupOption) => {
+        if (!option.disabled && !groupOption.disabled) {
+          focusableOptionIndexes.set(groupOption, focusableOptionIndexes.size);
+        }
+      });
+    } else if (!option.disabled) {
+      focusableOptionIndexes.set(option, focusableOptionIndexes.size);
+    }
+  });
+  const focusableOptionsCount = focusableOptionIndexes.size;
+
+  useEffect(() => {
+    // Drop refs of options that are no longer displayed, e.g. after the options were filtered.
+    optionsRef.current.length = focusableOptionsCount; // eslint-disable-line no-param-reassign
+  }, [focusableOptionsCount, optionsRef]);
+
+  useEffect(() => {
+    if (autoFocusFirstOptionOnOpen) {
+      optionsRef.current[0]?.focus();
+    }
+  }, [autoFocusFirstOptionOnOpen, optionsRef]);
+
+  const renderOption = (option: MultiSelectFieldOption, isWithinGroup: boolean, isGroupDisabled: boolean) => {
+    const isOptionDisabled = isGroupDisabled || option.disabled || false;
+
+    const currentOptionIndex = focusableOptionIndexes.get(option) ?? null;
+
+    return (
+      <MultiSelectFieldDropdownItem
+        disabled={isOptionDisabled}
+        id={id && `${id}__item__${option.key ?? option.value}`}
+        isSelected={value.includes(option.value)}
+        isWithinGroup={isWithinGroup}
+        key={option.key ?? option.value}
+        onCloseDropdown={onClose}
+        onFocus={() => {
+          if (currentOptionIndex != null) {
+            focusedOptionIndexRef.current = currentOptionIndex;
+          }
+        }}
+        onFocusNextDropdownItem={() => {
+          if (focusedOptionIndexRef.current < optionsRef.current.length - 1) {
+            focusedOptionIndexRef.current += 1;
+          }
+
+          optionsRef.current[focusedOptionIndexRef.current]?.focus();
+        }}
+        onFocusPreviousDropdownItem={() => {
+          if (focusedOptionIndexRef.current > 0) {
+            focusedOptionIndexRef.current -= 1;
+          }
+
+          optionsRef.current[focusedOptionIndexRef.current]?.focus();
+        }}
+        onSelectDropdownItem={() => {
+          onItemSelected(option.value);
+        }}
+        ref={(element) => {
+          if (element != null && currentOptionIndex != null) {
+            optionsRef.current[currentOptionIndex] = element; // eslint-disable-line no-param-reassign
+          }
+        }}
+      >
+        {option.label}
+      </MultiSelectFieldDropdownItem>
+    );
+  };
+
+  return (
+    <div
+      aria-multiselectable
+      className={styles.root}
+      id={id && `${id}__dropdown`}
+      role="listbox"
+      tabIndex={-1}
+    >
+      {options.map((option) => {
+        if ('options' in option) {
+          return option.options.length > 0 && (
+            <MultiSelectFieldDropdownGroup
+              key={option.key ?? option.label}
+              label={option.label}
+            >
+              {option.options.map(
+                (groupOption) => renderOption(groupOption, true, option.disabled || false),
+              )}
+            </MultiSelectFieldDropdownGroup>
+          );
+        }
+
+        return renderOption(option, false, false);
+      })}
+      {options.length === 0 && (
+        <MultiSelectFieldDropdownTextItem>
+          {translations.MultiSelectField.noOptions}
+        </MultiSelectFieldDropdownTextItem>
+      )}
+    </div>
+  );
+};
+
+export default MultiSelectFieldDropdown;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.types.ts
new file mode 100644
index 000000000..4c16539d7
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.types.ts
@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type {
+  MultiSelectFieldOption,
+  MultiSelectFieldOptionGroup,
+} from '../../MultiSelectField.types';
+
+/**
+ * Props of the `MultiSelectFieldDropdown` component.
+ */
+export type MultiSelectFieldDropdownProps = {
+  autoFocusFirstOptionOnOpen: boolean;
+  id?: string;
+  onClose: () => void;
+  onItemSelected: (value: MultiSelectFieldOption['value']) => void;
+  options: (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[];
+  optionsRef: RefObject<HTMLDivElement[]>;
+  value: MultiSelectFieldOption['value'][];
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/index.ts
new file mode 100644
index 000000000..7ffa2f9b3
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldDropdown } from './MultiSelectFieldDropdown';
+export type { MultiSelectFieldDropdownProps } from './MultiSelectFieldDropdown.types';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.module.scss
new file mode 100644
index 000000000..f3bfd4b88
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.module.scss
@@ -0,0 +1,17 @@
+@use "../../../../styles/theme/form-fields" as form-theme;
+@use "../../theme";
+
+@layer components.multi-select-field {
+    .label {
+        display: flex;
+        align-items: center;
+        min-width: form-theme.$box-input-min-width;
+        max-width: 100%;
+        height: var(--rui-local-height);
+        padding: 0 var(--rui-local-padding-x);
+        font-weight: theme.$dropdown-group-font-weight;
+        font-size: var(--rui-local-font-size);
+        color: theme.$dropdown-group-color;
+        cursor: default;
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.tsx
new file mode 100644
index 000000000..a7a97ba4a
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './MultiSelectFieldDropdownGroup.module.scss';
+import type { MultiSelectFieldDropdownGroupProps } from './MultiSelectFieldDropdownGroup.types';
+
+const MultiSelectFieldDropdownGroup: React.FunctionComponent<MultiSelectFieldDropdownGroupProps> = ({
+  children,
+  label,
+}: MultiSelectFieldDropdownGroupProps) => (
+  <div
+    aria-label={label}
+    role="group"
+  >
+    <div className={styles.label}>
+      {label}
+    </div>
+    {children}
+  </div>
+);
+
+export default MultiSelectFieldDropdownGroup;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.types.ts
new file mode 100644
index 000000000..82ac770a4
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.types.ts
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Props of the `MultiSelectFieldDropdownGroup` component.
+ */
+export type MultiSelectFieldDropdownGroupProps = {
+  children: ReactNode;
+  label: string;
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/index.ts
new file mode 100644
index 000000000..e2ac4bdd7
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldDropdownGroup } from './MultiSelectFieldDropdownGroup';
+export type { MultiSelectFieldDropdownGroupProps } from './MultiSelectFieldDropdownGroup.types';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.module.scss
new file mode 100644
index 000000000..32b96d006
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.module.scss
@@ -0,0 +1,54 @@
+@use "../../../../styles/theme/form-fields" as form-theme;
+@use "../../theme";
+
+@layer components.multi-select-field {
+    .root {
+        display: flex;
+        align-items: center;
+        min-width: form-theme.$box-input-min-width;
+        max-width: 100%;
+        height: calc(var(--rui-local-height) - 2 * theme.$dropdown-item-gap);
+        padding: 0 calc(var(--rui-local-padding-x) - theme.$dropdown-item-gap);
+        margin: theme.$dropdown-item-gap;
+        font-size: var(--rui-local-font-size);
+        color: theme.$dropdown-item-color;
+        border-radius: theme.$dropdown-item-border-radius;
+        background-color: theme.$dropdown-item-background-color;
+        cursor: pointer;
+
+        &:active {
+            color: theme.$dropdown-item-focus-color;
+            background-color: theme.$dropdown-item-focus-background-color;
+        }
+
+        // `focus-visible` is used so the focus background only shows for keyboard navigation
+        // and does not stick to an option focused by clicking it.
+        &:hover,
+        &:focus-visible {
+            color: theme.$dropdown-item-focus-color;
+            background-color: theme.$dropdown-item-focus-background-color;
+        }
+    }
+
+    .isRootDisabled {
+        opacity: theme.$disabled-opacity;
+        cursor: theme.$disabled-cursor;
+    }
+
+    .isRootSelected {
+        font-weight: theme.$dropdown-item-selected-font-weight;
+        color: theme.$dropdown-item-selected-color;
+        background-color: theme.$dropdown-item-selected-background-color;
+
+        &:active,
+        &:hover,
+        &:focus-visible {
+            color: theme.$dropdown-item-selected-focus-color;
+            background-color: theme.$dropdown-item-selected-focus-background;
+        }
+    }
+
+    .isRootInGroup {
+        padding-inline-start: calc(var(--rui-local-padding-x) * 2 - theme.$dropdown-item-gap);
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.tsx
new file mode 100644
index 000000000..720141086
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { classNames } from '../../../../helpers/classNames';
+import { keyDetected } from '../../_helpers/keyDetected';
+import keyBindings from '../../keyBindings';
+import styles from './MultiSelectFieldDropdownItem.module.scss';
+import type { MultiSelectFieldDropdownItemProps } from './MultiSelectFieldDropdownItem.types';
+
+const MultiSelectFieldDropdownItem = React.forwardRef<HTMLDivElement, MultiSelectFieldDropdownItemProps>((
+  {
+    children,
+    disabled,
+    id,
+    isSelected,
+    isWithinGroup,
+    onCloseDropdown,
+    onFocus,
+    onFocusNextDropdownItem,
+    onFocusPreviousDropdownItem,
+    onSelectDropdownItem,
+  },
+  ref,
+) => (
+  <div
+    aria-disabled={disabled}
+    aria-selected={isSelected}
+    className={classNames(
+      styles.root,
+      disabled && styles.isRootDisabled,
+      isSelected && styles.isRootSelected,
+      isWithinGroup && styles.isRootInGroup,
+    )}
+    id={id}
+    onClick={() => {
+      if (disabled) {
+        return;
+      }
+
+      onSelectDropdownItem();
+    }}
+    onFocus={onFocus}
+    onKeyDown={(event) => {
+      if (disabled) {
+        return;
+      }
+
+      if (keyDetected(event, keyBindings.closeDropdown)) {
+        event.preventDefault();
+        onCloseDropdown();
+      } else if (keyDetected(event, keyBindings.focusNextDropdownItem)) {
+        event.preventDefault();
+        onFocusNextDropdownItem();
+      } else if (keyDetected(event, keyBindings.focusPreviousDropdownItem)) {
+        event.preventDefault();
+        onFocusPreviousDropdownItem();
+      } else if (keyDetected(event, keyBindings.selectDropdownItem)) {
+        event.preventDefault();
+        onSelectDropdownItem();
+      }
+    }}
+    ref={ref}
+    role="option"
+    tabIndex={-1}
+  >
+    {children}
+  </div>
+));
+
+export default MultiSelectFieldDropdownItem;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.types.ts
new file mode 100644
index 000000000..70440272a
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.types.ts
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Props of the `MultiSelectFieldDropdownItem` component.
+ */
+export type MultiSelectFieldDropdownItemProps = {
+  children: ReactNode;
+  disabled: boolean;
+  id?: string;
+  isSelected: boolean;
+  isWithinGroup: boolean;
+  onCloseDropdown: () => void;
+  onFocus: () => void;
+  onFocusNextDropdownItem: () => void;
+  onFocusPreviousDropdownItem: () => void;
+  onSelectDropdownItem: () => void;
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.ts
new file mode 100644
index 000000000..ba28c0049
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldDropdownItem } from './MultiSelectFieldDropdownItem';
+export type { MultiSelectFieldDropdownItemProps } from './MultiSelectFieldDropdownItem.types';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.module.scss
new file mode 100644
index 000000000..2fc7328c0
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.module.scss
@@ -0,0 +1,16 @@
+@use "../../../../styles/theme/form-fields" as form-theme;
+@use "../../theme";
+
+@layer components.multi-select-field {
+    .root {
+        display: flex;
+        align-items: center;
+        min-width: form-theme.$box-input-min-width;
+        max-width: 100%;
+        height: var(--rui-local-height);
+        padding: 0 var(--rui-local-padding-x);
+        font-size: var(--rui-local-font-size);
+        color: theme.$dropdown-text-item-color;
+        cursor: default;
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.tsx
new file mode 100644
index 000000000..833872cef
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './MultiSelectFieldDropdownTextItem.module.scss';
+import type { MultiSelectFieldDropdownTextItemProps } from './MultiSelectFieldDropdownTextItem.types';
+
+const MultiSelectFieldDropdownTextItem: React.FunctionComponent<MultiSelectFieldDropdownTextItemProps> = ({
+  children,
+}: MultiSelectFieldDropdownTextItemProps) => (
+  <div className={styles.root}>
+    {children}
+  </div>
+);
+
+export default MultiSelectFieldDropdownTextItem;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.types.ts
new file mode 100644
index 000000000..2b41803e4
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.types.ts
@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Props of the `MultiSelectFieldDropdownTextItem` component.
+ */
+export type MultiSelectFieldDropdownTextItemProps = {
+  children: ReactNode;
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/index.ts
new file mode 100644
index 000000000..70639f4bb
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldDropdownTextItem } from './MultiSelectFieldDropdownTextItem';
+export type { MultiSelectFieldDropdownTextItemProps } from './MultiSelectFieldDropdownTextItem.types';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.module.scss
new file mode 100644
index 000000000..7c3c71d64
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.module.scss
@@ -0,0 +1,34 @@
+@use "../../../../styles/settings/form-fields" as form-settings;
+
+@layer components.multi-select-field {
+    .root {
+        appearance: none;
+        display: block;
+        flex: 1 0 auto;
+        min-width: 2ch;
+        padding: 0;
+        margin: 0;
+        font-weight: form-settings.$box-input-font-weight;
+        font-size: var(--rui-local-font-size);
+        line-height: form-settings.$box-input-line-height;
+        font-family: form-settings.$box-input-font-family;
+        white-space: nowrap;
+        vertical-align: baseline;
+        color: inherit;
+        border: 0;
+        background-color: transparent;
+
+        &:focus {
+            // No focus ring
+            outline: none;
+        }
+    }
+
+    // Google Chrome inserts span for contenteditable elements
+    .root span {
+        font-weight: form-settings.$box-input-font-weight;
+        font-size: var(--rui-local-font-size);
+        line-height: form-settings.$box-input-line-height;
+        font-family: form-settings.$box-input-font-family;
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.tsx
new file mode 100644
index 000000000..5acc697e1
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.tsx
@@ -0,0 +1,78 @@
+import React, { useContext } from 'react';
+import { TranslationsContext } from '../../../../providers/translations';
+import { keyDetected } from '../../_helpers/keyDetected';
+import keyBindings from '../../keyBindings';
+import styles from './MultiSelectFieldSearchInput.module.scss';
+import type { MultiSelectFieldSearchInputProps } from './MultiSelectFieldSearchInput.types';
+
+const MultiSelectFieldSearchInput = React.forwardRef<HTMLSpanElement, MultiSelectFieldSearchInputProps>((
+  {
+    disabled,
+    id,
+    isFocusable,
+    onCloseDropdown,
+    onFocusFirstDropdownItem,
+    onFocusLastDropdownItem,
+    onFocusLastTag,
+    onSearchInput,
+    searchValue,
+  },
+  ref,
+) => {
+  const translations = useContext(TranslationsContext);
+
+  return (
+    <span
+      // `aria-labelledby` takes precedence when the `id` is set and the search input
+      // is labelled by the field label
+      aria-label={translations.MultiSelectField.search}
+      aria-labelledby={id && `${id}__labelText`}
+      className={styles.root}
+      // `plaintext-only` makes the browser insert pasted or dropped content as plain text
+      // to prevent inserting formatted HTML content into the editable element
+      contentEditable={disabled ? false : 'plaintext-only'}
+      onInput={(event) => {
+        onSearchInput(event.currentTarget.textContent ?? '');
+      }}
+      onKeyDown={(event) => {
+        if (keyDetected(event, keyBindings.closeDropdown)) {
+          event.preventDefault();
+          onCloseDropdown();
+          return;
+        }
+
+        if (keyDetected(event, keyBindings.focusNextDropdownItem)) {
+          event.preventDefault();
+          onFocusFirstDropdownItem();
+          return;
+        }
+
+        if (keyDetected(event, keyBindings.focusPreviousDropdownItem)) {
+          event.preventDefault();
+          onFocusLastDropdownItem();
+          return;
+        }
+
+        if (
+          keyDetected(event, keyBindings.focusLastTagOnEmptySearchInput)
+          && searchValue.length === 0
+        ) {
+          event.preventDefault();
+          onFocusLastTag();
+          return;
+        }
+
+        // Prevent the default behavior of the Enter key which inserts a line break
+        // into the editable element.
+        if (event.key === 'Enter') {
+          event.preventDefault();
+        }
+      }}
+      ref={ref}
+      role="textbox"
+      tabIndex={isFocusable ? 0 : -1}
+    />
+  );
+});
+
+export default MultiSelectFieldSearchInput;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.types.ts
new file mode 100644
index 000000000..cde588870
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.types.ts
@@ -0,0 +1,14 @@
+/**
+ * Props of the `MultiSelectFieldSearchInput` component.
+ */
+export type MultiSelectFieldSearchInputProps = {
+  disabled: boolean;
+  id?: string;
+  isFocusable: boolean;
+  onCloseDropdown: () => void;
+  onFocusFirstDropdownItem: () => void;
+  onFocusLastDropdownItem: () => void;
+  onFocusLastTag: () => void;
+  onSearchInput: (searchValue: string) => void;
+  searchValue: string;
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/index.ts
new file mode 100644
index 000000000..c57396278
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldSearchInput } from './MultiSelectFieldSearchInput';
+export type { MultiSelectFieldSearchInputProps } from './MultiSelectFieldSearchInput.types';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.module.scss b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.module.scss
new file mode 100644
index 000000000..502d008c6
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.module.scss
@@ -0,0 +1,67 @@
+@use "sass:map";
+@use "../../../../styles/settings/form-fields" as form-settings;
+@use "../../../../styles/theme/typography";
+@use "../../theme";
+
+@layer components.multi-select-field {
+    .root {
+        display: inline-flex;
+        gap: theme.$tag-gap;
+        align-items: center;
+        overflow: hidden;
+        font-weight: map.get(typography.$font-weight-values, default);
+
+        // Together with the border, the tag is exactly as tall as the line of the input text
+        // so adding a tag does not grow the height of the input.
+        line-height: calc(#{form-settings.$box-input-line-height} - 2 * #{theme.$tag-border-width});
+        font-family: typography.$font-family-base;
+        white-space: nowrap;
+        border-width: theme.$tag-border-width;
+        border-style: solid;
+        border-radius: theme.$tag-border-radius;
+        cursor: pointer;
+    }
+
+    .isRootDisabled {
+        cursor: theme.$disabled-cursor;
+    }
+
+    .isRootPriorityFilled {
+        color: map.get(theme.$tag-priorities, filled, default, color);
+        border-color: map.get(theme.$tag-priorities, filled, default, border-color);
+        background-color: map.get(theme.$tag-priorities, filled, default, background-color);
+
+        &:hover {
+            color: map.get(theme.$tag-priorities, filled, hover, color);
+            border-color: map.get(theme.$tag-priorities, filled, hover, border-color);
+            background-color: map.get(theme.$tag-priorities, filled, hover, background-color);
+        }
+    }
+
+    .isRootPriorityOutline {
+        color: map.get(theme.$tag-priorities, outline, default, color);
+        border-color: map.get(theme.$tag-priorities, outline, default, border-color);
+        background-color: map.get(theme.$tag-priorities, outline, default, background-color);
+
+        &:hover {
+            color: map.get(theme.$tag-priorities, outline, hover, color);
+            border-color: map.get(theme.$tag-priorities, outline, hover, border-color);
+            background-color: map.get(theme.$tag-priorities, outline, hover, background-color);
+        }
+    }
+
+    .isRootSizeSmall {
+        padding-inline: map.get(theme.$tag-sizes, small, padding-inline);
+        font-size: map.get(theme.$tag-sizes, small, font-size);
+    }
+
+    .isRootSizeMedium {
+        padding-inline: map.get(theme.$tag-sizes, medium, padding-inline);
+        font-size: map.get(theme.$tag-sizes, medium, font-size);
+    }
+
+    .isRootSizeLarge {
+        padding-inline: map.get(theme.$tag-sizes, large, padding-inline);
+        font-size: map.get(theme.$tag-sizes, large, font-size);
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.tsx b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.tsx
new file mode 100644
index 000000000..c0163fdee
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.tsx
@@ -0,0 +1,77 @@
+import React, { useContext } from 'react';
+import { TranslationsContext } from '../../../../providers/translations';
+import { classNames } from '../../../../helpers/classNames';
+import { getRootPriorityClassName } from '../../../_helpers/getRootPriorityClassName';
+import { getRootSizeClassName } from '../../../_helpers/getRootSizeClassName';
+import { keyDetected } from '../../_helpers/keyDetected';
+import keyBindings from '../../keyBindings';
+import styles from './MultiSelectFieldTag.module.scss';
+import type { MultiSelectFieldTagProps } from './MultiSelectFieldTag.types';
+
+const MultiSelectFieldTag = React.forwardRef<HTMLDivElement, MultiSelectFieldTagProps>((
+  {
+    children,
+    disabled,
+    isFocusable,
+    onCloseDropdown,
+    onRemoveTag,
+    priority,
+    size,
+  },
+  ref,
+) => {
+  const translations = useContext(TranslationsContext);
+
+  return (
+    <div
+      aria-disabled={disabled}
+      className={classNames(
+        styles.root,
+        disabled && styles.isRootDisabled,
+        getRootPriorityClassName(styles, priority),
+        getRootSizeClassName(styles, size),
+      )}
+      onClick={(event) => {
+        // Do not let the click toggle the dropdown.
+        event.stopPropagation();
+
+        if (disabled) {
+          return;
+        }
+
+        onRemoveTag();
+      }}
+      onKeyDown={(event) => {
+        if (disabled) {
+          return;
+        }
+
+        if (keyDetected(event, keyBindings.closeDropdown)) {
+          event.preventDefault();
+          onCloseDropdown();
+          return;
+        }
+
+        if (keyDetected(event, keyBindings.removeTag)) {
+          event.preventDefault();
+          onRemoveTag();
+        }
+      }}
+      ref={ref}
+      role="button"
+      tabIndex={(isFocusable && !disabled) ? 0 : -1}
+      title={disabled ? undefined : translations.MultiSelectField.removeTag}
+    >
+      <span>
+        {children}
+      </span>
+      {!disabled && (
+        <span aria-hidden>
+          ×
+        </span>
+      )}
+    </div>
+  );
+});
+
+export default MultiSelectFieldTag;
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.types.ts b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.types.ts
new file mode 100644
index 000000000..01cf439ac
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.types.ts
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { Size } from '../../../../types';
+import type { MultiSelectFieldVariant } from '../../MultiSelectField.types';
+
+/**
+ * Props of the `MultiSelectFieldTag` component.
+ */
+export type MultiSelectFieldTagProps = {
+  children: ReactNode;
+  disabled: boolean;
+  isFocusable: boolean;
+  onCloseDropdown: () => void;
+  onRemoveTag: () => void;
+  priority: MultiSelectFieldVariant;
+  size: Size;
+};
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldTag/index.ts b/src/components/MultiSelectField/_components/MultiSelectFieldTag/index.ts
new file mode 100644
index 000000000..3f868a31c
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/index.ts
@@ -0,0 +1,2 @@
+export { default as MultiSelectFieldTag } from './MultiSelectFieldTag';
+export type { MultiSelectFieldTagProps } from './MultiSelectFieldTag.types';
diff --git a/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.ts b/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.ts
new file mode 100644
index 000000000..1494f9a10
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.ts
@@ -0,0 +1,44 @@
+import { getOptionsLabelMap } from '../getOptionsLabelMap';
+
+describe('getOptionsLabelMap', () => {
+  it('maps values to labels for individual options', () => {
+    const options = [
+      {
+        label: 'Apple',
+        value: 'apple',
+      },
+      {
+        label: 'Banana',
+        value: 'banana',
+      },
+    ];
+
+    expect(getOptionsLabelMap(options)).toEqual({
+      apple: 'Apple',
+      banana: 'Banana',
+    });
+  });
+
+  it('maps values to labels for grouped options', () => {
+    const options = [
+      {
+        label: 'Fruits',
+        options: [
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+        ],
+      },
+      {
+        label: 'Carrot',
+        value: 'carrot',
+      },
+    ];
+
+    expect(getOptionsLabelMap(options)).toEqual({
+      apple: 'Apple',
+      carrot: 'Carrot',
+    });
+  });
+});
diff --git a/src/components/MultiSelectField/_helpers/__tests__/isPrintableCharacterKey.test.ts b/src/components/MultiSelectField/_helpers/__tests__/isPrintableCharacterKey.test.ts
new file mode 100644
index 000000000..6f0b729e8
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/isPrintableCharacterKey.test.ts
@@ -0,0 +1,35 @@
+import { isPrintableCharacterKey } from '../isPrintableCharacterKey';
+
+const keyEvent = (overrides: {
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  key?: string;
+  metaKey?: boolean;
+}) => ({
+  altKey: false,
+  ctrlKey: false,
+  key: 'A',
+  metaKey: false,
+  ...overrides,
+});
+
+describe('isPrintableCharacterKey', () => {
+  it('detects printable characters', () => {
+    expect(isPrintableCharacterKey(keyEvent({ key: 'A' }))).toBe(true);
+    expect(isPrintableCharacterKey(keyEvent({ key: '0' }))).toBe(true);
+    expect(isPrintableCharacterKey(keyEvent({ key: 'Ř' }))).toBe(true);
+    expect(isPrintableCharacterKey(keyEvent({ key: ' ' }))).toBe(true);
+  });
+
+  it('rejects non-printable keys', () => {
+    expect(isPrintableCharacterKey(keyEvent({ key: 'Enter' }))).toBe(false);
+    expect(isPrintableCharacterKey(keyEvent({ key: 'ArrowDown' }))).toBe(false);
+    expect(isPrintableCharacterKey(keyEvent({ key: 'F5' }))).toBe(false);
+  });
+
+  it('rejects characters typed with a modifier key', () => {
+    expect(isPrintableCharacterKey(keyEvent({ ctrlKey: true }))).toBe(false);
+    expect(isPrintableCharacterKey(keyEvent({ altKey: true }))).toBe(false);
+    expect(isPrintableCharacterKey(keyEvent({ metaKey: true }))).toBe(false);
+  });
+});
diff --git a/src/components/MultiSelectField/_helpers/__tests__/keyDetected.test.ts b/src/components/MultiSelectField/_helpers/__tests__/keyDetected.test.ts
new file mode 100644
index 000000000..d3bfb5752
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/keyDetected.test.ts
@@ -0,0 +1,30 @@
+import { keyDetected } from '../keyDetected';
+
+describe('keyDetected', () => {
+  it('detects a key defined as a string', () => {
+    expect(keyDetected({ key: 'Escape' }, ['Escape'])).toBe(true);
+    expect(keyDetected({ key: 'Enter' }, ['Escape'])).toBe(false);
+  });
+
+  it('detects a key in a binding with multiple keys', () => {
+    expect(keyDetected({ key: ' ' }, ['Enter', ' '])).toBe(true);
+  });
+
+  it('detects a key defined as an object with modifiers', () => {
+    const binding = [
+      {
+        key: 'Tab',
+        shiftKey: true,
+      },
+    ];
+
+    expect(keyDetected({
+      key: 'Tab',
+      shiftKey: true,
+    }, binding)).toBe(true);
+    expect(keyDetected({
+      key: 'Tab',
+      shiftKey: false,
+    }, binding)).toBe(false);
+  });
+});
diff --git a/src/components/MultiSelectField/_helpers/getOptionsLabelMap.ts b/src/components/MultiSelectField/_helpers/getOptionsLabelMap.ts
new file mode 100644
index 000000000..a236b795c
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/getOptionsLabelMap.ts
@@ -0,0 +1,26 @@
+import type {
+  MultiSelectFieldOption,
+  MultiSelectFieldOptionGroup,
+} from '../MultiSelectField.types';
+
+/**
+ * Creates a map of option values to option labels.
+ *
+ * Grouped options are flattened, so the map contains the values and labels of all
+ * individual options regardless of grouping.
+ */
+export const getOptionsLabelMap = (options: (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[]) => {
+  const optionsMap: Record<string, string> = {};
+
+  options.forEach((option) => {
+    if ('options' in option) {
+      option.options.forEach((subOption) => {
+        optionsMap[subOption.value] = subOption.label;
+      });
+    } else {
+      optionsMap[option.value] = option.label;
+    }
+  });
+
+  return optionsMap;
+};
diff --git a/src/components/MultiSelectField/_helpers/isPrintableCharacterKey.ts b/src/components/MultiSelectField/_helpers/isPrintableCharacterKey.ts
new file mode 100644
index 000000000..74dfbb200
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/isPrintableCharacterKey.ts
@@ -0,0 +1,11 @@
+import type { KeyboardEvent } from 'react';
+
+/**
+ * Check if the key press event represents typing of a single printable character
+ */
+export const isPrintableCharacterKey = (event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey'>) => (
+  event.key.length === 1
+  && !event.altKey
+  && !event.ctrlKey
+  && !event.metaKey
+);
diff --git a/src/components/MultiSelectField/_helpers/keyDetected.ts b/src/components/MultiSelectField/_helpers/keyDetected.ts
new file mode 100644
index 000000000..1e3f123ff
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/keyDetected.ts
@@ -0,0 +1,15 @@
+import type {
+  KeyBinding,
+  KeyDetectedEvent,
+} from './keyDetected.types';
+
+/**
+ * Check if the key press event matches the key binding
+ */
+export const keyDetected = (event: KeyDetectedEvent, keyBinding: KeyBinding) => keyBinding.some((binding) => {
+  if (typeof binding === 'string') {
+    return event.key === binding;
+  }
+
+  return (Object.keys(binding) as (keyof KeyDetectedEvent)[]).every((key) => event[key] === binding[key]);
+});
diff --git a/src/components/MultiSelectField/_helpers/keyDetected.types.ts b/src/components/MultiSelectField/_helpers/keyDetected.types.ts
new file mode 100644
index 000000000..f46fd3df6
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/keyDetected.types.ts
@@ -0,0 +1,15 @@
+/**
+ * Properties of the key press event that can be matched by a key binding.
+ */
+export type KeyDetectedEvent = {
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  key: string;
+  metaKey?: boolean;
+  shiftKey?: boolean;
+};
+
+/**
+ * Key binding defined as a list of key names or objects with the key press event properties to match.
+ */
+export type KeyBinding = (string | Partial<KeyDetectedEvent>)[];
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.ts b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.ts
new file mode 100644
index 000000000..0da58af81
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.ts
@@ -0,0 +1,31 @@
+import {
+  caseInsensitiveAccentInsensitivePrefixSearch,
+} from '../caseInsensitiveAccentInsensitivePrefixSearch';
+
+const options = [
+  {
+    label: 'Řepa',
+    value: 'beetroot',
+  },
+  {
+    label: 'Rajče',
+    value: 'tomato',
+  },
+  {
+    label: 'Mrkev',
+    value: 'carrot',
+  },
+];
+
+const labelsOf = (results: { label: string }[]) => results.map((option) => option.label);
+
+describe('caseInsensitiveAccentInsensitivePrefixSearch', () => {
+  it('matches prefix ignoring case and accents', () => {
+    expect(labelsOf(caseInsensitiveAccentInsensitivePrefixSearch(options, 'ř'))).toEqual(['Řepa', 'Rajče']);
+    expect(labelsOf(caseInsensitiveAccentInsensitivePrefixSearch(options, 'RE'))).toEqual(['Řepa']);
+  });
+
+  it('does not match substring', () => {
+    expect(labelsOf(caseInsensitiveAccentInsensitivePrefixSearch(options, 'epa'))).toEqual([]);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitiveSubstringSearch.test.ts b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitiveSubstringSearch.test.ts
new file mode 100644
index 000000000..95553dcaa
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitiveSubstringSearch.test.ts
@@ -0,0 +1,31 @@
+import {
+  caseInsensitiveAccentInsensitiveSubstringSearch,
+} from '../caseInsensitiveAccentInsensitiveSubstringSearch';
+
+const options = [
+  {
+    label: 'Řepa',
+    value: 'beetroot',
+  },
+  {
+    label: 'Rajče',
+    value: 'tomato',
+  },
+  {
+    label: 'Mrkev',
+    value: 'carrot',
+  },
+];
+
+const labelsOf = (results: { label: string }[]) => results.map((option) => option.label);
+
+describe('caseInsensitiveAccentInsensitiveSubstringSearch', () => {
+  it('matches substring ignoring case and accents', () => {
+    expect(labelsOf(caseInsensitiveAccentInsensitiveSubstringSearch(options, 'AJC'))).toEqual(['Rajče']);
+    expect(labelsOf(caseInsensitiveAccentInsensitiveSubstringSearch(options, 'e'))).toEqual(['Řepa', 'Rajče', 'Mrkev']);
+  });
+
+  it('returns empty array when nothing matches', () => {
+    expect(labelsOf(caseInsensitiveAccentInsensitiveSubstringSearch(options, 'zzz'))).toEqual([]);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitivePrefixSearch.test.ts b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitivePrefixSearch.test.ts
new file mode 100644
index 000000000..0b9fe073a
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitivePrefixSearch.test.ts
@@ -0,0 +1,32 @@
+import {
+  caseInsensitiveAccentSensitivePrefixSearch,
+} from '../caseInsensitiveAccentSensitivePrefixSearch';
+
+const options = [
+  {
+    label: 'Řepa',
+    value: 'beetroot',
+  },
+  {
+    label: 'Rajče',
+    value: 'tomato',
+  },
+  {
+    label: 'Mrkev',
+    value: 'carrot',
+  },
+];
+
+const labelsOf = (results: { label: string }[]) => results.map((option) => option.label);
+
+describe('caseInsensitiveAccentSensitivePrefixSearch', () => {
+  it('matches prefix ignoring case but considering accents', () => {
+    expect(labelsOf(caseInsensitiveAccentSensitivePrefixSearch(options, 'ř'))).toEqual(['Řepa']);
+    expect(labelsOf(caseInsensitiveAccentSensitivePrefixSearch(options, 'r'))).toEqual(['Rajče']);
+    expect(labelsOf(caseInsensitiveAccentSensitivePrefixSearch(options, 'RAJ'))).toEqual(['Rajče']);
+  });
+
+  it('does not match substring', () => {
+    expect(labelsOf(caseInsensitiveAccentSensitivePrefixSearch(options, 'epa'))).toEqual([]);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitiveSubstringSearch.test.ts b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitiveSubstringSearch.test.ts
new file mode 100644
index 000000000..bd32494f7
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitiveSubstringSearch.test.ts
@@ -0,0 +1,31 @@
+import {
+  caseInsensitiveAccentSensitiveSubstringSearch,
+} from '../caseInsensitiveAccentSensitiveSubstringSearch';
+
+const options = [
+  {
+    label: 'Řepa',
+    value: 'beetroot',
+  },
+  {
+    label: 'Rajče',
+    value: 'tomato',
+  },
+  {
+    label: 'Mrkev',
+    value: 'carrot',
+  },
+];
+
+const labelsOf = (results: { label: string }[]) => results.map((option) => option.label);
+
+describe('caseInsensitiveAccentSensitiveSubstringSearch', () => {
+  it('matches substring ignoring case but considering accents', () => {
+    expect(labelsOf(caseInsensitiveAccentSensitiveSubstringSearch(options, 'epa'))).toEqual(['Řepa']);
+    expect(labelsOf(caseInsensitiveAccentSensitiveSubstringSearch(options, 'AJČ'))).toEqual(['Rajče']);
+  });
+
+  it('does not match when accents are not preserved', () => {
+    expect(labelsOf(caseInsensitiveAccentSensitiveSubstringSearch(options, 'ajc'))).toEqual([]);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/genericSearch.test.ts b/src/components/MultiSelectField/_searchAlgorithms/__tests__/genericSearch.test.ts
new file mode 100644
index 000000000..590cfc0d7
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/genericSearch.test.ts
@@ -0,0 +1,138 @@
+import { genericSearch } from '../genericSearch';
+
+const substringComparator = (optionLabel: string, searchString: string) => optionLabel.includes(searchString);
+
+describe('genericSearch', () => {
+  it('filters individual options by their labels', () => {
+    const options = [
+      {
+        label: 'Apple',
+        value: 'apple',
+      },
+      {
+        label: 'Banana',
+        value: 'banana',
+      },
+      {
+        label: 'Grapefruit',
+        value: 'grapefruit',
+      },
+    ];
+
+    expect(genericSearch(options, 'an', substringComparator)).toEqual([
+      {
+        label: 'Banana',
+        value: 'banana',
+      },
+    ]);
+  });
+
+  it('filters grouped options by the labels of the options inside the groups', () => {
+    const options = [
+      {
+        label: 'Fruits',
+        options: [
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+          {
+            label: 'Banana',
+            value: 'banana',
+          },
+        ],
+      },
+      {
+        label: 'Vegetables',
+        options: [
+          {
+            label: 'Beetroot',
+            value: 'beetroot',
+          },
+          {
+            label: 'Carrot',
+            value: 'carrot',
+          },
+        ],
+      },
+    ];
+
+    expect(genericSearch(options, 'rro', substringComparator)).toEqual([
+      {
+        label: 'Vegetables',
+        options: [
+          {
+            label: 'Carrot',
+            value: 'carrot',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('omits groups with no matching options even if the group label matches', () => {
+    const options = [
+      {
+        label: 'Fruits',
+        options: [
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+        ],
+      },
+    ];
+
+    expect(genericSearch(options, 'Fruits', substringComparator)).toEqual([]);
+  });
+
+  it('does not duplicate a group whose label matches the search string', () => {
+    const options = [
+      {
+        label: 'Apples',
+        options: [
+          {
+            label: 'Apple Golden',
+            value: 'apple-golden',
+          },
+          {
+            label: 'Pear',
+            value: 'pear',
+          },
+        ],
+      },
+    ];
+
+    expect(genericSearch(options, 'Apple', substringComparator)).toEqual([
+      {
+        label: 'Apples',
+        options: [
+          {
+            label: 'Apple Golden',
+            value: 'apple-golden',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('returns empty array when nothing matches', () => {
+    const options = [
+      {
+        label: 'Apple',
+        value: 'apple',
+      },
+      {
+        label: 'Vegetables',
+        options: [
+          {
+            label: 'Carrot',
+            value: 'carrot',
+          },
+        ],
+      },
+    ];
+
+    expect(genericSearch(options, 'zzz', substringComparator)).toEqual([]);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitivePrefixComparator.ts b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitivePrefixComparator.ts
new file mode 100644
index 000000000..d739ed077
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitivePrefixComparator.ts
@@ -0,0 +1,15 @@
+import { removeAccent } from '../_helpers/removeAccent';
+import type { GenericSearchComparator } from '../genericSearch.types';
+
+/**
+ * Compares if the option label starts with the search value, ignoring case and accents.
+ */
+export const caseInsensitiveAccentInsensitivePrefixComparator: GenericSearchComparator = (
+  optionLabel,
+  searchValue,
+) => {
+  const optionLabelTransformed = removeAccent(optionLabel.toLowerCase());
+  const searchValueTransformed = removeAccent(searchValue.toLowerCase());
+
+  return optionLabelTransformed.startsWith(searchValueTransformed);
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitiveSubstringComparator.ts b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitiveSubstringComparator.ts
new file mode 100644
index 000000000..3821e1808
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitiveSubstringComparator.ts
@@ -0,0 +1,15 @@
+import { removeAccent } from '../_helpers/removeAccent';
+import type { GenericSearchComparator } from '../genericSearch.types';
+
+/**
+ * Compares if the option label contains the search value, ignoring case and accents.
+ */
+export const caseInsensitiveAccentInsensitiveSubstringComparator: GenericSearchComparator = (
+  optionLabel,
+  searchValue,
+) => {
+  const optionLabelTransformed = removeAccent(optionLabel.toLowerCase());
+  const searchValueTransformed = removeAccent(searchValue.toLowerCase());
+
+  return optionLabelTransformed.includes(searchValueTransformed);
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitivePrefixComparator.ts b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitivePrefixComparator.ts
new file mode 100644
index 000000000..5e8c5932b
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitivePrefixComparator.ts
@@ -0,0 +1,14 @@
+import type { GenericSearchComparator } from '../genericSearch.types';
+
+/**
+ * Compares if the option label starts with the search value, ignoring case and considering accents.
+ */
+export const caseInsensitiveAccentSensitivePrefixComparator: GenericSearchComparator = (
+  optionLabel,
+  searchValue,
+) => {
+  const optionLabelTransformed = optionLabel.toLowerCase();
+  const searchValueTransformed = searchValue.toLowerCase();
+
+  return optionLabelTransformed.startsWith(searchValueTransformed);
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.ts b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.ts
new file mode 100644
index 000000000..744719ae7
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.ts
@@ -0,0 +1,14 @@
+import type { GenericSearchComparator } from '../genericSearch.types';
+
+/**
+ * Compares if the option label contains the search value, ignoring case and considering accents.
+ */
+export const caseInsensitiveAccentSensitiveSubstringComparator: GenericSearchComparator = (
+  optionLabel,
+  searchValue,
+) => {
+  const optionLabelTransformed = optionLabel.toLowerCase();
+  const searchValueTransformed = searchValue.toLowerCase();
+
+  return optionLabelTransformed.includes(searchValueTransformed);
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_helpers/__tests__/removeAccent.test.ts b/src/components/MultiSelectField/_searchAlgorithms/_helpers/__tests__/removeAccent.test.ts
new file mode 100644
index 000000000..2c21741aa
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_helpers/__tests__/removeAccent.test.ts
@@ -0,0 +1,13 @@
+import { removeAccent } from '../removeAccent';
+
+describe('removeAccent', () => {
+  it.each([
+    ['řepa', 'repa'],
+    ['Škoda', 'Skoda'],
+    ['àéîõü', 'aeiou'],
+    ['no accents', 'no accents'],
+    ['', ''],
+  ])('removes accents from "%s"', (value, expected) => {
+    expect(removeAccent(value)).toBe(expected);
+  });
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_helpers/removeAccent.ts b/src/components/MultiSelectField/_searchAlgorithms/_helpers/removeAccent.ts
new file mode 100644
index 000000000..0cb51a501
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_helpers/removeAccent.ts
@@ -0,0 +1,7 @@
+/**
+ * Removes accents from a string.
+ *
+ * It uses the normalize method to convert the string to its Unicode Normalization Form D (NFD)
+ * and then uses a regular expression to remove all the accents.
+ */
+export const removeAccent = (value: string) => value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.ts b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.ts
new file mode 100644
index 000000000..482ed1f3e
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.ts
@@ -0,0 +1,15 @@
+import type { MultiSelectFieldSearchAlgorithm } from '../MultiSelectField.types';
+import { caseInsensitiveAccentInsensitivePrefixComparator } from './_comparators/caseInsensitiveAccentInsensitivePrefixComparator';
+import { genericSearch } from './genericSearch';
+
+/**
+ * Searches for options where the option label starts with the search string, ignoring case and accents.
+ */
+export const caseInsensitiveAccentInsensitivePrefixSearch: MultiSelectFieldSearchAlgorithm = (
+  options,
+  searchString,
+) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentInsensitivePrefixComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.ts b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.ts
new file mode 100644
index 000000000..fc862cada
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.ts
@@ -0,0 +1,15 @@
+import type { MultiSelectFieldSearchAlgorithm } from '../MultiSelectField.types';
+import { caseInsensitiveAccentInsensitiveSubstringComparator } from './_comparators/caseInsensitiveAccentInsensitiveSubstringComparator';
+import { genericSearch } from './genericSearch';
+
+/**
+ * Searches for options where the option label contains the search string, ignoring case and accents.
+ */
+export const caseInsensitiveAccentInsensitiveSubstringSearch: MultiSelectFieldSearchAlgorithm = (
+  options,
+  searchString,
+) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentInsensitiveSubstringComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.ts b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.ts
new file mode 100644
index 000000000..ee7e7718e
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.ts
@@ -0,0 +1,15 @@
+import type { MultiSelectFieldSearchAlgorithm } from '../MultiSelectField.types';
+import { caseInsensitiveAccentSensitivePrefixComparator } from './_comparators/caseInsensitiveAccentSensitivePrefixComparator';
+import { genericSearch } from './genericSearch';
+
+/**
+ * Searches for options where the option label starts with the search string, ignoring case but considering accents.
+ */
+export const caseInsensitiveAccentSensitivePrefixSearch: MultiSelectFieldSearchAlgorithm = (
+  options,
+  searchString,
+) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentSensitivePrefixComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.ts b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.ts
new file mode 100644
index 000000000..1e18742e6
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.ts
@@ -0,0 +1,15 @@
+import type { MultiSelectFieldSearchAlgorithm } from '../MultiSelectField.types';
+import { caseInsensitiveAccentSensitiveSubstringComparator } from './_comparators/caseInsensitiveAccentSensitiveSubstringComparator';
+import { genericSearch } from './genericSearch';
+
+/**
+ * Searches for options where the option label contains the search string, ignoring case but considering accents.
+ */
+export const caseInsensitiveAccentSensitiveSubstringSearch: MultiSelectFieldSearchAlgorithm = (
+  options,
+  searchString,
+) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentSensitiveSubstringComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/genericSearch.ts b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.ts
new file mode 100644
index 000000000..7d55bf304
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.ts
@@ -0,0 +1,49 @@
+import type {
+  MultiSelectFieldOption,
+  MultiSelectFieldOptionGroup,
+} from '../MultiSelectField.types';
+import type { GenericSearchComparator } from './genericSearch.types';
+
+/**
+ * Generic search algorithm that filters options based on a search string and a comparator function.
+ *
+ * Grouped options are filtered by the labels of the options inside the groups. Groups with
+ * no matching options are omitted.
+ */
+export const genericSearch = (
+  options: (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[],
+  searchString: string,
+  comparator: GenericSearchComparator,
+) => {
+  const result: (MultiSelectFieldOption | MultiSelectFieldOptionGroup)[] = [];
+
+  options
+    .forEach((option) => {
+      // Grouped options are filtered by the labels of the options inside the group
+      if ('options' in option) {
+        const matchingOptions = option.options
+          .filter((groupOption) => comparator(groupOption.label, searchString));
+
+        // If no options match the search string, skip the whole group
+        if (matchingOptions.length === 0) {
+          return;
+        }
+
+        result.push({
+          ...option,
+          options: matchingOptions,
+        });
+
+        return;
+      }
+
+      // Individual options are filtered by their own labels
+      if (!comparator(option.label, searchString)) {
+        return;
+      }
+
+      result.push(option);
+    });
+
+  return result;
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/genericSearch.types.ts b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.types.ts
new file mode 100644
index 000000000..86e96b1dd
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.types.ts
@@ -0,0 +1,4 @@
+/**
+ * Function comparing the option label with the search string.
+ */
+export type GenericSearchComparator = (optionLabel: string, searchString: string) => boolean;
diff --git a/src/components/MultiSelectField/_theme.scss b/src/components/MultiSelectField/_theme.scss
new file mode 100644
index 000000000..3b933917f
--- /dev/null
+++ b/src/components/MultiSelectField/_theme.scss
@@ -0,0 +1,70 @@
+$disabled-cursor: var(--rui-FormField--disabled__cursor);
+$disabled-opacity: var(--rui-FormField--disabled__opacity);
+
+$dropdown-background-color: var(--rui-MultiSelectField__dropdown__background-color);
+$dropdown-border-color: var(--rui-MultiSelectField__dropdown__border-color);
+$dropdown-box-shadow: var(--rui-MultiSelectField__dropdown__box-shadow);
+$dropdown-max-height: var(--rui-MultiSelectField__dropdown__max-height);
+$dropdown-z-index: var(--rui-MultiSelectField__dropdown__z-index);
+
+$dropdown-group-color: var(--rui-MultiSelectField__dropdown-group__color);
+$dropdown-group-font-weight: var(--rui-MultiSelectField__dropdown-group__font-weight);
+
+$dropdown-item-background-color: var(--rui-MultiSelectField__dropdown-item__background-color);
+$dropdown-item-border-radius: var(--rui-MultiSelectField__dropdown-item__border-radius);
+$dropdown-item-color: var(--rui-MultiSelectField__dropdown-item__color);
+$dropdown-item-gap: var(--rui-MultiSelectField__dropdown-item__gap);
+$dropdown-item-selected-background-color: var(--rui-MultiSelectField__dropdown-item--selected__background-color);
+$dropdown-item-selected-color: var(--rui-MultiSelectField__dropdown-item--selected__color);
+$dropdown-item-selected-font-weight: var(--rui-MultiSelectField__dropdown-item--selected__font-weight);
+$dropdown-item-selected-focus-background: var(--rui-MultiSelectField__dropdown-item--selected--focus__background-color);
+$dropdown-item-selected-focus-color: var(--rui-MultiSelectField__dropdown-item--selected--focus__color);
+$dropdown-item-focus-background-color: var(--rui-MultiSelectField__dropdown-item--focus__background-color);
+$dropdown-item-focus-color: var(--rui-MultiSelectField__dropdown-item--focus__color);
+$dropdown-text-item-color: var(--rui-MultiSelectField__dropdown-text-item__color);
+
+$tag-border-width: var(--rui-MultiSelectField__tag__border-width);
+$tag-border-radius: var(--rui-MultiSelectField__tag__border-radius);
+$tag-gap: var(--rui-MultiSelectField__tag__gap);
+
+$tag-priorities: (
+    filled: (
+        default: (
+            background-color: var(--rui-MultiSelectField--filled__tag--default__background-color),
+            border-color: var(--rui-MultiSelectField--filled__tag--default__border-color),
+            color: var(--rui-MultiSelectField--filled__tag--default__color),
+        ),
+        hover: (
+            background-color: var(--rui-MultiSelectField--filled__tag--hover__background-color),
+            border-color: var(--rui-MultiSelectField--filled__tag--hover__border-color),
+            color: var(--rui-MultiSelectField--filled__tag--hover__color),
+        )
+    ),
+    outline: (
+        default: (
+            background-color: var(--rui-MultiSelectField--outline__tag--default__background-color),
+            border-color: var(--rui-MultiSelectField--outline__tag--default__border-color),
+            color: var(--rui-MultiSelectField--outline__tag--default__color),
+        ),
+        hover: (
+            background-color: var(--rui-MultiSelectField--outline__tag--hover__background-color),
+            border-color: var(--rui-MultiSelectField--outline__tag--hover__border-color),
+            color: var(--rui-MultiSelectField--outline__tag--hover__color),
+        )
+    ),
+);
+
+$tag-sizes: (
+    small: (
+        font-size: var(--rui-MultiSelectField--small__tag__font-size),
+        padding-inline: var(--rui-MultiSelectField--small__tag__padding-inline),
+    ),
+    medium: (
+        font-size: var(--rui-MultiSelectField--medium__tag__font-size),
+        padding-inline: var(--rui-MultiSelectField--medium__tag__padding-inline),
+    ),
+    large: (
+        font-size: var(--rui-MultiSelectField--large__tag__font-size),
+        padding-inline: var(--rui-MultiSelectField--large__tag__padding-inline),
+    ),
+);
diff --git a/src/components/MultiSelectField/index.ts b/src/components/MultiSelectField/index.ts
new file mode 100644
index 000000000..b4bc509d5
--- /dev/null
+++ b/src/components/MultiSelectField/index.ts
@@ -0,0 +1,14 @@
+export { default as MultiSelectField } from './MultiSelectField';
+export type {
+  MultiSelectFieldOption,
+  MultiSelectFieldOptionGroup,
+  MultiSelectFieldProps,
+  MultiSelectFieldSearchAlgorithm,
+  MultiSelectFieldVariant,
+} from './MultiSelectField.types';
+export { caseInsensitiveAccentInsensitivePrefixSearch } from './_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch';
+export { caseInsensitiveAccentInsensitiveSubstringSearch } from './_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch';
+export { caseInsensitiveAccentSensitivePrefixSearch } from './_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch';
+export { caseInsensitiveAccentSensitiveSubstringSearch } from './_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch';
+export { genericSearch } from './_searchAlgorithms/genericSearch';
+export type { GenericSearchComparator } from './_searchAlgorithms/genericSearch.types';
diff --git a/src/components/MultiSelectField/keyBindings.ts b/src/components/MultiSelectField/keyBindings.ts
new file mode 100644
index 000000000..a9fb3d4cd
--- /dev/null
+++ b/src/components/MultiSelectField/keyBindings.ts
@@ -0,0 +1,9 @@
+export default {
+  closeDropdown: ['Escape'],
+  focusLastTagOnEmptySearchInput: ['Backspace'],
+  focusNextDropdownItem: ['ArrowDown'],
+  focusPreviousDropdownItem: ['ArrowUp'],
+  openDropdown: ['Enter', ' '],
+  removeTag: ['Delete', 'Backspace'],
+  selectDropdownItem: ['Enter', ' '],
+};
diff --git a/src/hooks/__tests__/useClickOutside.test.tsx b/src/hooks/__tests__/useClickOutside.test.tsx
new file mode 100644
index 000000000..930496aa9
--- /dev/null
+++ b/src/hooks/__tests__/useClickOutside.test.tsx
@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+import {
+  fireEvent,
+  render,
+} from '@testing-library/react';
+import { useClickOutside } from '../useClickOutside';
+
+const ComponentWithClickOutside = ({ callback }: { callback: () => void }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useClickOutside(ref, callback);
+
+  return (
+    <div>
+      <div
+        id="inside"
+        ref={ref}
+      >
+        <button
+          id="inside-child"
+          type="button"
+        >
+          Inside
+        </button>
+      </div>
+      <button
+        id="outside"
+        type="button"
+      >
+        Outside
+      </button>
+    </div>
+  );
+};
+
+describe('useClickOutside', () => {
+  it('calls callback when clicking outside the referenced element', () => {
+    const callback = jest.fn();
+    const { getByTestId } = render(<ComponentWithClickOutside callback={callback} />);
+
+    fireEvent.click(getByTestId('outside'));
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call callback when clicking inside the referenced element', () => {
+    const callback = jest.fn();
+    const { getByTestId } = render(<ComponentWithClickOutside callback={callback} />);
+
+    fireEvent.click(getByTestId('inside'));
+    fireEvent.click(getByTestId('inside-child'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('does not call callback after unmount', () => {
+    const callback = jest.fn();
+    const { unmount } = render(<ComponentWithClickOutside callback={callback} />);
+
+    unmount();
+    fireEvent.click(document.body);
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 000000000..4c89bd90f
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+export const useClickOutside = (
+  ref: RefObject<HTMLElement | null>,
+  callback: () => void,
+) => {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      // `composedPath()` is used to get the real event target even when the element
+      // is rendered inside a shadow DOM, where `event.target` on the document level
+      // is retargeted to the shadow DOM host element.
+      const target = event.composedPath()[0];
+
+      if (ref.current && !ref.current.contains(target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref, callback]);
+};
diff --git a/src/index.ts b/src/index.ts
index b472fa5b4..27505486e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -94,6 +94,22 @@ export type {
   ModalSize,
   ModalTitleProps,
 } from './components/Modal';
+export {
+  caseInsensitiveAccentInsensitivePrefixSearch,
+  caseInsensitiveAccentInsensitiveSubstringSearch,
+  caseInsensitiveAccentSensitivePrefixSearch,
+  caseInsensitiveAccentSensitiveSubstringSearch,
+  genericSearch,
+  MultiSelectField,
+} from './components/MultiSelectField';
+export type {
+  GenericSearchComparator,
+  MultiSelectFieldOption,
+  MultiSelectFieldOptionGroup,
+  MultiSelectFieldProps,
+  MultiSelectFieldSearchAlgorithm,
+  MultiSelectFieldVariant,
+} from './components/MultiSelectField';
 export { Paper } from './components/Paper';
 export type { PaperProps } from './components/Paper';
 export {
diff --git a/src/theme.scss b/src/theme.scss
index a112ff57f..8fbef5570 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1065,6 +1065,54 @@
         --rui-Modal--note__border-color: var(--rui-color-feedback-note);
         --rui-Modal--note__background-color: var(--rui-color-background-note);
 
+        //
+        // MultiSelectField
+        // ================
+
+        // MultiSelectField: Dropdown
+        --rui-MultiSelectField__dropdown__background-color: var(--rui-color-background-basic);
+        --rui-MultiSelectField__dropdown__border-color: var(--rui-color-border-primary-hover);
+        --rui-MultiSelectField__dropdown__box-shadow: var(--rui-shadow-layer-2);
+        --rui-MultiSelectField__dropdown__max-height: 200px;
+        --rui-MultiSelectField__dropdown__z-index: 1000;
+        --rui-MultiSelectField__dropdown-group__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField__dropdown-group__font-weight: var(--rui-font-weight-base);
+        --rui-MultiSelectField__dropdown-item__background-color: var(--rui-color-background-interactive);
+        --rui-MultiSelectField__dropdown-item__border-radius: 0px;
+        --rui-MultiSelectField__dropdown-item__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField__dropdown-item__gap: 0px;
+        --rui-MultiSelectField__dropdown-item--selected__background-color: var(--rui-color-background-selected);
+        --rui-MultiSelectField__dropdown-item--selected__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField__dropdown-item--selected__font-weight: var(--rui-font-weight-bold);
+        --rui-MultiSelectField__dropdown-item--selected--focus__background-color: var(--rui-color-action-selected);
+        --rui-MultiSelectField__dropdown-item--selected--focus__color: var(--rui-color-action-on-selected);
+        --rui-MultiSelectField__dropdown-item--focus__background-color: var(--rui-color-neutral-light-hover);
+        --rui-MultiSelectField__dropdown-item--focus__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField__dropdown-text-item__color: var(--rui-color-text-secondary);
+
+        // MultiSelectField: Tag
+        --rui-MultiSelectField__tag__border-width: var(--rui-dimension-border-width-1);
+        --rui-MultiSelectField__tag__border-radius: var(--rui-dimension-radius-2);
+        --rui-MultiSelectField__tag__gap: var(--rui-dimension-space-1);
+        --rui-MultiSelectField--filled__tag--default__background-color: var(--rui-color-background-base);
+        --rui-MultiSelectField--filled__tag--default__border-color: var(--rui-color-border-primary);
+        --rui-MultiSelectField--filled__tag--default__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField--filled__tag--hover__background-color: var(--rui-color-background-light);
+        --rui-MultiSelectField--filled__tag--hover__border-color: var(--rui-color-border-primary-hover);
+        --rui-MultiSelectField--filled__tag--hover__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField--outline__tag--default__background-color: var(--rui-color-background-interactive);
+        --rui-MultiSelectField--outline__tag--default__border-color: var(--rui-color-border-primary);
+        --rui-MultiSelectField--outline__tag--default__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField--outline__tag--hover__background-color: var(--rui-color-neutral-light-hover);
+        --rui-MultiSelectField--outline__tag--hover__border-color: var(--rui-color-border-primary-hover);
+        --rui-MultiSelectField--outline__tag--hover__color: var(--rui-color-text-primary);
+        --rui-MultiSelectField--small__tag__font-size: var(--rui-font-size-smaller);
+        --rui-MultiSelectField--small__tag__padding-inline: var(--rui-dimension-space-1);
+        --rui-MultiSelectField--medium__tag__font-size: var(--rui-font-size-small);
+        --rui-MultiSelectField--medium__tag__padding-inline: var(--rui-dimension-space-2);
+        --rui-MultiSelectField--large__tag__font-size: var(--rui-font-size-base);
+        --rui-MultiSelectField--large__tag__padding-inline: var(--rui-dimension-space-2);
+
         //
         // Paper
         // =====
diff --git a/src/translations/en.ts b/src/translations/en.ts
index ba0611ac2..dc058104f 100644
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -11,6 +11,11 @@ const en = {
   ModalCloseButton: {
     close: 'Close',
   },
+  MultiSelectField: {
+    noOptions: 'No options',
+    removeTag: 'Remove',
+    search: 'Search',
+  },
   ScrollView: {
     next: 'Next',
     previous: 'Previous',
diff --git a/webpack.config.js b/webpack.config.js
index 45088e7f9..54c577314 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const VisualizerPlugin = require('webpack-visualizer-plugin2');
 
 const MAX_DEVELOPMENT_OUTPUT_SIZE = 3400000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 460000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 520000;
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'production'