Badge input presents user with a set of options and allows to select one of them.
Badge input should be disabled, when user shouldn't be allowed to interact with it.
Individual options can be disabled too.
You can also provide a custom message when an option is disabled:
Mark badge input as loading, when options are fetched on the fly and are not yet available.
Invalid badge input indicates that current value isn't what the system expects.
Options can display an additional descriptive text underneath the label.
For a description that applies to all the options use the top-level description prop.
Options can display an additional accessory view before the label. You can show an image using an image accessory. This is useful for showing logos when selecting sources or destinations, for example.
Image accessory can also indicate a status of the related resource. For example, this would be useful for sync statuses.
Allowed values are the same as in status indicator.
Badge input, as a combobox, supports filtering options based on the input value. This state is accessible via the onSearchUpdate prop. Any change that's typed in the input will call this function.
You can disable sorting and filtering internally by setting disableSortingAndFiltering to true. This could be helpful if the options are already sorted and filtered externally.
Badge input allows user to create a new option on the fly, when no suitable option exists.
For that, enable supportsCreatableOptions and set an onCreateOption function that will handle creation of options.
Options can be created asynchronously, but you need to handle loading state yourself via isLoading prop.
You don't have to create objects with label and value keys as shown in the examples above.
BadgeInput 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.
There's a version of BadgeInput called GroupedBadgeInput, that supports groups of options.
The size prop impacts font-size and height. Default is set to md.
To set the width, use the width prop instead.
When rendering smaller-width badge inputs, you may end up with options that are quite tall. To make the options easier to read, pass in a specific width for the popover using popoverWidth.
It is recommended to match widths, when possible.
| Name | Default | Description |
|---|
| Name | Default | Description |
|---|