components/combobox

Type Aliases

ComboboxItemState

ComboboxItemState = object

Intrinsic focus and selection state supplied when rendering a Combobox item.

Properties

active

active: boolean

disabled

disabled: boolean

selected

selected: boolean

---

ComboboxProps

ComboboxProps<T> > = ComboboxBaseProps<T> > & ComboboxInlineProps | ComboboxPopupProps & ComboboxValueProps<T>>

Props accepted by Combobox.

Type Parameters

T

T

---

ComboboxBaseProps

ComboboxBaseProps<T> > = object & Omit<React.HTMLAttributes<HTMLDivElement>>, "defaultValue" | "value">>

Props shared by every Combobox mode: item shape, rendering, and field wiring.

Type Declaration

container?

optional container?: BasePopover.Portal.Props["container"]

Native portal destination. Use an unclipped themed container for nested themes.

contentClassName?

optional contentClassName?: string

emptyMessage?

optional emptyMessage?: ReactNode

getKey

getKey: (item) => string

Returns the stable identity used to track and compare items.

Parameters

item

T

Returns

string

getLabel

getLabel: (item) => string

Returns the text shown for an item in the trigger and the list.

Parameters

item

T

Returns

string

getSearchText?

optional getSearchText?: (item) => string

Returns the text matched against caller input; defaults to the item’s label.

Parameters

item

T

Returns

string

groupBy?

optional groupBy?: (item) => string

Returns the heading an item is grouped under in the list.

Parameters

item

T

Returns

string

id?

optional id?: string

Identifies the popup trigger or inline input for native label association.

inputProps?

optional inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "value">>

inputRef?

optional inputRef?: React.Ref<HTMLInputElement>>

rootRef?

optional rootRef?: React.Ref<HTMLDivElement>>

Receives the selection control’s root div.

isDisabled?

optional isDisabled?: (item) => boolean

Returns whether an item is unselectable.

Parameters

item

T

Returns

boolean

items

items: readonly T[]

placeholder?

optional placeholder?: string

renderItem?

optional renderItem?: (item, active, state) => ReactNode

Renders one item’s content; defaults to its label.

Parameters

item

T

active

boolean

state

ComboboxItemState

Returns

ReactNode

Type Parameters

T

T

---

ComboboxInlineProps

ComboboxInlineProps = object

Combobox mode flags for the inline (always-expanded, no popup trigger) layout.

Properties

defaultOpen?

optional defaultOpen?: never

onOpenChange?

optional onOpenChange?: never

open?

optional open?: never

trigger?

optional trigger?: never

triggerRef?

optional triggerRef?: never

---

ComboboxPopupProps

ComboboxPopupProps = { defaultOpen?: boolean; onOpenChange?: (open) => void; open?: never; trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>>>; triggerRef?: React.Ref<HTMLButtonElement>>; } | { defaultOpen?: never; onOpenChange?: (open) => void; open: boolean; trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>>>; triggerRef?: React.Ref<HTMLButtonElement>>; }

Combobox mode flags for the popup layout, either caller-controlled or uncontrolled open state.

Union Members

Type Literal

{ defaultOpen?: boolean; onOpenChange?: (open) => void; open?: never; trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>; triggerRef?: React.Ref<HTMLButtonElement>; }

defaultOpen?

optional defaultOpen?: boolean

onOpenChange?

optional onOpenChange?: (open) => void

Called after the popup’s open state changes.

Parameters

open

boolean

Returns

void

open?

optional open?: never

trigger

trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>>>

triggerRef?

optional triggerRef?: React.Ref<HTMLButtonElement>>

---

Type Literal

{ defaultOpen?: never; onOpenChange?: (open) => void; open: boolean; trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>; triggerRef?: React.Ref<HTMLButtonElement>; }

defaultOpen?

optional defaultOpen?: never

onOpenChange?

optional onOpenChange?: (open) => void

Called after the popup’s open state changes.

Parameters

open

boolean

Returns

void

open

open: boolean

trigger

trigger: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>>>

triggerRef?

optional triggerRef?: React.Ref<HTMLButtonElement>>

---

ComboboxValueProps

ComboboxValueProps<T> > = { defaultValue?: never; value: null | string; } | { defaultValue?: null | string; value?: never; } & object | { multiple: true; value: readonly string[]; defaultValue?: never; onValueChange?: (value, items) => void; }

Combobox selection shape: single or multiple, controlled or uncontrolled.

Type Parameters

T

T

Union Members

{ defaultValue?: never; value: null | string; } | { defaultValue?: null | string; value?: never; } & object

---

Type Literal

{ multiple: true; value: readonly string[]; defaultValue?: never; onValueChange?: (value, items) => void; }

multiple

multiple: true

value

value: readonly string[]

defaultValue?

optional defaultValue?: never

onValueChange?

optional onValueChange?: (value, items) => void

Called with the newly selected keys and items.

Parameters

value

string[]

items

T[]

Returns

void

Variables

ComboboxTrigger

const ComboboxTrigger: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> > & RefAttributes<HTMLButtonElement>>>>

The same molded field face as Select, for caller-owned selection summaries.

Functions

Combobox()

Combobox<T>>(props): Element

A searchable selection primitive with caller-owned values and intrinsic keyboard navigation.

Type Parameters

T

T

Parameters

props

ComboboxProps<T>

Returns

Element