ComboboxMultiSelect

ComboboxMultiSelect allows users to choose multiple options from a predefined list. When the input is focused, a popover appears below the input, which displays a list of all available options. Users can filter the options based on string match, by typing into the input element. Each selected option is presented as a Tag, which includes a dismiss button to remove that selection. selected.

The options must be known as the components are rendered, which means this component is not suitable for server-side searches.

Available from eds-core/1.20.0

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { ComboboxMultiSelect } from '@adaptavant/eds-core';

Open Menu​

By default, the menu opens when the user types in the trigger input. Also, using menuTrigger="focus" prop allows you to open the menu when the input is focused.

const initialOptions = [
	{
		id: "opiasri",
		name: "Oscar Piastri",
	},
	{
		id: "dricciardo",
		name: "Daniel Ricciardo",
	},
	{
		id: "kchandhok",
		name: "Karun Chandhok",
	},
	{
		id: "jdaruvala",
		name: "Jehan Daruvala",
	},
	{
		id: "rkubia",
		name: "Robert Kubica",
	},
];

const selectionReducer = (state, action) => {
	switch (action.type) {
		case "ADD":
			return [...state, action.payload];
		case "REMOVE":
			return state.filter((item) => item.id !== action.payload.id);
		case 'DESELECT_ALL':
			return [];
		case 'DROP_LAST':
			if(state.length === 0) return state;
			return state.slice(0, -1);
		default:
			return state;
		}
};

const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);
const [searchTerm, setSearchTerm] = React.useState("");

const filteredOptions = React.useMemo(() => {
	if (searchTerm === "") return initialOptions;
	return initialOptions.filter((item) =>
		item.name.toLowerCase().includes(searchTerm.toLowerCase())
	);
}, [initialOptions, searchTerm]);

const handleSelectionChange = (item) => {
	if(!item) return;
	const isSelected = selectedOptions.some(
		(selected) => selected.id === item.id
	);
	dispatch({
		type: isSelected ? "REMOVE" : "ADD",
		payload: item,
	});
	setSearchTerm("");
};

return (
	<Field label="Select Items">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClose={() => setSearchTerm("")}
			onClearAll={() => dispatch({ type: 'DESELECT_ALL' })}
			onClearInput={() => setSearchTerm("")}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onInputChange={setSearchTerm}
			onSelectionChange={handleSelectionChange}
			options={filteredOptions}
			selectedKey="id"
			selectedOptions={selectedOptions}
		>
			<ComboboxMultiSelectTextInput
				placeholder="Search..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover inputPlaceholder="Search...">
				<ComboboxMultiSelectListbox
					noResultsFallback={
						<Text className="text-secondary text-center text-body-12 py-4">
							No matching results
						</Text>
					}
					options={filteredOptions}
				>
					{(item) => (
						<ComboboxMultiSelectItem option={item}>
							{item.name}
						</ComboboxMultiSelectItem>
					)}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

Size​

Customise the size of the Combobox MultiSelect by using the size prop for the Field.

The size can be either large or standard with standard being the default.

const initialOptions = [
	{
		id: "opiasri",
		name: "Oscar Piastri",
	},
	{
		id: "dricciardo",
		name: "Daniel Ricciardo",
	},
	{
		id: "kchandhok",
		name: "Karun Chandhok",
	},
	{
		id: "jdaruvala",
		name: "Jehan Daruvala",
	},
	{
		id: "rkubia",
		name: "Robert Kubica",
	},
];

const selectionReducer = (state, action) => {
	switch (action.type) {
		case "ADD":
			return [...state, action.payload];
		case "REMOVE":
			return state.filter((item) => item.id !== action.payload.id);
		case 'DESELECT_ALL':
			return [];
		case 'DROP_LAST':
			if(state.length === 0) return state;
			return state.slice(0, -1);
		default:
			return state;
		}
};

const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);
const [searchTerm, setSearchTerm] = React.useState("");

