Components
Autocomplete
The Autocomplete component filters options as the user types and completes the input on selection, offering a flexible and efficient way to handle large or dynamic datasets.
The Autocomplete component supports both controlled and uncontrolled usage, with customization options for rendering, filtering logic, and result presentation. Built for flexibility, it can be used on its own or composed with other input and menu primitives to support complex interaction patterns.
Autocomplete is part of the greater Menu ecosystem.Learn more
import { Autocomplete } from '@sproutsocial/seeds-react-menu'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><AutocompleteitemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}menuToggleElement={<FormFieldlabel={<MenuLabel>Choose a book</MenuLabel>}helperText='Begin typing and select an option to complete.'>{props => <AutocompleteInput {...props} />}</FormField>}><MenuContent>{TEST_BOOKS.map(({ id, title }) => (<MenuItem key={id} id={id}>{title}</MenuItem>))}</MenuContent></Autocomplete></Box>)}
Properties
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
menuToggleElement | React.ReactElement<any> | The element that is or contains an element that will toggle the menu when clicked.
May contain labels, buttons, inputs or other content as needed. | ||
popoutProps | Partial<
Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">
> | Props to pass through to the underlying Popout.
Any Popout prop is valid except those explicitly omitted. | ||
width | TypePopoutProps["width"] | The width of the Popout content.
Defaults to 200px or the width of the toggle element, whichever is greater. | ||
MenuRootComponent | React.ComponentType<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]);
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>
);
} | Overrides the default MenuRoot component. Only necessary for specialized use cases. | |
getIsItemVisible | (
item: TypeInternalItemProps,
inputValue: string
) => boolean | getDefaultGetIsItemVisible(itemToString) | A function that can be passed to override the default filtering logic | |
multiSelect | literal | Set multiSelect to true to allow multiple selections.
Default: false | ||
getA11yMultiStatusMessage | UseMultipleSelectionProps<TypeInternalItemProps>["getA11yStatusMessage"] | Optional override to the built-in getA11yStatusMessage function for multiple selection | ||
onMultiSelectStateChange | UseMultipleSelectionProps<TypeInternalItemProps>["onStateChange"] | Optional override to the built-in onStateChange function for multiple selection | ||
multiSelectStateReducer | UseMultipleSelectionProps<TypeInternalItemProps>["stateReducer"] | Optional override to the built-in stateReducer function for multiple selection | ||
showSelectedItemsInDropdown | boolean | false | Determines whether a multiselect autocomplete will display selected items in the dropdown | |
children | | React.ReactChild| React.ReactFragment| React.ReactPortal | Allows menu items to be passed in as children. Cannot be used with the menuItems prop. | ||
menuItems | I[] | Allows menu items to be passed in as objects. Cannot be used with the children prop.
The type of each menu item, I, must be or extend TypeMenuItemProps. | ||
MenuItemComponent | React.ComponentType<I> | Allows a custom MenuItem component to be used when rendering using the menuItems prop.
MenuItemComponent's prop type must match the type of the menuItems, I. |
Recipes
Autocomplete with TokenInput
import { Autocomplete, AutocompleteTokenInput } from '@sproutsocial/seeds-react-menu'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%" width="100%"><AutocompleteitemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}menuToggleElement={<FormFieldwidth="50%"label={<MenuLabel>Choose a book</MenuLabel>}helperText='Select options'>{props => <AutocompleteTokenInput {...props} />}</FormField>}onStateChange={(changes) => changes}multiSelect><MenuContent>{TEST_BOOKS.map(({ id, title }) => (<MenuItem key={id} id={id}>{title}</MenuItem>))}</MenuContent></Autocomplete></Box>);}