diff --git a/assets/js/base/components/dropdown-selector/index.js b/assets/js/base/components/dropdown-selector/index.js
deleted file mode 100644
index 1a6080106bf..00000000000
--- a/assets/js/base/components/dropdown-selector/index.js
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { useCallback, useRef } from '@wordpress/element';
-import classNames from 'classnames';
-import Downshift from 'downshift';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import DropdownSelectorInput from './input';
-import DropdownSelectorInputWrapper from './input-wrapper';
-import DropdownSelectorMenu from './menu';
-import DropdownSelectorSelectedChip from './selected-chip';
-import DropdownSelectorSelectedValue from './selected-value';
-import './style.scss';
-
-/**
- * Component used to show an input box with a dropdown with suggestions.
- *
- * @param {Object}                        props                         Incoming props for the component.
- * @param {string}                        props.attributeLabel          Label for the attributes.
- * @param {string}                        props.className               CSS class used.
- * @param {import('react').CSSProperties} props.style                   CSS style object used.
- * @param {Array}                         props.checked                 Which items are checked.
- * @param {string}                        props.inputLabel              Label used for the input.
- * @param {boolean}                       props.isDisabled              Whether the input is disabled or not.
- * @param {boolean}                       props.isLoading               Whether the input is loading.
- * @param {boolean}                       props.multiple                Whether multi-select is allowed.
- * @param {function():any}                props.onChange                Function to be called when onChange event fires.
- * @param {Array}                         props.options                 The option values to show in the select.
- * @param {boolean}                       [props.isCaseSensitive=false] Whether the dropdown search should be case-sensitive.
- */
-const DropdownSelector = ( {
-	attributeLabel = '',
-	className,
-	style = {},
-	checked = [],
-	inputLabel = '',
-	isDisabled = false,
-	isLoading = false,
-	multiple = false,
-	onChange = () => {},
-	options = [],
-	isCaseSensitive = false,
-} ) => {
-	const inputRef = useRef( null );
-
-	const classes = classNames(
-		className,
-		'wc-block-dropdown-selector',
-		'wc-block-components-dropdown-selector',
-		{
-			'is-disabled': isDisabled,
-			'is-loading': isLoading,
-		}
-	);
-
-	/**
-	 * State reducer for the downshift component.
-	 * See: https://github.com/downshift-js/downshift#statereducer
-	 */
-	const stateReducer = useCallback(
-		( state, changes ) => {
-			switch ( changes.type ) {
-				case Downshift.stateChangeTypes.keyDownEnter:
-				case Downshift.stateChangeTypes.clickItem:
-					return {
-						...changes,
-						highlightedIndex: state.highlightedIndex,
-						isOpen: multiple,
-						inputValue: '',
-					};
-				case Downshift.stateChangeTypes.blurInput:
-				case Downshift.stateChangeTypes.mouseUp:
-					return {
-						...changes,
-						inputValue: state.inputValue,
-					};
-				default:
-					return changes;
-			}
-		},
-		[ multiple ]
-	);
-
-	return (
-		<Downshift
-			onChange={ onChange }
-			selectedItem={ null }
-			stateReducer={ stateReducer }
-		>
-			{ ( {
-				getInputProps,
-				getItemProps,
-				getLabelProps,
-				getMenuProps,
-				highlightedIndex,
-				inputValue,
-				isOpen,
-				openMenu,
-			} ) => (
-				<div
-					className={ classNames( classes, {
-						'is-multiple': multiple,
-						'is-single': ! multiple,
-						'has-checked': checked.length > 0,
-						'is-open': isOpen,
-					} ) }
-					style={ style }
-				>
-					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
-					<label
-						{ ...getLabelProps( {
-							className: 'screen-reader-text',
-						} ) }
-					>
-						{ inputLabel }
-					</label>
-					<DropdownSelectorInputWrapper
-						isOpen={ isOpen }
-						onClick={ () => inputRef.current.focus() }
-					>
-						{ checked.map( ( value ) => {
-							const option = options.find(
-								( o ) => o.value === value
-							);
-
-							if ( ! option ) {
-								return null;
-							}
-
-							const onRemoveItem = ( val ) => {
-								onChange( val );
-								inputRef.current.focus();
-							};
-
-							return multiple ? (
-								<DropdownSelectorSelectedChip
-									key={ value }
-									onRemoveItem={ onRemoveItem }
-									option={ option }
-								/>
-							) : (
-								<DropdownSelectorSelectedValue
-									key={ value }
-									onClick={ () => inputRef.current.focus() }
-									onRemoveItem={ onRemoveItem }
-									option={ option }
-								/>
-							);
-						} ) }
-						<DropdownSelectorInput
-							checked={ checked }
-							getInputProps={ getInputProps }
-							inputRef={ inputRef }
-							isDisabled={ isDisabled }
-							onFocus={ openMenu }
-							onRemoveItem={ ( val ) => {
-								onChange( val );
-								inputRef.current.focus();
-							} }
-							placeholder={
-								checked.length > 0 && multiple
-									? null
-									: sprintf(
-											/* translators: %s attribute name. */
-											__(
-												'Any %s',
-												'woo-gutenberg-products-block'
-											),
-											attributeLabel
-									  )
-							}
-							tabIndex={
-								// When it's a single selector and there is one element selected,
-								// we make the input non-focusable with the keyboard because it's
-								// visually hidden. The input is still rendered, though, because it
-								// must be possible to focus it when pressing the select value chip.
-								! multiple && checked.length > 0 ? '-1' : '0'
-							}
-							value={ inputValue }
-						/>
-					</DropdownSelectorInputWrapper>
-					{ isOpen && ! isDisabled && (
-						<DropdownSelectorMenu
-							checked={ checked }
-							getItemProps={ getItemProps }
-							getMenuProps={ getMenuProps }
-							highlightedIndex={ highlightedIndex }
-							options={ options.filter( ( option ) => {
-								let optionName = option.name;
-								let nameQuery = inputValue?.trim();
-								if ( ! isCaseSensitive ) {
-									optionName = optionName.toLowerCase();
-									nameQuery = nameQuery?.toLowerCase();
-								}
-								return (
-									! nameQuery ||
-									optionName.includes( nameQuery )
-								);
-							} ) }
-						/>
-					) }
-				</div>
-			) }
-		</Downshift>
-	);
-};
-
-DropdownSelector.propTypes = {
-	attributeLabel: PropTypes.string,
-	checked: PropTypes.array,
-	className: PropTypes.string,
-	inputLabel: PropTypes.string,
-	isDisabled: PropTypes.bool,
-	isLoading: PropTypes.bool,
-	limit: PropTypes.number,
-	onChange: PropTypes.func,
-	options: PropTypes.arrayOf(
-		PropTypes.shape( {
-			label: PropTypes.node.isRequired,
-			value: PropTypes.string.isRequired,
-		} )
-	),
-	isCaseSensitive: PropTypes.bool,
-};
-
-export default DropdownSelector;
diff --git a/assets/js/base/components/dropdown-selector/input-wrapper.js b/assets/js/base/components/dropdown-selector/input-wrapper.js
deleted file mode 100644
index 4391c1e9bb9..00000000000
--- a/assets/js/base/components/dropdown-selector/input-wrapper.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const DropdownSelectorInputWrapper = ( { children, onClick } ) => {
-	return (
-		/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-		<div
-			className="wc-block-dropdown-selector__input-wrapper wc-block-components-dropdown-selector__input-wrapper"
-			onClick={ onClick }
-		>
-			{ children }
-		</div>
-	);
-};
-
-export default DropdownSelectorInputWrapper;
diff --git a/assets/js/base/components/dropdown-selector/input.js b/assets/js/base/components/dropdown-selector/input.js
deleted file mode 100644
index abb3cd73101..00000000000
--- a/assets/js/base/components/dropdown-selector/input.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const DropdownSelectorInput = ( {
-	checked,
-	getInputProps,
-	inputRef,
-	isDisabled,
-	onFocus,
-	onRemoveItem,
-	placeholder,
-	tabIndex,
-	value,
-} ) => {
-	return (
-		<input
-			{ ...getInputProps( {
-				ref: inputRef,
-				className:
-					'wc-block-dropdown-selector__input wc-block-components-dropdown-selector__input',
-				disabled: isDisabled,
-				onFocus,
-				onKeyDown( e ) {
-					if (
-						e.key === 'Backspace' &&
-						! value &&
-						checked.length > 0
-					) {
-						onRemoveItem( checked[ checked.length - 1 ] );
-					}
-				},
-				placeholder,
-				tabIndex,
-			} ) }
-		/>
-	);
-};
-
-export default DropdownSelectorInput;
diff --git a/assets/js/base/components/dropdown-selector/menu.js b/assets/js/base/components/dropdown-selector/menu.js
deleted file mode 100644
index 43c4c25be39..00000000000
--- a/assets/js/base/components/dropdown-selector/menu.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import classNames from 'classnames';
-
-const DropdownSelectorMenu = ( {
-	checked,
-	getItemProps,
-	getMenuProps,
-	highlightedIndex,
-	options,
-} ) => {
-	return (
-		<ul
-			{ ...getMenuProps( {
-				className:
-					'wc-block-dropdown-selector__list wc-block-components-dropdown-selector__list',
-			} ) }
-		>
-			{ options.map( ( option, index ) => {
-				const selected = checked.includes( option.value );
-				return (
-					// eslint-disable-next-line react/jsx-key
-					<li
-						{ ...getItemProps( {
-							key: option.value,
-							className: classNames(
-								'wc-block-dropdown-selector__list-item',
-								'wc-block-components-dropdown-selector__list-item',
-								{
-									'is-selected': selected,
-									'is-highlighted':
-										highlightedIndex === index,
-								}
-							),
-							index,
-							item: option.value,
-							'aria-label': selected
-								? sprintf(
-										/* translators: %s is referring to the filter option being removed. */
-										__(
-											'Remove %s filter',
-											'woo-gutenberg-products-block'
-										),
-										option.name
-								  )
-								: null,
-						} ) }
-					>
-						{ option.label }
-					</li>
-				);
-			} ) }
-		</ul>
-	);
-};
-
-export default DropdownSelectorMenu;
diff --git a/assets/js/base/components/dropdown-selector/selected-chip.js b/assets/js/base/components/dropdown-selector/selected-chip.js
deleted file mode 100644
index 3510451292f..00000000000
--- a/assets/js/base/components/dropdown-selector/selected-chip.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { RemovableChip } from '@woocommerce/base-components/chip';
-
-const DropdownSelectorSelectedChip = ( { onRemoveItem, option } ) => {
-	return (
-		<RemovableChip
-			className="wc-block-dropdown-selector__selected-chip wc-block-components-dropdown-selector__selected-chip"
-			removeOnAnyClick={ true }
-			onRemove={ () => {
-				onRemoveItem( option.value );
-			} }
-			ariaLabel={ sprintf(
-				/* translators: %s is referring to the filter option being removed. */
-				__( 'Remove %s filter', 'woo-gutenberg-products-block' ),
-				option.name
-			) }
-			text={ option.label }
-			radius="large"
-		/>
-	);
-};
-
-export default DropdownSelectorSelectedChip;
diff --git a/assets/js/base/components/dropdown-selector/selected-value.js b/assets/js/base/components/dropdown-selector/selected-value.js
deleted file mode 100644
index 35c34146192..00000000000
--- a/assets/js/base/components/dropdown-selector/selected-value.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-import { Icon, closeSmall } from '@wordpress/icons';
-
-const DropdownSelectorSelectedValue = ( { onClick, onRemoveItem, option } ) => {
-	const labelRef = useRef( null );
-
-	useEffect( () => {
-		labelRef.current.focus();
-	}, [ labelRef ] );
-
-	return (
-		<div className="wc-block-dropdown-selector__selected-value wc-block-components-dropdown-selector__selected-value">
-			<button
-				ref={ labelRef }
-				className="wc-block-dropdown-selector__selected-value__label wc-block-components-dropdown-selector__selected-value__label"
-				onClick={ ( e ) => {
-					e.stopPropagation();
-					onClick( option.value );
-				} }
-				aria-label={ sprintf(
-					/* translators: %s attribute value used in the filter. For example: yellow, green, small, large. */
-					__(
-						'Replace current %s filter',
-						'woo-gutenberg-products-block'
-					),
-					option.name
-				) }
-			>
-				{ option.label }
-			</button>
-			<button
-				className="wc-block-dropdown-selector__selected-value__remove wc-block-components-dropdown-selector__selected-value__remove"
-				onClick={ () => {
-					onRemoveItem( option.value );
-				} }
-				onKeyDown={ ( e ) => {
-					if ( e.key === 'Backspace' || e.key === 'Delete' ) {
-						onRemoveItem( option.value );
-					}
-				} }
-				aria-label={ sprintf(
-					/* translators: %s attribute value used in the filter. For example: yellow, green, small, large. */
-					__( 'Remove %s filter', 'woo-gutenberg-products-block' ),
-					option.name
-				) }
-			>
-				<Icon icon={ closeSmall } size={ 16 } />
-			</button>
-		</div>
-	);
-};
-
-export default DropdownSelectorSelectedValue;
diff --git a/assets/js/base/components/dropdown-selector/style.scss b/assets/js/base/components/dropdown-selector/style.scss
deleted file mode 100644
index 8e314e348f6..00000000000
--- a/assets/js/base/components/dropdown-selector/style.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-// 18px is the minimum input field line-height and 14px is the font-size of
-// the drop down selector elements.
-
-$dropdown-selector-line-height: math.div(18, 14);
-
-.wc-block-components-dropdown-selector {
-	max-width: 300px;
-	position: relative;
-	width: 100%;
-}
-
-.wc-block-components-dropdown-selector__input-wrapper {
-	background: #fff;
-	border: 1px solid $input-border-gray;
-	color: $input-text-active;
-	align-items: center;
-	border-radius: 4px;
-	cursor: text;
-	display: flex;
-	flex-wrap: wrap;
-	padding: 2px $gap-smaller;
-
-	.is-disabled & {
-		background-color: $gray-200;
-	}
-
-	.is-multiple.has-checked > & {
-		padding: 2px $gap-smallest;
-	}
-
-	.is-open > & {
-		border-radius: 4px 4px 0 0;
-	}
-}
-
-.wc-block-components-dropdown-selector__input {
-	@include font-size(small);
-	line-height: $dropdown-selector-line-height;
-	margin: em($gap-small * 0.25) 0;
-	min-width: 0;
-	padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75);
-
-	.is-single & {
-		width: 100%;
-
-		&:hover,
-		&:focus,
-		&:active {
-			outline: 0;
-		}
-	}
-
-	.is-single.has-checked.is-open & {
-		margin-bottom: 1.5px;
-		margin-top: 1.5px;
-	}
-
-	.is-single.has-checked:not(.is-open) & {
-		@include visually-hidden();
-		// Fixes an issue in Firefox that `flex: wrap` in the container was making
-		// this element to still occupy one line.
-		position: absolute;
-	}
-
-	.is-multiple & {
-		flex: 1;
-		min-width: 0;
-	}
-}
-
-// Visually hide the input
-.is-single .wc-block-components-dropdown-selector__input:first-child,
-.is-multiple .wc-block-components-dropdown-selector__input {
-	background: transparent;
-	border: 0;
-
-	&:hover,
-	&:focus,
-	&:active {
-		outline: 0;
-	}
-}
-
-.wc-block-components-dropdown-selector {
-	// Reset <button> styles
-	.wc-block-components-dropdown-selector__selected-value__label,
-	.wc-block-components-dropdown-selector__selected-value__remove {
-		background-color: transparent;
-		border: 0;
-		color: inherit;
-		font-size: inherit;
-		font-weight: inherit;
-		text-transform: initial;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: transparent;
-			text-decoration: none;
-		}
-	}
-
-	.wc-block-components-dropdown-selector__selected-value {
-		@include font-size(small);
-		align-items: center;
-		color: $gray-700;
-		display: inline-flex;
-		margin: em($gap-small * 0.25) 0;
-		padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75);
-		width: 100%;
-	}
-
-	.wc-block-components-dropdown-selector__selected-value__label {
-		flex-grow: 1;
-		line-height: $dropdown-selector-line-height;
-		padding: 0;
-		text-align: left;
-	}
-
-	.wc-block-components-dropdown-selector__selected-value__remove {
-		background-color: transparent;
-		border: 0;
-		display: inline-block;
-		line-height: 1;
-		padding: 0 0 0 0.3em;
-
-		> svg {
-			display: block;
-		}
-	}
-
-	.wc-block-components-dropdown-selector__selected-chip {
-		@include font-size(small);
-		margin-top: em($gap-small * 0.25);
-		margin-bottom: em($gap-small * 0.25);
-		line-height: $dropdown-selector-line-height;
-	}
-}
-
-.wc-block-components-dropdown-selector__list {
-	background-color: #fff;
-	margin: -1px 0 0;
-	padding: 0;
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 100%;
-	max-height: 300px;
-	overflow-y: auto;
-	z-index: 10;
-
-	&:not(:empty) {
-		border: 1px solid #9f9f9f;
-	}
-}
-
-.wc-block-components-dropdown-selector__list-item {
-	@include font-size(small);
-	color: $gray-700;
-	cursor: default;
-	list-style: none;
-	margin: 0;
-	padding: 0 $gap-smallest;
-
-	&.is-selected {
-		background-color: $gray-300;
-	}
-
-	&:hover,
-	&:focus,
-	&.is-highlighted,
-	&:active {
-		background-color: #00669e;
-		color: #fff;
-	}
-}
diff --git a/assets/js/base/components/form-token-field/index.tsx b/assets/js/base/components/form-token-field/index.tsx
new file mode 100644
index 00000000000..72e5b38a871
--- /dev/null
+++ b/assets/js/base/components/form-token-field/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { FormTokenField as WPFormTokenField } from 'wordpress-components';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export interface Props {
+	className?: string;
+	disabled?: boolean;
+	displayTransform?: ( value: string ) => string;
+	label?: string;
+	messages?: Record< string, string >;
+	multiple?: boolean;
+	onChange: ( value: string[] ) => void;
+	placeholder?: string;
+	saveTransform?: ( value: string ) => string;
+	style?: React.CSSProperties;
+	suggestions: string[];
+	validateInput?: ( token: string ) => boolean;
+	value: string[];
+}
+
+const FormTokenField = ( {
+	className,
+	style,
+	suggestions,
+	multiple = true,
+	saveTransform = ( incompleteToken ) =>
+		incompleteToken.trim().replace( /\s/g, '-' ),
+	messages = {},
+	validateInput = ( token: string ) => suggestions.includes( token ),
+	label = '',
+	...props
+}: Props ) => {
+	return (
+		<div
+			className={ classNames(
+				'wc-blocks-components-form-token-field-wrapper',
+				className,
+				{
+					'single-selection': ! multiple,
+				}
+			) }
+			style={ style }
+		>
+			<WPFormTokenField
+				label={ label }
+				__experimentalExpandOnFocus={ true }
+				__experimentalShowHowTo={ false }
+				__experimentalValidateInput={ validateInput }
+				saveTransform={ saveTransform }
+				maxLength={ multiple ? undefined : 1 }
+				suggestions={ suggestions }
+				messages={ messages }
+				{ ...props }
+			/>
+		</div>
+	);
+};
+
+export default FormTokenField;
diff --git a/assets/js/base/components/form-token-field/stories/index.tsx b/assets/js/base/components/form-token-field/stories/index.tsx
new file mode 100644
index 00000000000..6f6684593eb
--- /dev/null
+++ b/assets/js/base/components/form-token-field/stories/index.tsx
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormTokenField, { Props } from '..';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/FormTokenField',
+	argTypes: {},
+	component: FormTokenField,
+} as Meta< Props >;
+
+const Template: Story< Props > = ( args ) => {
+	const [ selected, setSelected ] = useState< string[] >( [] );
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selected }
+			onChange={ ( tokens ) => setSelected( tokens ) }
+		/>
+	);
+};
+
+const suggestions = [ 'foo', 'bar', 'baz' ];
+
+export const Default = Template.bind( {} );
+Default.args = {
+	suggestions,
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	disabled: true,
+};
diff --git a/assets/js/base/components/form-token-field/style.scss b/assets/js/base/components/form-token-field/style.scss
new file mode 100644
index 00000000000..99039401dfb
--- /dev/null
+++ b/assets/js/base/components/form-token-field/style.scss
@@ -0,0 +1,91 @@
+@import "./vendor";
+
+.wc-blocks-components-form-token-field-wrapper {
+	border-color: $gray-600;
+
+	.components-visually-hidden,
+	.components-form-token-field__label {
+		@include visually-hidden();
+	}
+
+	.components-form-token-field,
+	.components-form-token-field__input-container {
+		border-color: inherit;
+		box-sizing: border-box;
+		margin-bottom: 0;
+	}
+
+	.components-form-token-field__input-container {
+		border-radius: 0;
+		box-shadow: none;
+		position: relative;
+
+		input[type="text"].components-form-token-field__input {
+			min-height: 30px;
+		}
+	}
+
+	.components-form-token-field__remove-token.components-button,
+	.components-form-token-field__token-text {
+		background: $gray-200;
+	}
+
+	.components-form-token-field__remove-token {
+		border: none;
+	}
+
+	.components-form-token-field__suggestions-list {
+		background-color: $white;
+		border: 1px solid $gray-600;
+		border-width: 0 1px 1px;
+		left: -1px;
+		margin: 1px 0 0;
+		position: absolute;
+		right: -1px;
+		top: 100%;
+		z-index: 50;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	.components-form-token-field__suggestion {
+		padding: 8px;
+
+		&.is-selected {
+			background: $gray-100;
+			color: $gray-800;
+		}
+	}
+
+	&.single-selection {
+		.components-form-token-field__token {
+			margin-right: 0;
+			position: relative;
+			width: 100%;
+		}
+
+		.components-form-token-field__remove-token.components-button,
+		.components-form-token-field__token-text {
+			background: transparent;
+		}
+
+		.components-form-token-field__token-text {
+			padding-left: 4px;
+			width: 100%;
+		}
+
+		.components-form-token-field__token + input[type="text"].components-form-token-field__input {
+			position: absolute;
+		}
+
+		.is-active .components-form-token-field__token + input[type="text"].components-form-token-field__input {
+			border: 1px solid $gray-600;
+			margin: 0 2px 4px;
+			padding: 0 5px;
+			position: static;
+		}
+
+	}
+}
diff --git a/assets/js/base/components/form-token-field/vendor.scss b/assets/js/base/components/form-token-field/vendor.scss
new file mode 100644
index 00000000000..6a4ec9cb5e7
--- /dev/null
+++ b/assets/js/base/components/form-token-field/vendor.scss
@@ -0,0 +1,12 @@
+// Including style of popover in bin/webpack-entries.js breaks the editor.
+// We need to import and scope the popover style under the
+// wc-blocks-attribute-filter-popover class to prevent conflict.
+// Tooltip must be under the same scope to work properly.
+.wc-blocks-components-form-token-field-wrapper {
+	/* stylelint-disable no-invalid-position-at-import-rule */
+	@import "@wordpress/base-styles/breakpoints";
+	@import "@wordpress/base-styles/mixins";
+	@import "wordpress-components/src/popover/style";
+	@import "wordpress-components/src/tooltip/style";
+	/* stylelint-enable no-invalid-position-at-import-rule */
+}
diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
index ffed229e329..f02a0a81b26 100644
--- a/assets/js/blocks/attribute-filter/block.tsx
+++ b/assets/js/blocks/attribute-filter/block.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { speak } from '@wordpress/a11y';
 import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
 import {
 	useCollection,
@@ -12,13 +11,11 @@ import {
 } from '@woocommerce/base-context/hooks';
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
-import DropdownSelector from '@woocommerce/base-components/dropdown-selector';
 import Label from '@woocommerce/base-components/filter-element-label';
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Notice } from 'wordpress-components';
-import classNames from 'classnames';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import { getQueryArgs, removeQueryArgs } from '@wordpress/url';
 import {
@@ -33,6 +30,9 @@ import {
 	PREFIX_QUERY_ARG_FILTER_TYPE,
 	PREFIX_QUERY_ARG_QUERY_TYPE,
 } from '@woocommerce/utils';
+import { difference } from 'lodash';
+import FormTokenField from '@woocommerce/base-components/form-token-field';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -48,6 +48,7 @@ import {
 	areAllFiltersRemoved,
 	isQueryArgsEqual,
 	parseTaxonomyToGenerateURL,
+	formatSlug,
 } from './utils';
 import { BlockAttributes, DisplayOption } from './types';
 
@@ -206,6 +207,7 @@ const AttributeFilterBlock = ( {
 				const count = filteredTerm ? filteredTerm.count : 0;
 
 				return {
+					formattedValue: formatSlug( term.slug ),
 					value: term.slug,
 					name: decodeEntities( term.name ),
 					label: (
@@ -214,6 +216,9 @@ const AttributeFilterBlock = ( {
 							count={ blockAttributes.showCounts ? count : null }
 						/>
 					),
+					textLabel: blockAttributes.showCounts
+						? `${ decodeEntities( term.name ) } (${ count })`
+						: decodeEntities( term.name ),
 				};
 			} )
 			.filter( ( option ): option is DisplayOption => !! option );
@@ -374,75 +379,11 @@ const AttributeFilterBlock = ( {
 	 */
 	const onChange = useCallback(
 		( checkedValue ) => {
-			const getFilterNameFromValue = ( filterValue: string ) => {
-				const result = displayedOptions.find(
-					( option ) => option.value === filterValue
-				);
-
-				if ( result ) {
-					return result.name;
-				}
-			};
-
-			const announceFilterChange = ( {
-				filterAdded,
-				filterRemoved,
-			}: {
-				filterAdded?: string | null;
-				filterRemoved?: string | null;
-			} ) => {
-				const filterAddedName = filterAdded
-					? getFilterNameFromValue( filterAdded )
-					: null;
-				const filterRemovedName = filterRemoved
-					? getFilterNameFromValue( filterRemoved )
-					: null;
-				if ( filterAddedName && filterRemovedName ) {
-					speak(
-						sprintf(
-							/* translators: %1$s and %2$s are attribute terms (for example: 'red', 'blue', 'large'...). */
-							__(
-								'%1$s filter replaced with %2$s.',
-								'woo-gutenberg-products-block'
-							),
-							filterAddedName,
-							filterRemovedName
-						)
-					);
-				} else if ( filterAddedName ) {
-					speak(
-						sprintf(
-							/* translators: %s attribute term (for example: 'red', 'blue', 'large'...) */
-							__(
-								'%s filter added.',
-								'woo-gutenberg-products-block'
-							),
-							filterAddedName
-						)
-					);
-				} else if ( filterRemovedName ) {
-					speak(
-						sprintf(
-							/* translators: %s attribute term (for example: 'red', 'blue', 'large'...) */
-							__(
-								'%s filter removed.',
-								'woo-gutenberg-products-block'
-							),
-							filterRemovedName
-						)
-					);
-				}
-			};
-
 			const previouslyChecked = checked.includes( checkedValue );
 			let newChecked;
 
 			if ( ! multiple ) {
 				newChecked = previouslyChecked ? [] : [ checkedValue ];
-				const filterAdded = previouslyChecked ? null : checkedValue;
-				const filterRemoved =
-					checked.length === 1 ? checked[ 0 ] : null;
-				announceFilterChange( { filterAdded, filterRemoved } );
 			} else {
 				newChecked = checked.filter(
 					( value ) => value !== checkedValue
@@ -451,15 +392,12 @@ const AttributeFilterBlock = ( {
 				if ( ! previouslyChecked ) {
 					newChecked.push( checkedValue );
 					newChecked.sort();
-					announceFilterChange( { filterAdded: checkedValue } );
-				} else {
-					announceFilterChange( { filterRemoved: checkedValue } );
 				}
 			}
 
 			updateCheckedFilters( newChecked );
 		},
-		[ checked, displayedOptions, multiple, updateCheckedFilters ]
+		[ checked, multiple, updateCheckedFilters ]
 	);
 
 	/**
@@ -570,19 +508,94 @@ const AttributeFilterBlock = ( {
 				className={ `wc-block-attribute-filter style-${ blockAttributes.displayStyle }` }
 			>
 				{ blockAttributes.displayStyle === 'dropdown' ? (
-					<DropdownSelector
-						attributeLabel={ attributeObject.label }
-						checked={ checked }
-						className={ classNames(
-							'wc-block-attribute-filter-dropdown',
-							borderProps.className
-						) }
+					<FormTokenField
+						className={ classNames( borderProps.className, {
+							'single-selection': ! multiple,
+						} ) }
 						style={ { ...borderProps.style, borderStyle: 'none' } }
-						inputLabel={ blockAttributes.heading }
-						isLoading={ isLoading }
-						multiple={ multiple }
-						onChange={ onChange }
-						options={ displayedOptions }
+						suggestions={ displayedOptions
+							.filter(
+								( option ) => ! checked.includes( option.value )
+							)
+							.map( ( option ) => option.formattedValue ) }
+						disabled={ isDisabled }
+						placeholder={ sprintf(
+							/* translators: %s attribute name. */
+							__( 'Any %s', 'woo-gutenberg-products-block' ),
+							attributeObject.label
+						) }
+						onChange={ ( tokens: string[] ) => {
+							if ( ! multiple && tokens.length > 1 ) {
+								tokens = [ tokens[ tokens.length - 1 ] ];
+							}
+
+							tokens = tokens.map( ( token ) => {
+								const displayOption = displayedOptions.find(
+									( option ) =>
+										option.formattedValue === token
+								);
+
+								return displayOption
+									? displayOption.value
+									: token;
+							} );
+
+							const added = difference( tokens, checked );
+
+							if ( added.length === 1 ) {
+								return onChange( added[ 0 ] );
+							}
+
+							const removed = difference( checked, tokens );
+							if ( removed.length === 1 ) {
+								onChange( removed[ 0 ] );
+							}
+						} }
+						value={ checked }
+						displayTransform={ ( value: string ) => {
+							const result = displayedOptions.find( ( option ) =>
+								[
+									option.value,
+									option.formattedValue,
+								].includes( value )
+							);
+							return result ? result.textLabel : value;
+						} }
+						saveTransform={ formatSlug }
+						messages={ {
+							added: sprintf(
+								/* translators: %s is the attribute label. */
+								__(
+									'%s filter added.',
+									'woo-gutenberg-products-block'
+								),
+								attributeObject.label
+							),
+							removed: sprintf(
+								/* translators: %s is the attribute label. */
+								__(
+									'%s filter removed.',
+									'woo-gutenberg-products-block'
+								),
+								attributeObject.label
+							),
+							remove: sprintf(
+								/* translators: %s is the attribute label. */
+								__(
+									'Remove %s filter.',
+									'woo-gutenberg-products-block'
+								),
+								attributeObject.label.toLocaleLowerCase()
+							),
+							__experimentalInvalid: sprintf(
+								/* translators: %s is the attribute label. */
+								__(
+									'Invalid %s filter.',
+									'woo-gutenberg-products-block'
+								),
+								attributeObject.label.toLocaleLowerCase()
+							),
+						} }
 					/>
 				) : (
 					<CheckboxList
diff --git a/assets/js/blocks/attribute-filter/index.tsx b/assets/js/blocks/attribute-filter/index.tsx
index b1d7ebddad4..450565fdd3a 100644
--- a/assets/js/blocks/attribute-filter/index.tsx
+++ b/assets/js/blocks/attribute-filter/index.tsx
@@ -34,7 +34,7 @@ registerBlockType( metadata, {
 		...metadata.supports,
 		...( isFeaturePluginBuild() && {
 			__experimentalBorder: {
-				radius: true,
+				radius: false,
 				color: true,
 				width: false,
 			},
diff --git a/assets/js/blocks/attribute-filter/preview.tsx b/assets/js/blocks/attribute-filter/preview.tsx
index 0a8f177d637..2007a249273 100644
--- a/assets/js/blocks/attribute-filter/preview.tsx
+++ b/assets/js/blocks/attribute-filter/preview.tsx
@@ -6,18 +6,24 @@ import Label from '@woocommerce/base-components/filter-element-label';
 export const previewOptions = [
 	{
 		value: 'preview-1',
+		formattedValue: 'preview-1',
 		name: 'Blue',
 		label: <Label name="Blue" count={ 3 } />,
+		textLabel: 'Blue (3)',
 	},
 	{
 		value: 'preview-2',
+		formattedValue: 'preview-2',
 		name: 'Green',
 		label: <Label name="Green" count={ 3 } />,
+		textLabel: 'Green (3)',
 	},
 	{
 		value: 'preview-3',
+		formattedValue: 'preview-3',
 		name: 'Red',
 		label: <Label name="Red" count={ 2 } />,
+		textLabel: 'Red (2)',
 	},
 ];
 
diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
index 2866091088f..7e025a827ab 100644
--- a/assets/js/blocks/attribute-filter/style.scss
+++ b/assets/js/blocks/attribute-filter/style.scss
@@ -14,6 +14,12 @@
 		gap: $gap;
 		border-radius: inherit;
 		border-color: inherit;
+		align-items: flex-start;
+
+		.wc-block-components-filter-submit-button {
+			height: 36px;
+			line-height: 1;
+		}
 	}
 
 	.wc-block-attribute-filter-list {
@@ -32,22 +38,16 @@
 		}
 	}
 
-	.wc-block-attribute-filter-dropdown {
+	.wc-blocks-components-form-token-field-wrapper {
 		flex-grow: 1;
 		max-width: unset;
 		width: 0;
-		border-radius: inherit;
-		border-color: inherit;
 	}
 
+
 	.is-single .wc-block-attribute-filter-list-count,
-	.wc-block-dropdown-selector .wc-block-dropdown-selector__list .wc-block-attribute-filter-list-count {
+	.wc-blocks-components-form-token-field-wrapper .wc-block-attribute-filter-list-count {
 		opacity: 0.6;
 	}
 
-	.wc-block-components-dropdown-selector__input-wrapper {
-		height: 100%;
-		border-radius: inherit;
-		border-color: inherit;
-	}
 }
diff --git a/assets/js/blocks/attribute-filter/types.ts b/assets/js/blocks/attribute-filter/types.ts
index b7b89fbf519..3c7fc609e0a 100644
--- a/assets/js/blocks/attribute-filter/types.ts
+++ b/assets/js/blocks/attribute-filter/types.ts
@@ -24,4 +24,6 @@ export interface DisplayOption {
 	value: string;
 	name: string;
 	label: JSX.Element;
+	textLabel: string;
+	formattedValue: string;
 }
diff --git a/assets/js/blocks/attribute-filter/utils.ts b/assets/js/blocks/attribute-filter/utils.ts
index f0b4fc57408..78d7363d9cf 100644
--- a/assets/js/blocks/attribute-filter/utils.ts
+++ b/assets/js/blocks/attribute-filter/utils.ts
@@ -92,3 +92,11 @@ export const isQueryArgsEqual = (
 		true
 	);
 };
+
+export const formatSlug = ( slug: string ) =>
+	slug
+		.trim()
+		.replace( /\s/g, '-' )
+		.replace( /_/g, '-' )
+		.replace( /-+/g, '-' )
+		.replace( /[^a-zA-Z0-9-]/g, '' );
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index b6e9d239f15..714dc064608 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -96,6 +96,8 @@ const entries = {
 			'./node_modules/wordpress-components/src/snackbar/style.scss',
 		'combobox-control-style':
 			'./node_modules/wordpress-components/src/combobox-control/style.scss',
+		'form-token-field-style':
+			'./node_modules/wordpress-components/src/form-token-field/style.scss',
 
 		'general-style': glob.sync( './assets/**/*.scss', {
 			ignore: [