Single Select Menu

Components

Single Select Menu

Single Select Menu

A Single Select Menu lets users choose one option from a list.

A Single Select Menu is useful for presenting a list of mutually exclusive options in a compact format. It maintains a clean interface, particularly when the number of options exceeds the recommended number of radio buttons.

Single Select Menu is part of the greater Menu ecosystem.Learn more

import { SingleSelectMenu } from '@sproutsocial/racine'

() => {
	return (
		<Box display="flex" justifyContent="center" alignItems="center" height="100%">
			<SingleSelectMenu
        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
        menuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}
      >
        <MenuContent>
          <MenuGroup id="books">
            {TEST_BOOKS.map(({ id, title }) => (
              <MenuItem key={id} id={id}>
                {title}
              </MenuItem>
            ))}
          </MenuGroup>
        </MenuContent>
      </SingleSelectMenu>
		</Box>
	)
}

Properties

Name	Type	Default
`menuToggleElement`	`any`
`popoutProps`	`Omit<TypePopoutProps, "isOpen" \| "setIsOpen" \| "content" \| "children">`
`width`	`TypePopoutProps["width"]`
`MenuRootComponent`	`TypeMenuRootProps`	({ children, menuToggleElement, popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {}, width = "300px", ...contextProps }: TypeMenuRootProps) => { const { isOpen, openMenu, closeMenu, inputValue, hiddenItemsCount = 0, items, } = contextProps; const setIsOpen = useCallback( (newIsOpen: boolean) => { newIsOpen ? openMenu?.() : closeMenu?.(); }, [openMenu, closeMenu] ); useEffect(() => { if (!inputValue) return; if (items && hiddenItemsCount >= items.length && isOpen) { closeMenu?.(); } }, [hiddenItemsCount, items?.length, isOpen, inputValue]); const menuContext = useMenu(contextProps); return ( <MenuPopout placement={placement} isOpen={!!isOpen} openMenu={openMenu} closeMenu={closeMenu} content={ <MenuContentProvider menuContext={menuContext}> {children} </MenuContentProvider> } {...popoutProps} > {(toggleProps) => ( <MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps }}> {menuToggleElement} </MenuToggleProvider> )} </MenuPopout> ); }

Recipes

The Single Select Menu can accept an array of menu item data as a prop ([{ id, onClick, children }]) to render a simple, customizable list of actions.

import { SingleSelectMenu } from '@sproutsocial/racine'

() => {
	  const items = TEST_BOOKS.map((book) => ({
      id: book.id,
      children: book.title
    }));

    return (
			<Box display="flex" justifyContent="center" alignItems="center" height="100%">
				<SingleSelectMenu
					menuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}
					menuItems={items}
				/>
			</Box>
    );
}

For more customization and control, the Single 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 { SingleSelectMenu } from '@sproutsocial/racine'

() => {
	return (
		<Box display="flex" justifyContent="center" alignItems="center" height="100%">
			<SingleSelectMenu
        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
        menuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}
      >
        <MenuContent>
          <MenuGroup id="books">
            {TEST_BOOKS.map(({ id, title }) => (
              <MenuItem key={id} id={id}>
                {title}
              </MenuItem>
            ))}
          </MenuGroup>
        </MenuContent>
      </SingleSelectMenu>
		</Box>
	)
}