SelectMenu API
API reference docs for theSelectMenucomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Props | Type | Description | Default |
|---|---|---|---|
children | ((menuState: { isMenuOpen: boolean; triggerProps: TriggerProps }) => ReactNode) | ReactNode | Accepts either a React node or a render function. The render function provides the menu's state (isMenuOpen) and accessibility/interaction props (triggerProps) for the trigger. | _ |
closeButtonPropsForMobile? | { label: string, onClick: () => void, size?: IconButtonProps['size'] } | Props for the close button that appears on mobile. | _ |
mobileFriendly? | boolean | Whether the select menu should be mobile friendly. | true |
titleForMobile? | string | The title of the Modal that appears on mobile instead of Popover. | _ |
togglePoint? | number | The toggle point for the select menu to switch to mobile view. Deprecated with backwards compatibility ⚠️ (The logic will be handled internally in future) | 768 |
popoverMatchReferenceWidth? | boolean | Match the width of the popover with the reference element. | false |
popoverMaxHeight? | number | The max height of the select menu popover. | 356 |
popoverMaxWidth? | number | The max width of the select menu popover. | 400 |
popoverOffset? | number | The offset of the select menu popover. | 4 |
popoverPlacement? | 'bottom' | 'bottom-start' | 'bottom-end' | The placement of the select menu popover in relation to the trigger. | 'bottom-start' |
selectedOption? | object | The currently selected option. This prop is deprecated and will be removed in future versions. A much better API will be used similar to FilterMenu. | _ |
strategy? | 'absolute' | 'fixed' | The strategy used to position the floating element. | 'absolute' |