Automattic Design System

Components

MenuItemsChoice

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

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
choices Required[]

readonly MenuItemChoice[]

Array of choices.

value Required

string

Value of currently selected choice (should match a value property from a choice in choices).

onSelect Required

(value: string) => void

Callback function to be called with the selected choice when user selects a new choice.

onHover Required() => {}

(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).

ExamplesPermalink to this section

DefaultPermalink to this section

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

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