@automattic/vip-design-system 2.19.0 → 2.20.0

package/build/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
  */
 import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
 import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
+import { FormAutocompleteMultiselectInlineChip } from './FormAutocompleteMultiselectInlineChip';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
@@ -22,6 +23,14 @@ import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
 
+const escapeHtml = str =>
+	String( str )
+		.replace( /&/g, '&' )
+		.replace( /</g, '&lt;' )
+		.replace( />/g, '&gt;' )
+		.replace( /"/g, '&quot;' )
+		.replace( /'/g, '&#039;' );
+
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
 	backgroundColor: 'layer.2',
@@ -96,7 +105,33 @@ const searchIconStyles = {
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+const inlineChipsContainerStyles = {
+	...defaultStyles,
+	display: 'flex',
+	flexWrap: 'wrap',
+	alignItems: 'center',
+	p: 1,
+	pr: 0,
+	position: 'relative',
+	'& .autocomplete__input': {
+		...defaultStyles[ '& .autocomplete__input' ],
+		lineHeight: '24px',
+		minHeight: '24px',
+	},
+	'&:focus-within': theme => theme.outline,
+	'& .autocomplete__wrapper': {
+		position: 'static',
+		width: '100%',
+		lineHeight: '24px',
+		minHeight: '24px',
+		'& .autocomplete__dropdown-arrow-down': {
+			top: 'unset',
+			bottom: '6px',
+		},
+	},
+};
+
+const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -156,10 +191,12 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			listType = 'button',
 			initialValue = [],
 			allowCustom = false,
+			variant,
 			...props
 		},
 		forwardRef
 	) => {
+		const isInlineChips = variant === 'inline-chips';
 		const OPTION_ACTION = {
 			ADD: 'add',
 			REMOVE: 'remove',
@@ -175,6 +212,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			option: null,
 			index: -1,
 		} );
+		const justSelectedRef = React.useRef( false );
 		let debounceTimeout;
 		forwardRef = forwardRef || React.createRef();
 
@@ -283,11 +321,44 @@ const FormAutocompleteMultiselect = React.forwardRef(
 					data = handleTypeChange( query );
 				}
 				const optionForDisplay = data?.map( option => optionLabel( option ) );
-				populateResults(
-					optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
-				);
+				if ( isInlineChips ) {
+					populateResults( optionForDisplay );
+				} else {
+					populateResults(
+						optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
+					);
+				}
+			},
+			[ autoFilter, isDirty, isInlineChips, onInputChange, options, selectedOptions ]
+		);
+
+		const onValueChangeInlineChips = useCallback(
+			inputValue => {
+				if ( ! inputValue ) {
+					return;
+				}
+				justSelectedRef.current = true;
+				if ( selectedOptions.includes( inputValue ) ) {
+					unselectValue( inputValue, selectedOptions.indexOf( inputValue ) );
+				} else {
+					setCurrentOption( { action: OPTION_ACTION.ADD, option: inputValue } );
+					setSelectedOptions( [ ...selectedOptions, inputValue ] );
+				}
 			},
-			[ autoFilter, isDirty, onInputChange, options, selectedOptions ]
+			[ selectedOptions, unselectValue ]
+		);
+
+		const inlineChipsTemplates = useMemo(
+			() => ( {
+				suggestion: suggestion => {
+					const isSelected = selectedOptions.includes( suggestion );
+					const check = isSelected ? '&#10003;' : '';
+					return `<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;flex-shrink:0">${ check }</span>${ escapeHtml(
+						suggestion
+					) }</span>`;
+				},
+			} ),
+			[ selectedOptions ]
 		);
 
 		useEffect( () => {
@@ -332,7 +403,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				selectedOptions,
 				selectedOptions.map( option => option?.label || option )
 			);
-			resetInputState();
+			if ( isInlineChips && justSelectedRef.current && forwardRef?.current ) {
+				justSelectedRef.current = false;
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: '',
+					menuOpen: true,
+				} );
+			} else {
+				resetInputState();
+			}
 		}, [ selectedOptions ] );
 
 		// Update the select status for screen readers
