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 around the label. Use the accessory prop for content before the label and rightAccessory for content after 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.

Typically the GlobeIcon and gray color scheme are used for the "All" tab.

#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

#TabbedCombobox

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.
disableSortingAndFiltering	false	boolean Determines if the options should be sorted and filtered internally.
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.
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.
showPlaceholderIcon	false	boolean Determines if the placeholder icon should be shown. Only available when optionAccessory is defined.
size	"md"	"sm" | "md" | "lg" Combobox height.
value	—	OptionValue | undefined Selected option.
variant	"default"	"default" | "alternative" | "tertiary" Determines the appearance of the combobox.
fontWeight	"normal"	"normal" | "medium" Determines the font weight of the value and placeholder text.
onChange	—	(value: OptionValue | undefined) => void Callback for when user selects a different option or clears the selection.
onSearchUpdate	—	(inputValue: string) => void Callback for when user changes the input value.
comboboxRef	—	RefObject<HTMLInputElement> Reference to the combobox input element.
optionAccessory	—	(option: Option) => IconAccessoryType | undefined Function to show an accessory view near the option label.
optionEquality	—	(optionValue: OptionValue, value: OptionValue) => boolean Function to check if an option is equal to a value. If no function is provided, lodash `isEqual` will be used.
optionLabel	—	(option: Option) => string | ReactNode Function to extract label from an option. If it's not provided, `label` field will be used as a label.
optionFilterValue	—	(option: Option) => string Function to build the value used when filtering options. If it's not provided, `optionLabel` will be used as a filter value.
tabGroups	—	Array<TabGroup<Option>> Available options. `Option` is a generic, so type of options will be inferred.
width	"xs"	"4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "auto" | "fit-content" | "100%" Combobox width. `TabbedCombobox` always renders its input in the popover, so every width — including the content-sizing `"fit-content"` — is allowed.
popoverWidth	"sm"	"sm" | "md" | "lg" | "xl" The dropdown width. If not provided, the select width will be used.
valueLabel	—	(option: Option) => string | ReactNode Function to format a selected option's label. If not provided, `label` field will be used as a label.
showAllTab	false	boolean If set, the combobox will show an All tab.
allTabAccessory	undefined	IconAccessoryType If set, the combobox will show an All tab.