const filteredOptions = React.useMemo(() => {
	if (searchTerm === "") return initialOptions;
	return initialOptions.filter((item) =>
		item.name.toLowerCase().includes(searchTerm.toLowerCase())
	);
}, [initialOptions, searchTerm]);

const handleSelectionChange = (item) => {
	if(!item) return;
	const isSelected = selectedOptions.some(
		(selected) => selected.id === item.id
	);
	dispatch({
		type: isSelected ? "REMOVE" : "ADD",
		payload: item,
	});
	setSearchTerm("");
};

return (
	<Field label="Select Items" size="large">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClose={() => setSearchTerm("")}
			onClearAll={() => dispatch({ type: 'DESELECT_ALL' })}
			onClearInput={() => setSearchTerm("")}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onInputChange={setSearchTerm}
			onSelectionChange={handleSelectionChange}
			options={filteredOptions}
			selectedKey="id"
			selectedOptions={selectedOptions}
		>
			<ComboboxMultiSelectTextInput
				placeholder="Search..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover inputPlaceholder="Search...">
				<ComboboxMultiSelectListbox
					noResultsFallback={
						<Text className="text-secondary text-center text-body-12 py-4">
							No matching results
						</Text>
					}
					options={filteredOptions}
				>
					{(item) => (
						<ComboboxMultiSelectItem option={item}>
							{item.name}
						</ComboboxMultiSelectItem>
					)}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

Select All Option​

Use the ComboboxMultiSelectAll component to render a “Select all” option inside the listbox. This lets users select or deselect all options at once and also supports the indeterminate state when only some items are selected

// Data
const allOptions = [
	{
		id: 'opiasri',
		name: 'Oscar Piastri',
	},
	{
		id: 'dricciardo',
		name: 'Daniel Ricciardo',
	},
	{
		id: 'kchandhok',
		name: 'Karun Chandhok',
	},
	{
		id: 'jdaruvala',
		name: 'Jehan Daruvala',
	},
	{
		id: 'rkubia',
		name: 'Robert Kubica',
	},
];
const selectionKey = 'id';

// Actions
const createSelectionReducer = (selectionKey) => {
	return (state, action) => {
		switch (action.type) {
			case 'ADD':
				return [...state, action.payload];
			case 'REMOVE':
				return state.filter(
					(item) => item[selectionKey] !== action.payload[selectionKey]
				);
			case 'DESELECT_ALL':
				return [];
			case 'DROP_LAST':
				if (state.length === 0) return state;
				return state.slice(0, -1);
			case 'REPLACE':
				return action.payload;
			default:
				return state;
		}
	};
};

// States
const [searchTerm, setSearchTerm] = React.useState('');
const deferredSearchTerm = React.useDeferredValue(searchTerm);
const selectionReducer = createSelectionReducer(selectionKey);
const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);

const isAllSelected = selectedOptions.length === allOptions.length;

const isPartiallySelected = selectedOptions.length > 0 && !isAllSelected;

// Handlers
function handleSelectAll() {
	if (isAllSelected) {
		dispatch({ type: 'DESELECT_ALL' });
	} else {
		dispatch({
			type: 'REPLACE',
			payload: allOptions,
		});
	}
}

const handleSelectionChange = (tappedOption) => {
	if (!tappedOption) return;

	const isSelected = selectedOptions.some(
		(selected) => selected[selectionKey] === tappedOption[selectionKey]
	);
	dispatch({
		type: isSelected ? 'REMOVE' : 'ADD',
		payload: tappedOption,
	});
	setSearchTerm('');
};