@@ -340,15 +420,65 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			if ( currentOption.action === OPTION_ACTION.ADD ) {
 				setAddStatus( `${ currentOption.option } added to the list.` );
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
-			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
-				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' )?.focus();
-			} else if ( selectedOptions.length === 0 ) {
-				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' )?.focus();
+			} else if ( currentOption.action === OPTION_ACTION.REMOVE ) {
+				setAddStatus( `${ currentOption.option } removed from the list.` );
+				if ( isInlineChips ) {
+					global.document.querySelector( `#${ forLabel }` )?.focus();
+				} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
+					global.document.querySelector( '.vip-button-component' )?.focus();
+				} else if ( selectedOptions.length === 0 ) {
+					global.document.querySelector( '.autocomplete__input' )?.focus();
+				}
+				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			}
 		}, [ currentOption ] );
 
+		if ( isInlineChips ) {
+			return (
+				<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+					{ label && <SelectLabel /> }
+					<div sx={ inlineChipsContainerStyles }>
+						{ selectedOptions.map( ( option, idx ) => (
+							<FormAutocompleteMultiselectInlineChip
+								key={ option }
+								index={ idx }
+								option={ option }
+								unselectValue={ unselectValue }
+							/>
+						) ) }
+						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+							<Autocomplete
+								id={ forLabel }
+								aria-busy={ loading }
+								showAllValues={ true }
+								ref={ forwardRef }
+								source={ source || suggest }
+								defaultValue={ value }
+								displayMenu={ displayMenu }
+								onConfirm={ onValueChangeInlineChips }
+								tNoResults={ noOptionsMessage }
+								required={ required }
+								dropdownArrow={ dropdownArrow }
+								confirmOnBlur={ false }
+								templates={ inlineChipsTemplates }
+								{ ...props }
+								placeholder={ selectedOptions.length > 0 ? '' : props.placeholder || '' }
+							/>
+						</div>
+						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
+						{ loading && <FormSelectLoading sx={ { right: 7 } } /> }
+					</div>
+					{ hasError && errorMessage && (
+						<Flex sx={ { mt: 2 } }>
+							<Validation isValid={ false } describedId={ forLabel }>
+								{ errorMessage }
+							</Validation>
+						</Flex>
+					) }
+				</div>
+			);
+		}
+
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -435,6 +565,7 @@ FormAutocompleteMultiselect.propTypes = {
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
 	allowCustom: PropTypes.bool,
+	variant: PropTypes.string,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/build/system/NewForm/FormAutocompleteMultiselect.stories.d.ts

@@ -92,9 +92,29 @@ export namespace WithStaticData {
     }
     export { args_5 as args };
 }
