Combobox API

children

((menuState: { isMenuOpen: boolean }) => React.ReactNode) | React.ReactNode

Accepts either a React node or a render function. The render function provides the menu's state (isMenuOpen).

_

closeButtonPropsForMobile?

{ label: string, onClick: function, size: 'large' | 'standard' | 'small' }

If closeButtonPropsForMobile is provided then the mobile version of the component will have a close button

_

selectedKey

keyOf object

Key for identifying the selected option.

_

selectedOption

object | undefined

Currently selected option from the list.

_

inputValue?

string

Value of the combobox input.

_

menuTrigger?

'focus'| 'input'

Interaction type to display the Combobox menu.

input

mobileFriendly?

boolean

Indicates if the opened element should be rendered as a Sheet in mobile viewports

true

onClear?

() => void

Function to be invoked for clearing the Combobox input value.

_

onInputChange

(value: string) => void

Function to be invoked when the input value changes.

_

onSelectionChange

(newOption: object | undefined) => void

Function to be invoked when the selection changes.

_

popoverMatchReferenceWidth?

boolean

Match the width of the popover with the reference element.

false

popoverMaxHeight?

number

The max height of the popover.

356

popoverMaxWidth?

number

The max width of the popover.

400

popoverOffset?

number

The offset of the combobox popover.

4

popoverPlacement?

'bottom' | 'bottom-start' | 'bottom-end'

The placement of the popover relative to the combobox Input.

'bottom-start'

strategy?

'absolute' | 'fixed'

The strategy used to position the floating element.

'absolute'

titleForMobile?

string

On mobile Combobox renders a Sheet component. If titleForMobile is provided then the Sheet will have a Header with title rendered

_