TabbedCombobox

A menu with tabs on the left hand side, and items on the right hand side.

#Examples

#Accessories

Options can display an additional accessory view before the label. You can show an image, an icon, or an icon box using the type property and the appropriate props. Use the optionAccessory prop to provide a function that returns the accessory for the option.

Tabs can also have accessories. These are specified in the tabGroups prop.

Additionally, using the showPlaceholderIcon prop will render a dotted circle in the placeholder state.

#The "All" tab

The "All" tab is automatically added to the combobox when the showAllTab prop is set to true. You can customize the "All" tab by providing an accessory using the allTabAccessory prop.

#Custom objects

You don't have to create objects with label and value keys as shown in the examples above. TabbedCombobox supports any objects, as long as you provide a label and value for each option via optionLabel and optionValue functions. description may be replaced with the optionDescription function.

#Custom equality

By default, TabbedCombobox defines the selected option as the option that has the same value as the value prop. You can override this by providing a custom isOptionEqual function.

This can be useful when you want to use this component in combination with other components that define parts of the same object.

#Complex labels

TabbedCombobox supports simple string labels, as well as more complex labels.

Complex labels are supported by providing both an optionLabel to generate the rendered label, and a optionFilterValue to generate a string version of the value used for filtering.

#Guidelines

#When to use

• When single selection is required.
• When selecting from user-generated data, where searching might come handy for long lists.
• When there are multiple categories of options, and switching between them provides a better browsing experience.

#Content

• Use sentence case.

#Props

#Combobox

Name	Default	Description
isDisabled	—	boolean Determines if combobox is disabled.
isLoading	—	boolean Indicates that options are being loaded.
isInvalid	—	boolean Indicates that combobox is in invalid state.
isClearable	false	boolean Determines if selection can be cleared.
isOptionDisabled	—	(option: Option) => boolean | string Function to determine whether an option should be disabled. If a string is returned, it will be used as a disabled message.
emptyOptionsMessage	"No options"	string Text to show inside a dropdown when there are no options.
supportsCreatableOptions	—	boolean Determines if user is allowed to create a new option, if it's not present already.
createOptionMessage	"Create "[input value]""	(inputValue: string) => string Text to show inside dropdown when creating a new option.
disableSortingAndFiltering	false	boolean Determines if the options should be sorted and filtered internally.
comboboxRef	—	RefObject<HTMLInputElement> Reference to the combobox input element.
options	—	Option[] Available options. `Option` is a generic, so type of options will be inferred.
optionLabel	—	(option: Option) => string Function to extract label from an option. If it's not provided, `label` field will be used as a label.
optionDescription	—	(option: Option) => string Function to extract description from an option. If it's not provided, `description` field will be used as a label.
optionValue	—	(option: Option) => OptionValue Function to extract value from an option. If it's not provided, `value` field will be used as a value.
optionAccessory	—	(option: Option) => SelectOptionAccessoryType | undefined Function to show an accessory view near the option label.
placeholder	—	string Text to show inside combobox when no option is selected.
removePortal	false	boolean Determines if the select dropdown should be rendered in a portal.
renderInputInControl	true	boolean Determines if the input should be rendered in the control.
showPlaceholderIcon	false	boolean Determines if the placeholder icon should be shown. Only available when optionAccessory is defined.
value	—	OptionValue | undefined Selected option.
variant	"default"	"default" | "alternative" | "heavy" Determines the appearance of the combobox.
size	"md"	"sm" | "md" | "lg" Combobox height.
width	"xs"	"4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "100%" Combobox width.
popoverWidth	undefined	"4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" The dropdown width. If not provided, the select width will be used.
onChange	—	(value: OptionValue | undefined) => void Callback for when user selects a different option or clears the selection.
onCreateOption	—	(inputValue: string) => Promise<void> | void Callback for creating a new option. It can be async.
onClose	—	() => void Callback for when user closes the select.
onOpen	—	() => void Callback for when user opens the select.
onSearchUpdate	—	(inputValue: string) => void Callback for when user changes the input value.
valueLabel	—	(option: Option) => string Function to format a selected option's label. If not provided, `label` field will be used as a label.