-export namespace WithDynamicData {
-    export function render_6(): import("react").JSX.Element;
+export namespace InlineChips {
+    export function render_6(props: any): import("react").JSX.Element;
     export { render_6 as render };
+    export namespace args_6 {
+        let label_3: string;
+        export { label_3 as label };
+        export let options: {
+            value: string;
+            label: string;
+        }[];
+        export let variant: string;
+        let showAllValues_2: boolean;
+        export { showAllValues_2 as showAllValues };
+        let placeholder_3: string;
+        export { placeholder_3 as placeholder };
+        let initialValue_1: string[];
+        export { initialValue_1 as initialValue };
+    }
+    export { args_6 as args };
+}
+export namespace WithDynamicData {
+    export function render_7(): import("react").JSX.Element;
+    export { render_7 as render };
 }
 declare const shortOptions: {
     value: string;

package/build/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -134,6 +134,27 @@ export const WithStaticData = {
 	},
 };
 
+export const InlineChips = {
+	render: props => <DefaultComponent { ...props } width={ 500 } />,
+	args: {
+		label: 'Post Categories',
+		options: [
+			{ value: 'breaking-news', label: 'Breaking News' },
+			{ value: 'world-news', label: 'World News' },
+			{ value: 'us-news', label: 'U.S. News' },
+			{ value: 'climate-environment', label: 'Climate & Environment' },
+			{ value: 'obituaries', label: 'Obituaries' },
+			{ value: 'technology', label: 'Technology' },
+			{ value: 'entertainment', label: 'Entertainment' },
+			{ value: 'real-estate', label: 'Real Estate' },
+		],
+		variant: 'inline-chips',
+		showAllValues: true,
+		placeholder: 'Search categories...',
+		initialValue: [ 'Breaking News' ],
+	},
+};
+
 export const WithDynamicData = {
 	render: () => {
 		const [ selectedValues, setSelectedValues ] = useState( [] );

package/build/system/NewForm/FormAutocompleteMultiselect.test.jsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
@@ -37,3 +37,69 @@ describe( '<FormAutocompleteMultiselect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );
+
+describe( '<FormAutocompleteMultiselect variant="inline-chips" />', () => {
+	it( 'renders the inline-chips variant', async () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+			/>
+		);
+		expect( screen.getByLabelText( 'Categories' ) ).toBeInTheDocument();
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders initial values as inline chips', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_init"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Vanilla' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes a chip when the close button is clicked', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_remove"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		expect( screen.queryByText( 'Chocolate' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+	} );
+
+	it( 'announces removal to screen readers', () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_a11y"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		const statusEl = container.querySelector( '#vip-autocompletemultiselect-status' );
+		expect( statusEl ).toHaveTextContent( 'Chocolate removed from the list.' );
+	} );
+} );

package/build/system/NewForm/FormAutocompleteMultiselectInlineChip.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource theme-ui */
+declare const FormAutocompleteMultiselectInlineChip: ({ index, option, unselectValue, }: {
+    index: number;
+    option: string;
+    unselectValue: (option: string, index: number) => void;
+}) => import("react").JSX.Element;
+export { FormAutocompleteMultiselectInlineChip };

package/build/system/NewForm/FormAutocompleteMultiselectInlineChip.js

@@ -0,0 +1,62 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var FormAutocompleteMultiselectInlineChip = function FormAutocompleteMultiselectInlineChip(_ref) {
+  var index = _ref.index,
+    option = _ref.option,
+    unselectValue = _ref.unselectValue;
+  return _jsxs("span", {
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 1,
+      px: 2,
+      py: '2px',
+      m: 1,
+      bg: 'layer.1',
+      borderRadius: 1,
+      fontSize: 1,
+      lineHeight: '16px',
+      whiteSpace: 'nowrap',
+      maxWidth: '100%'
+    },
+    children: [_jsx("span", {
+      sx: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      },
+      children: option
+    }), _jsx("button", {
+      type: "button",
+      "aria-label": "Remove " + option,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        unselectValue(option, index);
+      },
+      sx: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 0,
+        border: 'none',
+        bg: 'transparent',
+        cursor: 'pointer',
+        color: 'text',
+        lineHeight: 0,
+        '&:hover': {
+          opacity: 0.7
+        }
+      },
+      children: _jsx(MdClose, {
+        size: 14
+      })
+    })]
+  });
+};
+export { FormAutocompleteMultiselectInlineChip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
  */
 import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
 import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
+import { FormAutocompleteMultiselectInlineChip } from './FormAutocompleteMultiselectInlineChip';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
@@ -22,6 +23,14 @@ import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
 
+const escapeHtml = str =>
+	String( str )
+		.replace( /&/g, '&' )
+		.replace( /</g, '&lt;' )
+		.replace( />/g, '&gt;' )
+		.replace( /"/g, '&quot;' )
+		.replace( /'/g, '&#039;' );
+
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
 	backgroundColor: 'layer.2',
@@ -96,7 +105,33 @@ const searchIconStyles = {
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow classNames={ config.className } />;
+const inlineChipsContainerStyles = {
+	...defaultStyles,
+	display: 'flex',
+	flexWrap: 'wrap',
+	alignItems: 'center',
+	p: 1,
+	pr: 0,
+	position: 'relative',
+	'& .autocomplete__input': {
+		...defaultStyles[ '& .autocomplete__input' ],
+		lineHeight: '24px',
+		minHeight: '24px',
+	},
+	'&:focus-within': theme => theme.outline,
+	'& .autocomplete__wrapper': {
+		position: 'static',
+		width: '100%',
+		lineHeight: '24px',
+		minHeight: '24px',
+		'& .autocomplete__dropdown-arrow-down': {
+			top: 'unset',
+			bottom: '6px',
+		},
+	},
+};
+
+const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -156,10 +191,12 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			listType = 'button',
 			initialValue = [],
 			allowCustom = false,
+			variant,
 			...props
 		},
 		forwardRef
 	) => {
+		const isInlineChips = variant === 'inline-chips';
 		const OPTION_ACTION = {
 			ADD: 'add',
 			REMOVE: 'remove',
@@ -175,6 +212,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			option: null,
 			index: -1,
 		} );
+		const justSelectedRef = React.useRef( false );
 		let debounceTimeout;
 		forwardRef = forwardRef || React.createRef();
 
@@ -283,11 +321,44 @@ const FormAutocompleteMultiselect = React.forwardRef(
 					data = handleTypeChange( query );
 				}
 				const optionForDisplay = data?.map( option => optionLabel( option ) );
-				populateResults(
-					optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
-				);
+				if ( isInlineChips ) {
+					populateResults( optionForDisplay );
+				} else {
+					populateResults(
+						optionForDisplay.filter( option => ! selectedOptions.includes( option ) )
+					);
+				}
+			},
+			[ autoFilter, isDirty, isInlineChips, onInputChange, options, selectedOptions ]
+		);
+
+		const onValueChangeInlineChips = useCallback(
+			inputValue => {
+				if ( ! inputValue ) {
+					return;
+				}
+				justSelectedRef.current = true;
+				if ( selectedOptions.includes( inputValue ) ) {
+					unselectValue( inputValue, selectedOptions.indexOf( inputValue ) );
+				} else {
+					setCurrentOption( { action: OPTION_ACTION.ADD, option: inputValue } );
+					setSelectedOptions( [ ...selectedOptions, inputValue ] );
+				}
 			},
-			[ autoFilter, isDirty, onInputChange, options, selectedOptions ]
+			[ selectedOptions, unselectValue ]
+		);
+
+		const inlineChipsTemplates = useMemo(
+			() => ( {
+				suggestion: suggestion => {
+					const isSelected = selectedOptions.includes( suggestion );
+					const check = isSelected ? '&#10003;' : '';
+					return `<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;flex-shrink:0">${ check }</span>${ escapeHtml(
+						suggestion
+					) }</span>`;
+				},
+			} ),
+			[ selectedOptions ]
 		);
 
 		useEffect( () => {
@@ -332,7 +403,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				selectedOptions,
 				selectedOptions.map( option => option?.label || option )
 			);
-			resetInputState();
+			if ( isInlineChips && justSelectedRef.current && forwardRef?.current ) {
+				justSelectedRef.current = false;
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: '',
+					menuOpen: true,
+				} );
+			} else {
+				resetInputState();
+			}
 		}, [ selectedOptions ] );
 
 		// Update the select status for screen readers
