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
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.