ComboboxProps

type ComboboxProps = MarginProps & LayoutProps & {
  collapsed?: boolean;
  footerContent?: ReactNode;
  id: string;
  isDisabled?: boolean;
  isReadOnly?: boolean;
  isRequired?: boolean;
  items: ComboboxItem[];
  label?: string;
  maxVisibleItems?: number;
  onBlur?: (selectedItems: ComboboxItem[]) => void;
  onChange?: (selectedItems: ComboboxItem[]) => void;
  onSearch?: (searchValue: string) => void;
  placeholder?: string;
  popoverPlacement?: Placement;
  popoverWidth?: number;
  selectedItems: ComboboxItem[];
  size?: ConditionalValue<"xs" | "sm" | "md" | "lg" | "xl">;
  variant?: "outline" | "ghost";
} &
  | {
  asPlainText?: boolean;
  isSingleSelect: true;
  keepSearchAfterSelect?: false;
}
  | {
  asPlainText?: false;
  isSingleSelect?: false;
  keepSearchAfterSelect?: boolean;
} &
  | {
  folderStyle: "stacked";
  parentSelectsChildren?: boolean;
}
  | {
  folderStyle?: "grouped";
  parentSelectsChildren?: false;
};

Type Declaration

Name	Type	Description
collapsed?	boolean	-
footerContent?	ReactNode	Content to be displayed in a “footer”-slot of the combobox.
id	string	Unique id required for accessibility. Used to connect the input to the listbox.
isDisabled?	boolean	Makes the combobox input disabled.
isReadOnly?	boolean	Makes the combobox input read-only.
isRequired?	boolean	Makes the combobox input required.
items	ComboboxItem[]	Items to display in the combobox.
label?	string	-
maxVisibleItems?	number	Maximum number of items to render initially before requiring a search. If the number of items exceeds this value, users must search to narrow down the list. If undefined, all items are shown.
onBlur()?	(selectedItems: ComboboxItem[]) => void	Callback function that is called when the combobox loses focus and the list closes.
onChange()?	(selectedItems: ComboboxItem[]) => void	Callback function that is called when the selected items change.
onSearch()?	(searchValue: string) => void	Callback function that is called when the search value changes.
placeholder?	string	Custom input placeholder text.
popoverPlacement?	Placement	The placement of the popper relative to its reference. Even though placement is specified, Popover will try to reposition itself in the event that available space at the specified placement is not enough. Default "bottom-start"
popoverWidth?	number	Width of the popover. Defaults to match the width of the input field.
selectedItems	ComboboxItem[]	Selected items.
size?	ConditionalValue<"xs" | "sm" | "md" | "lg" | "xl">	Size for the input field of combobox. Default "md"
variant?	"outline" | "ghost"	Appearance variant for field. Defaults to ‘outline’ variant.