// Filter Options with selected options
const filteredOptions = React.useMemo(() => {
	const filteredOptions =
		deferredSearchTerm === ''
			? allOptions
			: allOptions.filter((user) =>
					user.name
						.toLowerCase()
						.includes(deferredSearchTerm.toLowerCase())
				);

	const selectedFilteredOptions = filteredOptions.map((option) => {
		const isSelected = selectedOptions.some(
			(selected) => selected[selectionKey] === option[selectionKey]
		);
		return {
			...option,
			isSelected,
		};
	});

	if (filteredOptions.length === allOptions.length) {
		return [
			{
				[selectionKey]: 'select-all',
				value: 'Select All',
				isSelected: isAllSelected,
			},
			...selectedFilteredOptions,
		];
	}

	return selectedFilteredOptions;
}, [
	deferredSearchTerm,
	selectedOptions,
	selectionKey,
	isAllSelected,
	allOptions,
]);

return (
	<Field label="Select Fruit">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClearAll={() => dispatch({ type: 'DESELECT_ALL' })}
			onClearInput={() => setSearchTerm('')}
			onClose={() => setSearchTerm('')}
			onInputChange={setSearchTerm}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onSelectionChange={handleSelectionChange}
			selectedKey="name"
			selectedOptions={selectedOptions}
			options={allOptions}
		>
			<ComboboxMultiSelectTextInput
				placeholder="Search..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover>
				<ComboboxMultiSelectListbox
					noResultsFallback={<Text className="text-secondary text-center text-body-12 py-4">No matching results</Text>}
					options={filteredOptions}
				>
					{(user) => {
						const isSelectAll = user.id === 'select-all';

						if (isSelectAll) {
							return (
								<ComboboxMultiSelectAll
									onClick={handleSelectAll}
								>
									Select all
								</ComboboxMultiSelectAll>
							);
						}

						return (
							<ComboboxMultiSelectItem id={user.name} option={user}>
								{user.name}
							</ComboboxMultiSelectItem>
						);
					}}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

Max Visible Items​

Use maxVisibleItems prop to control how many selected tags can be shown in the input field. If the selection exceeds this, the rest will be collapsed into a "+X more" indicator to save space.

const initialOptions = [
	{
		id: "opiasri",
		name: "Oscar Piastri",
	},
	{
		id: "dricciardo",
		name: "Daniel Ricciardo",
	},
	{
		id: "kchandhok",
		name: "Karun Chandhok",
	},
	{
		id: "jdaruvala",
		name: "Jehan Daruvala",
	},
	{
		id: "rkubia",
		name: "Robert Kubica",
	},
];

const selectionReducer = (state, action) => {
	switch (action.type) {
		case "ADD":
			return [...state, action.payload];
		case "REMOVE":
			return state.filter((item) => item.id !== action.payload.id);
		case 'DESELECT_ALL':
			return [];
		case 'DROP_LAST':
			if(state.length === 0) return state;
			return state.slice(0, -1);
		default:
			return state;
		}
};

const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);
const [searchTerm, setSearchTerm] = React.useState("");

const filteredOptions = React.useMemo(() => {
	if (searchTerm === "") return initialOptions;
	return initialOptions.filter((item) =>
		item.name.toLowerCase().includes(searchTerm.toLowerCase())
	);
}, [initialOptions, searchTerm]);

const handleSelectionChange = (item) => {
	if(!item) return;
	const isSelected = selectedOptions.some(
		(selected) => selected.id === item.id
	);
	dispatch({
		type: isSelected ? "REMOVE" : "ADD",
		payload: item,
	});
	setSearchTerm("");
};

