The positioning mode to use, inline is the default and you can control the position using CSS. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.
bodyLock?: boolean
The document.body will be lock, and scrolling will be disabled.
side?: "top" | "bottom" | "right" | "left"
The preferred side of the trigger to render against when open.
Will be reversed when collisions occur and avoidCollisions
is enabled. Defaults to "bottom".
sideOffset?: number
The distance in pixels from the trigger. Defaults to 0.
sideFlip?: boolean
Flip to the opposite side when colliding with boundary. Defaults to true.
align?: "start" | "center" | "end"
The preferred alignment against the trigger.
May change when collisions occur. Defaults to "center".
alignOffset?: number
An offset in pixels from the start or end alignment options. Defaults to 0.
alignFlip?: boolean
Flip alignment when colliding with boundary.
May only occur when prioritizePosition is true. Defaults to true.
avoidCollisions?: boolean
When true, overrides the side and align preferences
to prevent collisions with boundary edges. Defaults to true.
collisionBoundary?: Element | (Element | null)[] | null
The element used as the collision boundary. By default
this is the viewport, though you can provide additional
element(s) to be included in this check. Defaults to [].
The distance in pixels from the boundary edges where collision
detection should occur. Accepts a number (same for all sides),
or a partial padding object, for example: { top: 20, left: 20 }. Defaults to 0.
arrowPadding?: number
The padding between the arrow and the edges of the content.
If your content has border-radius, this will prevent it from
overflowing the corners. Defaults to 0.
hideShiftedArrow?: boolean
When true, hides the arrow when it cannot be centered
to the reference element. Defaults to true.
sticky?: "always" | "partial"
The sticky behavior on the align axis. partial will keep the
content in the boundary as long as the trigger is at least partially
in the boundary whilst "always" will keep the content in the boundary
regardless. Defaults to "partial".
hideWhenDetached?: boolean
Whether to hide the content when the trigger becomes fully occluded. Defaults to false.
positionStrategy?: "absolute" | "fixed"
The type of CSS position property to use.
updatePositionStrategy?: "always" | "optimized"
Strategy to update the position of the floating element on every animation frame. Defaults to 'optimized'.
disableUpdateOnLayoutShift?: boolean
Whether to disable the update position for the content when the layout shifted. Defaults to false.
prioritizePosition?: boolean
Force content to be position within the viewport.
Might overlap the reference element, which may not be desired. Defaults to false.
reference?: ReferenceElement
The custom element or virtual element that will be set as the reference
to position the floating element.
If provided, it will replace the default anchor element.
disableOutsidePointerEvents?: boolean
When true, hover/focus/click interactions will be disabled on elements outside
the DismissableLayer. Users will need to click twice on outside elements to
interact with them: once to close the DismissableLayer, and again to trigger the element.
Whether to display the search input or not.
Can be an object to pass additional props to the input.
{ placeholder: 'Search...', type: 'text', size: 'md' }
Rounds the corners of the button Defaults to false.
block?: boolean
Render the button full width Defaults to false.
loadingAuto?: boolean
Set loading state automatically based on the @click promise state Defaults to false.
normalCase?: boolean
Disable uppercase label Defaults to true.
useWait?: boolean
Shows LoaderWaitIcon in loading mode Defaults to false.
useClock?: boolean
Shows LoaderClockIcon icon in loading mode Defaults to false.
useDropdown?: boolean
Shows icons.ChevronDownSIcon on the right side Defaults to false.
clearIcon
icons.close
IconComponent
The icon displayed in the clear button.
arrow
false
boolean | ComboboxArrowProps
Display an arrow alongside the menu.
portal
true
string | false | true | HTMLElement
Render the menu in a portal.
undefined: undefined
virtualize
false
boolean | { overscan?: number ; estimateSize?: number | ((index: number) => number) | undefined; } | undefined
Enable virtualization for large lists.
Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
overscan?: number
Number of items rendered outside the visible area Defaults to 12.
estimateSize?: number | ((index: number) => number)
Estimated size (in px) of each item, or a function that returns the size for a given index Defaults to 32.
valueKey
undefined
undefined
When items is an array of objects, select the field to use as the value instead of the object itself.
labelKey
'label'
string
When items is an array of objects, select the field to use as the label.
descriptionKey
'description'
string
When items is an array of objects, select the field to use as the description.