Earth Design System

API reference docs for theSelectMenuItemcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Props	Type	Description	Default
`children`	`ReactNode`	The content of the select menu item.	_
`id?`	`string`	An optional ID for the menu item. If not provided, an ID will be automatically generated.	_
`isDisabled?`	`boolean`	Indicates if the menu item is currently disabled. Used for styling and accessibility. Applies an `aria-disabled` attribute.	`false`
`isHighlighted?`	`boolean`	Indicates if the menu item is currently highlighted. Used for styling. Applies a `data-highlighted` attribute. Note: Controlled internally to support keyboard navigations.	`false`
`isSelected?`	`boolean`	Indicates if the menu item is currently selected. Used for styling. Applies an `aria-selected=true` and `data-selected=true` otherwise `aria-selected=false`	`false`
`onClick?`	`() => boolean \| void`	Function to be invoked when the item is clicked.	_
`showSelectionIndicator?`	`boolean`	Controls whether to show the selection indicator (check icon) for selected items.	`true`
`railEnd?`	`ReactNode`	The content/components to appear in the item end.	_
`railStart?`	`ReactNode`	The content/components to appear in the item start.	_
`size?`	`'standard' \| 'large'`	The size of the dropdown menu item.	`'standard'`
`verticalAlign?`	`'bottom' \| 'middle' \| 'top'`	Determines how the rails and center are vertically aligned to each other. A `typography` or `heading` can be provided to center align icons and with text that may wrap.	`'middle'`