return (
	<Field label="Select Items">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClose={() => setSearchTerm("")}
			onClearAll={() => dispatch({ type: 'DESELECT_ALL' })}
			onClearInput={() => setSearchTerm("")}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onInputChange={setSearchTerm}
			onSelectionChange={handleSelectionChange}
			options={filteredOptions}
			selectedKey="id"
			selectedOptions={selectedOptions}
		>
		 	<ComboboxMultiSelectTextInput
				maxVisibleItems={2} // Display maximum of 3 items, rest truncates
				placeholder="Search..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover>
				<ComboboxMultiSelectListbox
					noResultsFallback={
						<Text className="text-secondary text-center text-body-12 py-4">
							No matching results
						</Text>
					}
					options={filteredOptions}
				>
					{(item) => (
						<ComboboxMultiSelectItem option={item}>
							{item.name}
						</ComboboxMultiSelectItem>
					)}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

With Apply Button​

For large lists and to improve the mobile experience, you can enable draft-to-save mode. Ideally, this introduces a two-step selection process where users selects their choices, reviews them and then confirm by tapping "Apply" button.

  • Use shouldUseDraftMode={true} on ComboboxMultiSelect to enable this draft-to-save mode on mobile.
  • Use draftSaveButton on ComboboxMultiSelectPopover to add an apply button in mobile view.
  • Use onDraftSave callback on ComboboxMultiSelect to save the draft options into the selected options. This is called when the user taps the apply button.

Note: This is a mobile-only feature. The apply button will not appear on desktop views - it's specifically designed for mobile interfaces where this component opens as a sheet.

const initialOptions = [
	{
		id: "apple",
		name: "Apple",
	},
	{
		id: "banana",
		name: "Banana",
	},
	{
		id: "cherry",
		name: "Cherry",
	},
	{
		id: "grape",
		name: "Grape",
	},
	{
		id: "orange",
		name: "Orange",
	},
];

const selectionReducer = (state, action) => {
	switch (action.type) {
		case "ADD":
			return [...state, action.payload];
		case "REMOVE":
			return state.filter((item) => item.id !== action.payload.id);
		case 'DESELECT_ALL':
			return [];
		case 'DROP_LAST':
			if(state.length === 0) return state;
			return state.slice(0, -1);
			case 'REPLACE':
				return action.payload;
		default:
			return state;
		}
};

const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);
const [searchTerm, setSearchTerm] = React.useState("");

const filteredOptions = React.useMemo(() => {
	if (searchTerm === "") return initialOptions;
	return initialOptions.filter((item) =>
		item.name.toLowerCase().includes(searchTerm.toLowerCase())
	);
}, [initialOptions, searchTerm]);

const handleSelectionChange = (item) => {
	if(!item) return;
	const isSelected = selectedOptions.some(
		(selected) => selected.id === item.id
	);
	dispatch({
		type: isSelected ? "REMOVE" : "ADD",
		payload: item,
	});
	setSearchTerm("");
};

const handleDraftSave = (draftSelectedOptions) => {
	dispatch({
		type: 'REPLACE',
		payload: draftSelectedOptions,
	});
};

