diff --git a/mkdocs.yml b/mkdocs.yml
index fa640c9e..67273a22 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 88d30953..7e778f9a 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -49,7 +49,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), [Radio](/components/Radio),
+[FileInputField](/components/FileInputField),
+[MultiSelectField](/components/MultiSelectField), [Radio](/components/Radio),
 [SelectField](/components/SelectField), [TextArea](/components/TextArea),
 [TextField](/components/TextField), and [Toggle](/components/Toggle).
 
@@ -57,6 +58,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 = [
@@ -137,6 +139,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.jsx b/src/components/InputGroup/InputGroup.jsx
index b65cb3a3..241c1417 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/src/components/InputGroup/InputGroup.jsx
@@ -139,6 +139,7 @@ InputGroup.propTypes = {
   /**
    * Supported elements to be grouped:
    * * `Button`
+   * * `MultiSelectField`
    * * `SelectField`
    * * `TextField`
    *
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index 27f11f06..c89855b5 100644
--- a/src/components/InputGroup/README.md
+++ b/src/components/InputGroup/README.md
@@ -64,15 +64,89 @@ 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.
 
+## 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.jsx b/src/components/MultiSelectField/MultiSelectField.jsx
new file mode 100644
index 00000000..a36eba02
--- /dev/null
+++ b/src/components/MultiSelectField/MultiSelectField.jsx
@@ -0,0 +1,472 @@
+import PropTypes from 'prop-types';
+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';
+
+export const MultiSelectField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    onChange,
+    options,
+    renderAsRequired,
+    required,
+    searchAlgorithm,
+    size,
+    validationState,
+    validationText,
+    variant,
+    value,
+    ...restProps
+  } = props;
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const inputRef = useRef(null);
+  const optionsRef = useRef([]);
+  const rootRef = useRef(null);
+  const searchRef = useRef(null);
+  const tagsRef = useRef([]);
+
+  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(
+          resolvedSize,
+          styles,
+        ),
+        getRootValidationStateClassName(validationState, styles),
+        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)) {
+                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>
+  );
+});
+
+MultiSelectField.defaultProps = {
+  disabled: false,
+  fullWidth: false,
+  helpText: undefined,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  renderAsRequired: false,
+  required: false,
+  searchAlgorithm: caseInsensitiveAccentSensitivePrefixSearch,
+  size: 'medium',
+  validationState: undefined,
+  validationText: undefined,
+  variant: 'outline',
+};
+
+MultiSelectField.propTypes = {
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the field will span the full width of its parent.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * 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: PropTypes.node,
+  /**
+   * 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: PropTypes.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: PropTypes.bool,
+  /**
+   * Multi select field label.
+   */
+  label: PropTypes.node.isRequired,
+  /**
+   * Layout of the field.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
+   */
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Callback fired when the selection changes. Called with the new array of selected
+   * option values.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * 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: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        options: PropTypes.arrayOf(PropTypes.shape({
+          disabled: PropTypes.bool,
+          key: PropTypes.string,
+          label: PropTypes.string.isRequired,
+          value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+          ]),
+        })),
+      }),
+    ),
+    PropTypes.arrayOf(PropTypes.shape({
+      disabled: PropTypes.bool,
+      key: PropTypes.string,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+      ]),
+    })),
+  ]).isRequired,
+  /**
+   * If `true`, the input will be rendered as if it was required.
+   */
+  renderAsRequired: PropTypes.bool,
+  /**
+   * If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
+   */
+  required: PropTypes.bool,
+  /**
+   * 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: PropTypes.func,
+  /**
+   * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Alter the field to provide feedback based on validation result.
+   */
+  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
+  /**
+   * 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: PropTypes.node,
+  /**
+   * Array of selected option values.
+   */
+  value: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ])).isRequired,
+  /**
+   * Design variant of the field, further customizable with CSS custom properties.
+   */
+  variant: PropTypes.oneOf(['filled', 'outline']),
+};
+
+export const MultiSelectFieldWithGlobalProps = withGlobalProps(MultiSelectField, 'MultiSelectField');
+
+export default MultiSelectFieldWithGlobalProps;
diff --git a/src/components/MultiSelectField/MultiSelectField.module.scss b/src/components/MultiSelectField/MultiSelectField.module.scss
new file mode 100644
index 00000000..8022f8fd
--- /dev/null
+++ b/src/components/MultiSelectField/MultiSelectField.module.scss
@@ -0,0 +1,146 @@
+@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);
+    }
+
+    .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/README.md b/src/components/MultiSelectField/README.md
new file mode 100644
index 00000000..41b7940e
--- /dev/null
+++ b/src/components/MultiSelectField/README.md
@@ -0,0 +1,1159 @@
+# 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.jsx"></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__color`                          | Text color of dropdown items                         |
+| `--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 00000000..491d5dc1
--- /dev/null
+++ b/src/components/MultiSelectField/__tests__/MultiSelectField.spec.tsx
@@ -0,0 +1,981 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  MultiSelectFieldForTest,
+  MultiSelectFieldForRefTest,
+  MultiSelectFieldForFocusTests,
+  MultiSelectFieldForTranslationsTest,
+  MultiSelectFieldForFormLayoutTests,
+} from './MultiSelectField.story';
+import type { MultiSelectFieldForFormLayoutTestsProps } from './MultiSelectField.story';
+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(
+            <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(
+              <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(
+          <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(
+          <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(
+          <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(
+            <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(
+              <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(
+            <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 }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              disabled
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          // `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();
+          expect(receivedValue).toBeNull();
+        });
+      });
+
+      test.describe('closing', () => {
+        test('closes dropdown on Escape key press in the search input', async ({
+          mount,
+          page,
+        }) => {
+          const component = await mount(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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 }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={[]}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          await component.getByRole('combobox').click();
+          await component.getByRole('option', { name: 'option1' }).click();
+
+          expect(receivedValue).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 }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={['value1']}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          await component.getByRole('combobox').click();
+          await component.getByRole('option', { name: 'option1' }).click();
+
+          expect(receivedValue).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,
+          }) => {
+            let receivedValue = null;
+
+            const component = await mount(
+              <MultiSelectFieldForTest
+                initialValue={[]}
+                onChange={(value) => {
+                  receivedValue = value;
+                }}
+              />,
+            );
+
+            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);
+            expect(receivedValue).toEqual(['value1']);
+          });
+        });
+
+        test('selects an option filtered by search', async ({
+          mount,
+          page,
+        }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={[]}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          await component.getByRole('combobox').click();
+          await page.keyboard.type('option2');
+          await component.getByRole('option', { name: 'option2' }).click();
+
+          expect(receivedValue).toEqual(['value2']);
+        });
+
+        test('does not select a disabled option', async ({ mount }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={[]}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+              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 });
+
+          expect(receivedValue).toBeNull();
+          await expect(component.getByRole('listbox')).toBeVisible();
+        });
+      });
+
+      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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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 }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={['value1']}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          await component.getByRole('button', { name: 'option1' }).click();
+
+          expect(receivedValue).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,
+          }) => {
+            let receivedValue = null;
+
+            const component = await mount(
+              <MultiSelectFieldForTest
+                initialValue={['value1', 'value2']}
+                onChange={(value) => {
+                  receivedValue = value;
+                }}
+              />,
+            );
+
+            // 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);
+
+            expect(receivedValue).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,
+        }) => {
+          let receivedValue = null;
+
+          const component = await mount(
+            <MultiSelectFieldForTest
+              initialValue={['value1', 'value2']}
+              onChange={(value) => {
+                receivedValue = value;
+              }}
+            />,
+          );
+
+          // 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');
+
+          expect(receivedValue).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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <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(
+            <MultiSelectFieldForFormLayoutTests
+              {...props as unknown as MultiSelectFieldForFormLayoutTestsProps}
+            />,
+          );
+
+          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 00000000..57b4de42
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 00000000..df2dd6f5
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 00000000..57b4de42
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 00000000..ffd25366
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 00000000..98325a90
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 00000000..a61e0313
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 00000000..f509fe66
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 00000000..42fee9f2
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 00000000..4a170a02
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 00000000..52005a10
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 00000000..d011f94e
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 00000000..77cb3f05
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 00000000..d6334c50
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 00000000..3bbafb49
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 00000000..d2a61cc5
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 00000000..697fed47
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 00000000..b54fa7e4
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 00000000..fb1c50a5
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 00000000..1f194713
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 00000000..58a6e0a3
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 00000000..fc1fbfa9
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 00000000..58245b5a
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 00000000..c13473b7
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 00000000..52df066a
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 00000000..c5cb4904
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 00000000..4da4ea6e
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 00000000..b919295a
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 00000000..30d156fe
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 00000000..57b4de42
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 00000000..00d816b2
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 00000000..02fa9d29
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 00000000..ceca6328
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 00000000..53f309fd
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 00000000..abd4c51a
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 00000000..6ca7ca3d
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 00000000..57b4de42
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 00000000..17585f97
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 00000000..99bd7f1c
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 00000000..57b4de42
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 00000000..98325a90
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 00000000..d011f94e
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 00000000..df2dd6f5
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 00000000..57b4de42
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 00000000..2a921db7
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 00000000..3b997ff1
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 00000000..9361422d
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 00000000..cf688ac6
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 00000000..2a921db7
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 00000000..57b4de42
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 00000000..98325a90
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 00000000..d011f94e
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 00000000..df2dd6f5
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 00000000..57b4de42
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 00000000..2a921db7
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 00000000..3b997ff1
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 00000000..9361422d
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 00000000..cf688ac6
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 00000000..2a921db7
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 00000000..4a55a480
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 00000000..57b4de42
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 00000000..cbab4b11
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 00000000..518a29cc
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 00000000..37b1397b
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 00000000..516abbda
--- /dev/null
+++ b/src/components/MultiSelectField/__tests__/MultiSelectField.story.tsx
@@ -0,0 +1,138 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { HTMLAttributes } from 'react';
+import { TranslationsProvider } from '../../../providers/translations';
+import { FormLayoutContext } from '../../FormLayout';
+import { MultiSelectField } from '..';
+
+type MultiSelectFieldValue = (string | number)[];
+type MultiSelectFieldForTestProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  // eslint-disable-next-line react/require-default-props
+  initialValue?: MultiSelectFieldValue;
+  // eslint-disable-next-line react/require-default-props
+  onChange?: (value: MultiSelectFieldValue) => void;
+};
+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,
+  onChange,
+  ...props
+}: MultiSelectFieldForTestProps) => {
+  const [value, setValue] = useState<MultiSelectFieldValue>(initialValue ?? ['value1']);
+
+  return (
+    <MultiSelectField
+      label={defaultLabel}
+      options={defaultOptions}
+      {...props}
+      onChange={(newValue: MultiSelectFieldValue) => {
+        onChange?.(newValue);
+        setValue(newValue);
+      }}
+      value={value}
+    />
+  );
+};
+
+export const MultiSelectFieldForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+}: MultiSelectFieldForRefTestProps) => {
+  const ref = useRef<HTMLDivElement>(undefined);
+  const [value, setValue] = useState<MultiSelectFieldValue>(['value1']);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <MultiSelectField
+      label={defaultLabel}
+      options={defaultOptions}
+      {...props}
+      onChange={(newValue: MultiSelectFieldValue) => 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 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 00000000..28065ccf
--- /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.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.jsx
new file mode 100644
index 00000000..57addf13
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/MultiSelectFieldDropdown.jsx
@@ -0,0 +1,175 @@
+import PropTypes from 'prop-types';
+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 styles from './MultiSelectFieldDropdown.module.scss';
+
+const MultiSelectFieldDropdown = ({
+  autoFocusFirstOptionOnOpen,
+  id,
+  onClose,
+  onItemSelected,
+  options,
+  optionsRef,
+  value,
+}) => {
+  const translations = useContext(TranslationsContext);
+  const focusedOptionIndexRef = useRef(-1);
+
+  // Number of options that can receive focus, i.e. all displayed options that are not disabled.
+  const focusableOptionsCount = options.reduce(
+    (count, option) => ('options' in option
+      ? count + option.options.filter((groupOption) => !option.disabled && !groupOption.disabled).length
+      : count + (option.disabled ? 0 : 1)),
+    0,
+  );
+
+  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]);
+
+  // Index of an option among all focusable options, assigned in the order of rendering.
+  let optionIndex = 0;
+
+  const renderOption = (option, isWithinGroup, isGroupDisabled) => {
+    const isOptionDisabled = isGroupDisabled || option.disabled || false;
+
+    let currentOptionIndex = null;
+    if (!isOptionDisabled) {
+      currentOptionIndex = optionIndex;
+      optionIndex += 1;
+    }
+
+    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>
+  );
+};
+
+MultiSelectFieldDropdown.defaultProps = {
+  id: undefined,
+};
+
+MultiSelectFieldDropdown.propTypes = {
+  autoFocusFirstOptionOnOpen: PropTypes.bool.isRequired,
+  id: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        options: PropTypes.arrayOf(PropTypes.shape({
+          disabled: PropTypes.bool,
+          key: PropTypes.string,
+          label: PropTypes.string.isRequired,
+          value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+          ]),
+        })),
+      }),
+    ),
+    PropTypes.arrayOf(PropTypes.shape({
+      disabled: PropTypes.bool,
+      key: PropTypes.string,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+      ]),
+    })),
+  ]).isRequired,
+  optionsRef: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.array.isRequired,
+  }).isRequired,
+  value: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ])).isRequired,
+};
+
+export default MultiSelectFieldDropdown;
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 00000000..67efb6c7
--- /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/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/index.js
new file mode 100644
index 00000000..6a272506
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdown/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldDropdown } from './MultiSelectFieldDropdown';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.jsx
new file mode 100644
index 00000000..11697532
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/MultiSelectFieldDropdownGroup.jsx
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './MultiSelectFieldDropdownGroup.module.scss';
+
+const MultiSelectFieldDropdownGroup = ({
+  children,
+  label,
+}) => (
+  <div
+    aria-label={label}
+    role="group"
+  >
+    <div className={styles.label}>
+      {label}
+    </div>
+    {children}
+  </div>
+);
+
+MultiSelectFieldDropdownGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+};
+
+export default MultiSelectFieldDropdownGroup;
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 00000000..f3bfd4b8
--- /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/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/index.js
new file mode 100644
index 00000000..a7771ad9
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownGroup/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldDropdownGroup } from './MultiSelectFieldDropdownGroup';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.jsx
new file mode 100644
index 00000000..9e69a7a5
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.jsx
@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { classNames } from '../../../../helpers/classNames';
+import { keyDetected } from '../../_helpers/keyDetected';
+import keyBindings from '../../keyBindings';
+import styles from './MultiSelectFieldDropdownItem.module.scss';
+
+const MultiSelectFieldDropdownItem = React.forwardRef((
+  {
+    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>
+));
+
+MultiSelectFieldDropdownItem.defaultProps = {
+  id: undefined,
+};
+
+MultiSelectFieldDropdownItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  id: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  isWithinGroup: PropTypes.bool.isRequired,
+  onCloseDropdown: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onFocusNextDropdownItem: PropTypes.func.isRequired,
+  onFocusPreviousDropdownItem: PropTypes.func.isRequired,
+  onSelectDropdownItem: PropTypes.func.isRequired,
+};
+
+export default MultiSelectFieldDropdownItem;
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 00000000..1ebefd66
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/MultiSelectFieldDropdownItem.module.scss
@@ -0,0 +1,52 @@
+@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-item-color;
+        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);
+    }
+}
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.js
new file mode 100644
index 00000000..0e097c2e
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownItem/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldDropdownItem } from './MultiSelectFieldDropdownItem';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.jsx
new file mode 100644
index 00000000..9b686194
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/MultiSelectFieldDropdownTextItem.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './MultiSelectFieldDropdownTextItem.module.scss';
+
+const MultiSelectFieldDropdownTextItem = ({
+  children,
+}) => (
+  <div className={styles.root}>
+    {children}
+  </div>
+);
+
+MultiSelectFieldDropdownTextItem.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default MultiSelectFieldDropdownTextItem;
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 00000000..2fc7328c
--- /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/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/index.js
new file mode 100644
index 00000000..5644952f
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldDropdownTextItem/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldDropdownTextItem } from './MultiSelectFieldDropdownTextItem';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.jsx
new file mode 100644
index 00000000..c5887814
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/MultiSelectFieldSearchInput.jsx
@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+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';
+
+const MultiSelectFieldSearchInput = React.forwardRef((
+  {
+    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.target.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}
+    />
+  );
+});
+
+MultiSelectFieldSearchInput.defaultProps = {
+  id: undefined,
+};
+
+MultiSelectFieldSearchInput.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  id: PropTypes.string,
+  isFocusable: PropTypes.bool.isRequired,
+  onCloseDropdown: PropTypes.func.isRequired,
+  onFocusFirstDropdownItem: PropTypes.func.isRequired,
+  onFocusLastDropdownItem: PropTypes.func.isRequired,
+  onFocusLastTag: PropTypes.func.isRequired,
+  onSearchInput: PropTypes.func.isRequired,
+  searchValue: PropTypes.string.isRequired,
+};
+
+export default MultiSelectFieldSearchInput;
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 00000000..7c3c71d6
--- /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/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/index.js
new file mode 100644
index 00000000..9a7dbd35
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldSearchInput/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldSearchInput } from './MultiSelectFieldSearchInput';
diff --git a/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.jsx b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.jsx
new file mode 100644
index 00000000..87092aea
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/MultiSelectFieldTag.jsx
@@ -0,0 +1,87 @@
+import PropTypes from 'prop-types';
+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';
+
+const MultiSelectFieldTag = React.forwardRef((
+  {
+    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(priority, styles),
+        getRootSizeClassName(size, styles),
+      )}
+      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>
+  );
+});
+
+MultiSelectFieldTag.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  isFocusable: PropTypes.bool.isRequired,
+  onCloseDropdown: PropTypes.func.isRequired,
+  onRemoveTag: PropTypes.func.isRequired,
+  priority: PropTypes.oneOf(['filled', 'outline']).isRequired,
+  size: PropTypes.oneOf(['small', 'medium', 'large']).isRequired,
+};
+
+export default MultiSelectFieldTag;
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 00000000..502d008c
--- /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/index.js b/src/components/MultiSelectField/_components/MultiSelectFieldTag/index.js
new file mode 100644
index 00000000..f846ad76
--- /dev/null
+++ b/src/components/MultiSelectField/_components/MultiSelectFieldTag/index.js
@@ -0,0 +1 @@
+export { default as MultiSelectFieldTag } from './MultiSelectFieldTag';
diff --git a/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.js b/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.js
new file mode 100644
index 00000000..1494f9a1
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/getOptionsLabelMap.test.js
@@ -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.js b/src/components/MultiSelectField/_helpers/__tests__/isPrintableCharacterKey.test.js
new file mode 100644
index 00000000..a8f7971d
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/isPrintableCharacterKey.test.js
@@ -0,0 +1,30 @@
+import { isPrintableCharacterKey } from '../isPrintableCharacterKey';
+
+const keyEvent = (overrides) => ({
+  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.js b/src/components/MultiSelectField/_helpers/__tests__/keyDetected.test.js
new file mode 100644
index 00000000..d3bfb575
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/__tests__/keyDetected.test.js
@@ -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.js b/src/components/MultiSelectField/_helpers/getOptionsLabelMap.js
new file mode 100644
index 00000000..207735e9
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/getOptionsLabelMap.js
@@ -0,0 +1,26 @@
+/** @import { Option } from '../_searchAlgorithms/genericSearch' */
+
+/**
+ * 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.
+ *
+ * @param {Option[]} options
+ * @returns {Object<string, string>}
+ */
+export const getOptionsLabelMap = (options) => {
+  const optionsMap = {};
+
+  options.forEach((option) => {
+    if (option.options) {
+      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.js b/src/components/MultiSelectField/_helpers/isPrintableCharacterKey.js
new file mode 100644
index 00000000..6ceac3b8
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/isPrintableCharacterKey.js
@@ -0,0 +1,12 @@
+/**
+ * Check if the key press event represents typing of a single printable character
+ *
+ * @param event
+ * @returns {boolean}
+ */
+export const isPrintableCharacterKey = (event) => (
+  event.key.length === 1
+  && !event.altKey
+  && !event.ctrlKey
+  && !event.metaKey
+);
diff --git a/src/components/MultiSelectField/_helpers/keyDetected.js b/src/components/MultiSelectField/_helpers/keyDetected.js
new file mode 100644
index 00000000..6a325239
--- /dev/null
+++ b/src/components/MultiSelectField/_helpers/keyDetected.js
@@ -0,0 +1,13 @@
+/**
+ * Check if the key press event matches the key binding
+ *
+ * @param event
+ * @param keyBinding
+ */
+export const keyDetected = (event, keyBinding) => keyBinding.some((binding) => {
+  if (typeof binding === 'string') {
+    return event.key === binding;
+  }
+
+  return Object.keys(binding).every((key) => event[key] === binding[key]);
+});
diff --git a/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.js b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.js
new file mode 100644
index 00000000..b932966c
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitivePrefixSearch.test.js
@@ -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) => 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.js b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitiveSubstringSearch.test.js
new file mode 100644
index 00000000..ee11dec8
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentInsensitiveSubstringSearch.test.js
@@ -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) => 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.js b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitivePrefixSearch.test.js
new file mode 100644
index 00000000..0619d689
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitivePrefixSearch.test.js
@@ -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) => 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.js b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitiveSubstringSearch.test.js
new file mode 100644
index 00000000..f03bcabc
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/caseInsensitiveAccentSensitiveSubstringSearch.test.js
@@ -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) => 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.js b/src/components/MultiSelectField/_searchAlgorithms/__tests__/genericSearch.test.js
new file mode 100644
index 00000000..68fe56ce
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/__tests__/genericSearch.test.js
@@ -0,0 +1,138 @@
+import { genericSearch } from '../genericSearch';
+
+const substringComparator = (optionLabel, searchString) => 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.js b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitivePrefixComparator.js
new file mode 100644
index 00000000..1229806d
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitivePrefixComparator.js
@@ -0,0 +1,15 @@
+import { removeAccent } from '../_helpers/removeAccent';
+
+/**
+ * Compares if the option label starts with the search value, ignoring case and accents.
+ *
+ * @param {string} optionLabel
+ * @param {string} searchValue
+ * @returns {boolean}
+ */
+export const caseInsensitiveAccentInsensitivePrefixComparator = (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.js b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitiveSubstringComparator.js
new file mode 100644
index 00000000..4a82ab19
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentInsensitiveSubstringComparator.js
@@ -0,0 +1,15 @@
+import { removeAccent } from '../_helpers/removeAccent';
+
+/**
+ * Compares if the option label contains the search value, ignoring case and accents.
+ *
+ * @param {string} optionLabel
+ * @param {string} searchValue
+ * @returns {boolean}
+ */
+export const caseInsensitiveAccentInsensitiveSubstringComparator = (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.js b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitivePrefixComparator.js
new file mode 100644
index 00000000..f04f6a4f
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitivePrefixComparator.js
@@ -0,0 +1,13 @@
+/**
+ * Compares if the option label starts with the search value, ignoring case and considering accents.
+ *
+ * @param {string} optionLabel
+ * @param {string} searchValue
+ * @returns {boolean}
+ */
+export const caseInsensitiveAccentSensitivePrefixComparator = (optionLabel, searchValue) => {
+  const optionLabelTransformed = optionLabel.toLowerCase();
+  const searchValueTransformed = searchValue.toLowerCase();
+
+  return optionLabelTransformed.startsWith(searchValueTransformed);
+};
diff --git a/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.js b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.js
new file mode 100644
index 00000000..5e16a3c0
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_comparators/caseInsensitiveAccentSensitiveSubstringComparator.js
@@ -0,0 +1,13 @@
+/**
+ * Compares if the option label contains the search value, ignoring case and considering accents.
+ *
+ * @param {string} optionLabel
+ * @param {string} searchValue
+ * @returns {boolean}
+ */
+export const caseInsensitiveAccentSensitiveSubstringComparator = (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.js b/src/components/MultiSelectField/_searchAlgorithms/_helpers/__tests__/removeAccent.test.js
new file mode 100644
index 00000000..2c21741a
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_helpers/__tests__/removeAccent.test.js
@@ -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.js b/src/components/MultiSelectField/_searchAlgorithms/_helpers/removeAccent.js
new file mode 100644
index 00000000..749e6366
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/_helpers/removeAccent.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * @param {string} value
+ * @returns {string}
+ */
+export const removeAccent = (value) => value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.js b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.js
new file mode 100644
index 00000000..4a2b7b64
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitivePrefixSearch.js
@@ -0,0 +1,17 @@
+import { caseInsensitiveAccentInsensitivePrefixComparator } from './_comparators/caseInsensitiveAccentInsensitivePrefixComparator';
+import { genericSearch } from './genericSearch';
+
+/** @import { Option } from './genericSearch' */
+
+/**
+ * Searches for options where the option label starts with the search string, ignoring case and accents.
+ *
+ * @param {Option[]} options
+ * @param {string} searchString
+ * @returns {Option[]}
+ */
+export const caseInsensitiveAccentInsensitivePrefixSearch = (options, searchString) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentInsensitivePrefixComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.js b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.js
new file mode 100644
index 00000000..7eedfc61
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentInsensitiveSubstringSearch.js
@@ -0,0 +1,17 @@
+import { caseInsensitiveAccentInsensitiveSubstringComparator } from './_comparators/caseInsensitiveAccentInsensitiveSubstringComparator';
+import { genericSearch } from './genericSearch';
+
+/** @import { Option } from './genericSearch' */
+
+/**
+ * Searches for options where the option label contains the search string, ignoring case and accents.
+ *
+ * @param {Option[]} options
+ * @param {string} searchString
+ * @returns {Option[]}
+ */
+export const caseInsensitiveAccentInsensitiveSubstringSearch = (options, searchString) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentInsensitiveSubstringComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.js b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.js
new file mode 100644
index 00000000..b0213df7
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitivePrefixSearch.js
@@ -0,0 +1,17 @@
+import { caseInsensitiveAccentSensitivePrefixComparator } from './_comparators/caseInsensitiveAccentSensitivePrefixComparator';
+import { genericSearch } from './genericSearch';
+
+/** @import { Option } from './genericSearch' */
+
+/**
+ * Searches for options where the option label starts with the search string, ignoring case but considering accents.
+ *
+ * @param {Option[]} options
+ * @param {string} searchString
+ * @returns {Option[]}
+ */
+export const caseInsensitiveAccentSensitivePrefixSearch = (options, searchString) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentSensitivePrefixComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.js b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.js
new file mode 100644
index 00000000..25ef5c4f
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/caseInsensitiveAccentSensitiveSubstringSearch.js
@@ -0,0 +1,17 @@
+import { caseInsensitiveAccentSensitiveSubstringComparator } from './_comparators/caseInsensitiveAccentSensitiveSubstringComparator';
+import { genericSearch } from './genericSearch';
+
+/** @import { Option } from './genericSearch' */
+
+/**
+ * Searches for options where the option label contains the search string, ignoring case but considering accents.
+ *
+ * @param {Option[]} options
+ * @param {string} searchString
+ * @returns {Option[]}
+ */
+export const caseInsensitiveAccentSensitiveSubstringSearch = (options, searchString) => genericSearch(
+  options,
+  searchString,
+  caseInsensitiveAccentSensitiveSubstringComparator,
+);
diff --git a/src/components/MultiSelectField/_searchAlgorithms/genericSearch.js b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.js
new file mode 100644
index 00000000..d1f85b60
--- /dev/null
+++ b/src/components/MultiSelectField/_searchAlgorithms/genericSearch.js
@@ -0,0 +1,51 @@
+/**
+ * @typedef {Object} Option
+ * @property {string} label - The label of the option.
+ * @property {string} value - The value associated with the option.
+ * @property {Option[]} [options] - Optional nested sub-options.
+ */
+
+/**
+ * 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.
+ *
+ * @param {Option[]} options
+ * @param {string} searchString
+ * @param {function(string, string): boolean} comparator
+ * @returns {Option[]}
+ */
+export const genericSearch = (options, searchString, comparator) => {
+  const result = [];
+
+  options
+    .forEach((option) => {
+      // Grouped options are filtered by the labels of the options inside the group
+      if (option.options) {
+        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/_theme.scss b/src/components/MultiSelectField/_theme.scss
new file mode 100644
index 00000000..17ec8221
--- /dev/null
+++ b/src/components/MultiSelectField/_theme.scss
@@ -0,0 +1,68 @@
+$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-color: var(--rui-MultiSelectField__dropdown-item__color);
+$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.js b/src/components/MultiSelectField/index.js
new file mode 100644
index 00000000..cdce39d9
--- /dev/null
+++ b/src/components/MultiSelectField/index.js
@@ -0,0 +1,6 @@
+export { default as MultiSelectField } from './MultiSelectField';
+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';
diff --git a/src/components/MultiSelectField/keyBindings.js b/src/components/MultiSelectField/keyBindings.js
new file mode 100644
index 00000000..a9fb3d4c
--- /dev/null
+++ b/src/components/MultiSelectField/keyBindings.js
@@ -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.jsx b/src/hooks/__tests__/useClickOutside.test.jsx
new file mode 100644
index 00000000..6c02c168
--- /dev/null
+++ b/src/hooks/__tests__/useClickOutside.test.jsx
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
+import {
+  fireEvent,
+  render,
+} from '@testing-library/react';
+import { useClickOutside } from '../useClickOutside';
+
+const ComponentWithClickOutside = ({ callback }) => {
+  const ref = useRef(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>
+  );
+};
+
+ComponentWithClickOutside.propTypes = {
+  callback: PropTypes.func.isRequired,
+};
+
+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.js b/src/hooks/useClickOutside.js
new file mode 100644
index 00000000..93fa20e2
--- /dev/null
+++ b/src/hooks/useClickOutside.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export const useClickOutside = (
+  ref,
+  callback,
+) => {
+  useEffect(() => {
+    const handleClick = (event) => {
+      // `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)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref, callback]);
+};
diff --git a/src/index.js b/src/index.js
index bde6b831..e1ddbbf1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,6 +33,14 @@ export {
   ModalHeader,
   ModalTitle,
 } from './components/Modal';
+export {
+  caseInsensitiveAccentInsensitivePrefixSearch,
+  caseInsensitiveAccentInsensitiveSubstringSearch,
+  caseInsensitiveAccentSensitivePrefixSearch,
+  caseInsensitiveAccentSensitiveSubstringSearch,
+  genericSearch,
+  MultiSelectField,
+} from './components/MultiSelectField';
 export { Paper } from './components/Paper';
 export {
   Popover,
diff --git a/src/theme.scss b/src/theme.scss
index a112ff57..f213d57d 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1065,6 +1065,52 @@
         --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__color: var(--rui-color-text-primary);
+        --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.js b/src/translations/en.js
index 425cb58d..b615d2f2 100644
--- a/src/translations/en.js
+++ b/src/translations/en.js
@@ -11,6 +11,11 @@ export default {
   ModalCloseButton: {
     close: 'Close',
   },
+  MultiSelectField: {
+    noOptions: 'No options',
+    removeTag: 'Remove',
+    search: 'Search',
+  },
   ScrollView: {
     next: 'Next',
     previous: 'Previous',
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 89aefac3..b522fad2 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.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'