Components
Multi Select Menu
A Multi Select Menu lets users choose multiple options from a list.
A Multi Select Menu allows users to choose multiple options from a list. It is designed for scenarios where more than one selection is valid, managing checked state internally or through external props. The component supports a simple data-driven setup or full customization using menu primitives, providing teams with complete flexibility.
Multi Select Menu is part of the greater Menu ecosystem.Learn more
import { MultiSelectMenu } from '@sproutsocial/racine'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><MultiSelectMenumenuToggleElement={<MenuToggleButton>Select books</MenuToggleButton>}><MenuContent><MenuGroup id="books">{TEST_BOOKS.map((itemsToRender) => (<MenuIteminputType="checkbox"key={itemsToRender.id}id={itemsToRender.id}>{itemsToRender.title}</MenuItem>))}</MenuGroup></MenuContent></MultiSelectMenu></Box>)}
Properties
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
menuToggleElement | any | |||
popoutProps | Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children"> | |||
width | TypePopoutProps["width"] | |||
MenuRootComponent | TypeMenuRootProps | ({
children,
menuToggleElement,
popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
width,
...contextProps
}: TypeMenuRootProps) => {
const {
isOpen,
openMenu,
closeMenu,
inputValue,
hiddenItemsCount = 0,
items,
getMenuProps,
} = contextProps;
const toggleElementRef = React.useRef<HTMLElement>(null);
const [finalWidth, setFinalWidth] = React.useState<typeof width>();
const min_width = 200;
useLayoutEffect(() => {
if (width) {
setFinalWidth(width);
} else if (toggleElementRef.current?.offsetWidth) {
const toggleWidth = toggleElementRef.current.offsetWidth;
setFinalWidth(Math.max(toggleWidth, min_width));
} else {
setFinalWidth(min_width);
}
}, [width, toggleElementRef.current?.offsetWidth]);
useEffect(() => {
if (!inputValue) return;
if (items && hiddenItemsCount >= items.length && isOpen) {
closeMenu?.();
}
}, [hiddenItemsCount, items?.length, isOpen, inputValue]);
const menuContext = useMenu(contextProps);
// Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
getMenuProps?.({}, { suppressRefError: true });
return (
<MenuPopout
placement={placement}
isOpen={!!isOpen}
openMenu={openMenu}
closeMenu={closeMenu}
content={
<MenuContentProvider menuContext={menuContext}>
{children}
</MenuContentProvider>
}
width={finalWidth}
{...popoutProps}
>
{(toggleProps) => (
<MenuToggleProvider
menuContext={{
...menuContext,
...toggleProps,
ref: mergeRefs<HTMLElement>(
toggleProps.ref,
toggleElementRef
) as RefObject<HTMLElement>,
}}
>
{menuToggleElement}
</MenuToggleProvider>
)}
</MenuPopout>
);
} | ||
getA11yMultiStatusMessage | UseMultipleSelectionProps<TypeInternalItemProps>["getA11yStatusMessage"] | |||
onMultiSelectStateChange | UseMultipleSelectionProps<TypeInternalItemProps>["onStateChange"] | |||
multiSelectStateReducer | UseMultipleSelectionProps<TypeInternalItemProps>["stateReducer"] |
Recipes
Using the menuItems prop
The Multi Select Menu can accept an array of menu item data as a prop ([{ id, onClick, children }]) to render a simple, selectable list.
import { MultiSelectMenu } from '@sproutsocial/racine'() => {const items = TEST_BOOKS.map((book) => ({id: book.id,children: book.title,inputType: "checkbox"}));return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><MultiSelectMenumenuToggleElement={<MenuToggleButton>Select books</MenuToggleButton>}menuItems={items}/></Box>);}
Composable Multi Select Menu
For more customization and control, the Multiu Select Menu can also be composed using menu primitives. This approach allows you to define custom layouts, add icons, or integrate with other components while keeping the menu behavior consistent.
import { MultiSelectMenu } from '@sproutsocial/racine'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><MultiSelectMenumenuToggleElement={<MenuToggleButton>Select books</MenuToggleButton>}><MenuContent><MenuGroup title="Classics" id="classics">{TEST_BOOKS.slice(0, 5).map((itemsToRender) => (<MenuIteminputType="checkbox"key={itemsToRender.id}id={itemsToRender.id}>{itemsToRender.title}</MenuItem>))}</MenuGroup><MenuGroup title="Essentials" id="essentials" isSingleSelect>{EXTRA_BOOKS.slice(0, 5).map((itemsToRender) => (<MenuIteminputType="radio"key={itemsToRender.id}id={itemsToRender.id}>{itemsToRender.title}</MenuItem>))}</MenuGroup></MenuContent></MultiSelectMenu></Box>)}