return (
	<Field label="Select Fruits">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClose={() => setSearchTerm("")}
			onClearAll={() => dispatch({ type: 'DESELECT_ALL' })}
			onClearInput={() => setSearchTerm("")}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onInputChange={setSearchTerm}
			onSelectionChange={handleSelectionChange}
			options={initialOptions}
			selectedKey="id"
			selectedOptions={selectedOptions}
			shouldUseDraftMode={true} // Enable draft-to-save mode on mobile
			onDraftSave={handleDraftSave}
		>
		 	<ComboboxMultiSelectTextInput
				placeholder="Search fruits..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover
						draftSaveButton={({ triggerProps }) => (
							<Button
								className="w-full"
								size="large"
								variant="accentSecondary"
								{...triggerProps}
							>
								Apply
							</Button>
						)}
					>
				<ComboboxMultiSelectListbox
					noResultsFallback={
						<Text className="text-secondary text-center text-body-12 py-4">
							No matching results
						</Text>
					}
					options={filteredOptions}
				>
					{(item) => (
						<ComboboxMultiSelectItem option={item}>
							{item.name}
						</ComboboxMultiSelectItem>
					)}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

FullScreen on Mobile​

API Reference​

ComboboxMultiSelect

PropDefaultDescription
children_((menuState: { isMenuOpen: boolean }) => React.ReactNode) | React.ReactNode
Accepts either a React node or a render function. The render function provides the menu's state (isMenuOpen).
closeButtonPropsForMobile?_{ label: string, onClick: function, size: 'large' | 'standard' | 'small' }
If closeButtonPropsForMobile is provided then the mobile version of the component will have a close button
inputValue?_string
Value of the combobox input.
menuTrigger?input'focus' | 'input'
Interaction type to display the Combobox menu.
mobileFriendly?trueboolean
Indicates if the opened element should be rendered as a Sheet in mobile viewports
onClearAll?_() => void
Handler that is called when the Combobox input value is cleared.
onClearInput?_() => void
Function to be invoked for clearing the Combobox input value.
onClose?_() => void
Handler that is called when the Combobox is closed
onInputChange_(value: string) => void
Function to be invoked when the input value changes.
onRemoveLast?_() => void
Function to remove the last item in the selection options list. Invoked when user presses backspace.
onSelectionChange_(option: object) => void
Function to be invoked when the selection changes.
popoverMatchReferenceWidth?falseboolean
Match the width of the popover with the reference element.
popoverMaxHeight?356number
The max height of the popover.
popoverMaxWidth?400number
The max width of the popover.
popoverOffset?4number
The offset of the combobox popover.
popoverPlacement?'bottom-start''bottom' | 'bottom-start' | 'bottom-end'
The placement of the popover relative to the combobox Input.
selectedKey_keyOf object
Key for identifying the selected option.
selectedOptions_object[] | undefined
Currently selected options from the list.
strategy?'absolute''absolute' | 'fixed'
The strategy used to position the floating element.
titleForMobile?_string
On mobile ComboboxMultiSelect renders a Sheet component. If titleForMobile is provided then the Sheet will have a Header with title rendered
options?_object[] | undefined
Complete list of all available options. Required for "Select All" functionality to determine selection count.
shouldUseDraftMode?falseboolean
If true, the draft-to-save mode will be enabled in mobile view. Use it along with draftSaveButton prop in ComboboxMultiSelectPopover. This is a mobile-only feature.
onDraftSave?_(draftSelectedOptions: object[]) => void
Function to be invoked when the draft selection is to be saved. This is called when the user taps the apply button.
fullScreenForMobilefalseboolean
Enables fullscreen mode for the mobile select menu, making it cover the entire viewport.

ComboboxMultiSelectTextInput

This API applies to both ComboboxSearchInput and ComboboxTextInput.

PropDefaultDescription
aria-activedescendant?_string
identifies the currently active element when using ARIA widgets.
aria-autocomplete?_'inline' | 'list' | 'both' | 'none'
Indicates whether input completion suggestions are provided, and their type.
aria-controls?_string
Identifies the element(s) that the input controls.
aria-expanded?_boolean
Indicates whether the popover is currently expanded or collapsed.
aria-haspopup?_'dialog' | 'grid' | 'listbox' | 'menu' | 'tree' | 'boolean'
Indicates the availability of a popup related to the input.
autoComplete?_string
Specifies whether autocomplete is enabled for the input.
autoCorrect?_'on' | 'off'
Specifies whether auto-correction is enabled for the input.
autoFocus?_boolean
Automatically focuses the input element when it is rendered.
focusContainerRef?_React.Ref<HTMLDivElement>
Reference to the wrapper FocusContainer element.
inputMode?_'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
Hints to browsers about what kind of virtual keyboard to display.
name?_string
Name of the input, used for form submissions.
onBlur?_function
Function to be invoked when the input loses focus.
onChange?_function
Function to be invoked when a new item is selected.
onFocus?_function
Function to be invoked when the input is focused.
onKeyDown?_function
Function to be invoked when a key is pressed while the input is focused.
onPaste?_function
Function to be invoked when content is pasted into the input.
pattern?_string
Regular expression pattern the input's value must match for validation.
placeholder?_string
Placeholder text displayed when the input is empty.
renderItem_(option: Option) => string;
Function to control the formatting of the string in the selected item Tag.
role?_string
ARIA role for the input.
spellCheck?_boolean
Specifies whether the input value should be checked for spelling errors.
type?_'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
Type of the input element.
maxVisibleItems?_number
The number of items to show in the input

ComboboxMultiSelectPopover

PropDefaultDescription
shouldUsePortal?trueboolean
Determines whether the Popover should be rendered in a React Portal. If true, the Popover will be rendered outside the DOM hierarchy of the parent component.
children?_React.ReactNode
Content of the ComboboxList with the options.
inputAppearance?"SearchInput""SearchInput" | "TextInput" | "none"
Controls whether to include or exclude an input inside the mobile popover / sheet.
inputPlaceholder?"Search..."string
The placeholder text for the input inside the mobile popover / sheet.
draftSaveButton?_(props: { triggerProps: { onClick: () => void } }) => React.ReactNode
Used to render the mobile-only confirmation button, while in draft-to-save mode. Passes triggerProps that must be spread on the trigger element to handle the action. This is a mobile-only prop.

ComboboxMultiSelectListbox

PropDefaultDescription
noResultsFallback?_React.ReactNode
Component to render when there are no options left in the filtered result.
options_Array of Objects
Options to be rendered in the dropdown.

ComboboxMultiSelectItem

PropDefaultDescription
children_React.ReactNode
The content of the combobox menu item.
id?_string
An optional ID for the menu item; auto-generated if not provided.
isDisabled?falseboolean
If true, the item is disabled.
onClick?_() => void
Function to be invoked when the item is clicked.
option_object
Option associated with the item
size?standard'standard' | 'large'
Size of the combobox item.
showSelectionIndicator?trueboolean
Controls whether to show the selection indicator (check icon) for selected items.

ComboboxMultiSelectAll

PropDefaultDescription
children_React.ReactNode
The content of the combobox menu item.
id?_string
An optional ID for the menu item; auto-generated if not provided.
isSelected?falseboolean
Controls whether the checkbox is selected.

⚠️ Deprecated, it's handled internally with the help of options prop in ComboboxMultiSelect.

isDisabled?falseboolean
If true, the item is disabled.
isHighlighted?falseboolean
Indicates if the menu item is currently highlighted. Used for styling.

⚠️ Deprecated with backwards compatibility. It's handled internally with the options prop in ComboboxMultiSelect.

onClick?_() => void
Function to be invoked when the item is clicked.
size?standard'standard' | 'large'
Size of the combobox item.
indeterminate?falseboolean
Controls whether to show the checkbox's indeterminate state.

⚠️ Deprecated with backwards compatibility. It's handled internally with the options prop in ComboboxMultiSelect.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

ComboboxMultiSelect parts​

const initialOptions = [
	{
		id: "opiasri",
		name: "Oscar Piastri",
	},
	{
		id: "dricciardo",
		name: "Daniel Ricciardo",
	},
	{
		id: "kchandhok",
		name: "Karun Chandhok",
	},
	{
		id: "jdaruvala",
		name: "Jehan Daruvala",
	},
	{
		id: "rkubia",
		name: "Robert Kubica",
	},
];

const selectionReducer = (state, action) => {
	switch (action.type) {
		case "ADD":
			return [...state, action.payload];
		case "REMOVE":
			return state.filter((item) => item.id !== action.payload.id);
		case 'DROP_LAST':
			if(state.length === 0) return state;
			return state.slice(0, -1);
		default:
			return state;
		}
};

const [selectedOptions, dispatch] = React.useReducer(selectionReducer, []);
const [searchTerm, setSearchTerm] = React.useState("");

const filteredOptions = React.useMemo(() => {
	if (searchTerm === "") return initialOptions;
	return initialOptions.filter((item) =>
		item.name.toLowerCase().includes(searchTerm.toLowerCase())
	);
}, [initialOptions, searchTerm]);

const handleSelectionChange = (item) => {
	if(!item) return;
	const isSelected = selectedOptions.some(
		(selected) => selected.id === item.id
	);
	dispatch({
		type: isSelected ? "REMOVE" : "ADD",
		payload: item,
	});
	setSearchTerm("");
};

return (
	<Field label="Select Items">
		<ComboboxMultiSelect
			inputValue={searchTerm}
			menuTrigger="focus"
			onClearInput={() => setSearchTerm("")}
			onInputChange={setSearchTerm}
			onRemoveLast={() => dispatch({ type: 'DROP_LAST' })}
			onSelectionChange={handleSelectionChange}
			options={filteredOptions}
			selectedKey="id"
			selectedOptions={selectedOptions}
		>
			<ComboboxMultiSelectTextInput
				className="bg-palette-violet-background"
				classNames={{
					focusIndicator: 'border-palette-violet-border',
					tag: 'bg-palette-blue-background',
					tagLabel: 'text-palette-blue-text',
					tagCloseButtonIcon: 'fill-palette-blue-border',
				}}
				placeholder="Search..."
				renderItem={({ name }) => name}
			/>
			<ComboboxMultiSelectPopover className="bg-palette-violet-background"
 classNames={{
              sheet: "bg-palette-violet-background",
              sheetHeader: "text-secondary",
              sheetHeading: "text-heading-24",
              sheetWrapper: "text-positive",
              sheetContent: "bg-accent",
            }}>
				<ComboboxMultiSelectListbox
					noResultsFallback={
						<Text className="text-secondary text-center text-body-12 py-4">
							No matching results
						</Text>
					}
					options={filteredOptions}
				>
					{(item) => (
						<ComboboxMultiSelectItem
							option={item}
							className={`
								bg-palette-violet-background
								active:bg-palette-violet-background-active
								active:data-[highlighted]:bg-palette-violet-background-active
								data-[highlighted]:bg-palette-violet-background-active
							`}
							classNames={{
								checkboxControl:
									'peer-checked:bg-palette-violet-background-active',
							}}
						>
							{item.name}
						</ComboboxMultiSelectItem>
					)}
				</ComboboxMultiSelectListbox>
			</ComboboxMultiSelectPopover>
		</ComboboxMultiSelect>
	</Field>
);
View in Playroom

No parts available. Only root.

ComboboxMultiSelectItem parts​

PartDescription
centerThe main area of the 'track'
checkboxThe checkbox root
checkboxControlThe interactive area of the checkbox
checkboxIconThe icon within the checkbox
railCommon style applied to both railStart and railEnd via styles.rail. Used for shared customization
railEndThe right fixed element. For icons, buttons, or trailing content.
railStartThe left fixed element. For icons, buttons, or any content to appear before the main area .

ComboboxMultiSelectTextInput parts​

PartDescription
adornmentEndContainer for the clear (remove all) icon that appears at the end.
focusIndicatorA hidden span or visual indicator to show when the input is focused.
innerThe flex element which contains the input and the tags
inputStyles applied to the input field.
rootWrapper around the whole input, tags, and adornments.
tagThe element which represents a selected item
tagCloseButtonThe button within a Tag which dismisses the selection
tagCloseButtonIconThe icon element within the TagCloseButton
tagLabelThe text element within the tag

ComboboxMultiSelectPopover parts​

PartDescription
rootParent Container on desktop view.
sheetParent Container of the popover in mobile view.
sheetWrapperThe inner wrapper of the sheet, typically used for controlling the layout or the sheet content's alignment and size.
sheetHeaderHeader Container holding the heading elements.
sheetHeadingStyles to the heading text.
sheetContentBox holding the options in the sheet
closeButtonThe button element used to close the sheet, typically placed at the top-right corner of the dialog.

Note: Styles applied to the popover root will not be automatically applied to sheet , recommend to add sheet styles as shown in the example.