Quick nav

Combobox

A combobox has all the features a select does as well as filtering and clearing results.

Version 2.6.0

Installation

To install @igloo-ui/combobox in your project, you will need to run the following command using npm:

npm install @igloo-ui/combobox

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/combobox

Usage

Then to use the component in your code just import it!

import Combobox from '@igloo-ui/combobox';

const optionList = [
  {
    label: 'Text 1',
    value: '1',
  },
  {
    label: 'Text 2 (disabled)',
    value: '2',
    disabled: true,
  },
  {
    label:
      'Text 3. I will put a lot of text here to see how it behaves. Hopefully it looks good!',
    value: '3',
    color: '#74DCC9',
  },
];

<Combobox options={optionList} search clear clearTooltipText="Remove Mapping">
  Place holder text
</Combobox>;

API

Combobox

Prop	Type	Default	Description
`autoWidth`	boolean		Set this to true and the dropdown will take the width of its content, not the width of the select
`children`	ReactNode	-	Default value displayed in the Select
`className`	string	-	Add a specific class to the Select
`clear`	boolean	-	If true, it clears any selected option
`clearTooltipText`	string	-	The tooltip text for the clear button
`closeOnSelect`	boolean		Whether or not the combobox should close after an item is selected
`dataTest`	string	-	Add a data-test tag for automated tests
`disabled`	boolean		Disable the Select so the user cannot click on it
`error`	boolean	-	The Select is in an error state
`footer`	ReactNode	-	The footer content of the combobox
`isCompact`	boolean		True for a compact appearance
`isOpen`	boolean		True if the option list is displayed
`listSize`	ComboboxListSize		Size of the list
`loading`	boolean	-	Whether or not the list is loading
`multiple`	boolean		The Combobox gains checkboxes beside each option to be able to select multiple options
`noResultsText`	string		Specify the text to display when there are no results found
`onAfterClose`	() => void	-	Callback when the dropdown is closed and animations are done
`onChange`	(option: OptionType) => void	-	Callback when selected content changes
`onClear`	() => void	-	Callback called when selected is cleared
`onClose`	() => void	-	Callback when the dropdown is closed
`onInput`	(value: string) => void	-	Callback when the user types in the search box
`onOpen`	() => void	-	Callback when the dropdown is opened
`onScrollEnd`	() => void	-	Callback when the user scrolls to the end of the dropdown
`options`	ComboboxOption[]	-	List of available options.
`scrollEndThreshold`	number	-	The threshold in pixels from the bottom of the dropdown to trigger the onScrollEnd callback
`search`	boolean	-	Whether or not to display a search box when open
`selectedOption`	OptionType \| OptionType[]	-	The initial selected option or a list of selected options
`showSearchIcon`	boolean		Whether or not to display the search icon

ComboboxInput

Prop	Type	Default	Description
`clear`	boolean		If true, it clears any selected option
`clearTooltipText`	string	-	The tooltip text for the clear button
`color`	string	-	Add a colored square instead of an image or an icon
`disabled`	boolean	-	If the combobox is disabled
`icon`	ReactElement<any, string \| JSXElementConstructor<any>>	-	Add an icon to the left of the option
`isOpen`	boolean		True if the option list is displayed
`isPlaceholder`	boolean	-	True if the value is a placeholder
`label`	ReactNode	-	Option title.
`onClear`	() => void	-	Callback for when the clear button is clicked
`onSearch`	(value: string) => void	-	Callback to execute on input of the searchbox
`search`	boolean	-	Whether or not to display a search box when open
`searchRef`	RefObject<HTMLInputElement>	-	The ref for the search field
`showSearchIcon`	boolean		Whether or not to display the search icon
`src`	string	-	Specifies the url for the image to show
`value`	string	-	The value of the input