MenuItemsChoice – Automattic Design System

MenuItemsChoice functions similarly to a set of MenuItems, but allows the user to select one option from a set of multiple choices.

View on Storybook

View source on GitHub

Import

import { MenuItemsChoice } from '@wordpress/components';

Props

Name	Type	Default	Required	Description
`choices`	`unknown`	`[]`		Array of choices. @default []
`value`	`string`		Yes	Value of currently selected choice (should match a `value` property from a choice in `choices`).
`onSelect`	`( value: string ) => void`		Yes	Callback function to be called with the selected choice when user selects a new choice.
`onHover`	`( value: string \| null ) => void`	`() => {}`		Callback function to be called with a choice when user hovers over a new choice (will be empty on mouse leave). @default noop

Examples

Default

const Default = ( {
	onHover,
	onSelect,
	choices,
} ) => {
	const [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );

	return (
		<MenuGroup label="Editor">
			<MenuItemsChoice
				choices={ choices }
				value={ choice }
				onSelect={ ( ...selectArgs ) => {
					onSelect( ...selectArgs );
					setChoice( ...selectArgs );
				} }
				onHover={ onHover }
			/>
		</MenuGroup>
	);
};