@@ -340,15 +420,65 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			if ( currentOption.action === OPTION_ACTION.ADD ) {
 				setAddStatus( `${ currentOption.option } added to the list.` );
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
-			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
-				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' )?.focus();
-			} else if ( selectedOptions.length === 0 ) {
-				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' )?.focus();
+			} else if ( currentOption.action === OPTION_ACTION.REMOVE ) {
+				setAddStatus( `${ currentOption.option } removed from the list.` );
+				if ( isInlineChips ) {
+					global.document.querySelector( `#${ forLabel }` )?.focus();
+				} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
+					global.document.querySelector( '.vip-button-component' )?.focus();
+				} else if ( selectedOptions.length === 0 ) {
+					global.document.querySelector( '.autocomplete__input' )?.focus();
+				}
+				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			}
 		}, [ currentOption ] );
 
+		if ( isInlineChips ) {
+			return (
+				<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
+					{ label && <SelectLabel /> }
+					<div sx={ inlineChipsContainerStyles }>
+						{ selectedOptions.map( ( option, idx ) => (
+							<FormAutocompleteMultiselectInlineChip
+								key={ option }
+								index={ idx }
+								option={ option }
+								unselectValue={ unselectValue }
+							/>
+						) ) }
+						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+							<Autocomplete
+								id={ forLabel }
+								aria-busy={ loading }
+								showAllValues={ true }
+								ref={ forwardRef }
+								source={ source || suggest }
+								defaultValue={ value }
+								displayMenu={ displayMenu }
+								onConfirm={ onValueChangeInlineChips }
+								tNoResults={ noOptionsMessage }
+								required={ required }
+								dropdownArrow={ dropdownArrow }
+								confirmOnBlur={ false }
+								templates={ inlineChipsTemplates }
+								{ ...props }
+								placeholder={ selectedOptions.length > 0 ? '' : props.placeholder || '' }
+							/>
+						</div>
+						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
+						{ loading && <FormSelectLoading sx={ { right: 7 } } /> }
+					</div>
+					{ hasError && errorMessage && (
+						<Flex sx={ { mt: 2 } }>
+							<Validation isValid={ false } describedId={ forLabel }>
+								{ errorMessage }
+							</Validation>
+						</Flex>
+					) }
+				</div>
+			);
+		}
+
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -435,6 +565,7 @@ FormAutocompleteMultiselect.propTypes = {
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
 	allowCustom: PropTypes.bool,
+	variant: PropTypes.string,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/src/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -134,6 +134,27 @@ export const WithStaticData = {
 	},
 };
 
