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

#TabbedCombobox

Name	Default	Description