SelectMenuItem API
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' |