+export const InlineChips = {
+	render: props => <DefaultComponent { ...props } width={ 500 } />,
+	args: {
+		label: 'Post Categories',
+		options: [
+			{ value: 'breaking-news', label: 'Breaking News' },
+			{ value: 'world-news', label: 'World News' },
+			{ value: 'us-news', label: 'U.S. News' },
+			{ value: 'climate-environment', label: 'Climate & Environment' },
+			{ value: 'obituaries', label: 'Obituaries' },
+			{ value: 'technology', label: 'Technology' },
+			{ value: 'entertainment', label: 'Entertainment' },
+			{ value: 'real-estate', label: 'Real Estate' },
+		],
+		variant: 'inline-chips',
+		showAllValues: true,
+		placeholder: 'Search categories...',
+		initialValue: [ 'Breaking News' ],
+	},
+};
+
 export const WithDynamicData = {
 	render: () => {
 		const [ selectedValues, setSelectedValues ] = useState( [] );

package/src/system/NewForm/FormAutocompleteMultiselect.test.jsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
@@ -37,3 +37,69 @@ describe( '<FormAutocompleteMultiselect />', () => {
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );
+
+describe( '<FormAutocompleteMultiselect variant="inline-chips" />', () => {
+	it( 'renders the inline-chips variant', async () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+			/>
+		);
+		expect( screen.getByLabelText( 'Categories' ) ).toBeInTheDocument();
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders initial values as inline chips', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_init"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Remove Vanilla' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'removes a chip when the close button is clicked', () => {
+		render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_remove"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		expect( screen.getByText( 'Chocolate' ) ).toBeInTheDocument();
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		expect( screen.queryByText( 'Chocolate' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Vanilla' ) ).toBeInTheDocument();
+	} );
+
+	it( 'announces removal to screen readers', () => {
+		const { container } = render(
+			<FormAutocompleteMultiselect
+				forLabel="my_inline_chips_a11y"
+				label="Categories"
+				options={ options }
+				variant="inline-chips"
+				showAllValues
+				initialValue={ [ 'Chocolate', 'Vanilla' ] }
+			/>
+		);
+		fireEvent.click( screen.getByRole( 'button', { name: 'Remove Chocolate' } ) );
+		const statusEl = container.querySelector( '#vip-autocompletemultiselect-status' );
+		expect( statusEl ).toHaveTextContent( 'Chocolate removed from the list.' );
+	} );
+} );

package/src/system/NewForm/FormAutocompleteMultiselectInlineChip.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+
+const FormAutocompleteMultiselectInlineChip = ( {
+	index,
+	option,
+	unselectValue,
+}: {
+	index: number;
+	option: string;
+	unselectValue: ( option: string, index: number ) => void;
+} ) => {
+	return (
+		<span
+			sx={ {
+				display: 'inline-flex',
+				alignItems: 'center',
+				gap: 1,
+				px: 2,
+				py: '2px',
+				m: 1,
+				bg: 'layer.1',
+				borderRadius: 1,
+				fontSize: 1,
+				lineHeight: '16px',
+				whiteSpace: 'nowrap',
+				maxWidth: '100%',
+			} }
+		>
+			<span
+				sx={ {
+					overflow: 'hidden',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+				} }
+			>
+				{ option }
+			</span>
+			<button
+				type="button"
+				aria-label={ `Remove ${ option }` }
+				onClick={ e => {
+					e.preventDefault();
+					e.stopPropagation();
+					unselectValue( option, index );
+				} }
+				sx={ {
+					display: 'inline-flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					p: 0,
+					border: 'none',
+					bg: 'transparent',
+					cursor: 'pointer',
+					color: 'text',
+					lineHeight: 0,
+					'&:hover': {
+						opacity: 0.7,
+					},
+				} }
+			>
+				<MdClose size={ 14 } />
+			</button>
+		</span>
+	);
+};
+
+export { FormAutocompleteMultiselectInlineChip };