Allows the user to search and select multiple items from a dropdown list of options.
OUI exports 2 tag-field-related components:
If the tag field does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify it to assistive technology.
Defaults to md size.
Contrary to other collection components, TagField only accepts the "dynamic collection" method of populating its options.
As seen below, an iterable list of options is passed to the ComboBox using the defaultItems (or items) prop. Each item accepts the id and textValue props, which are passed to the onSelectionChange handler to identify the selected items.
Selected ids:
If the item does not have the id prop, you will need to pass in a itemToKey function uniquely identify the selected item, and if the item does not have the textValue prop, you will need to pass in a itemToText function to display the selected item. The below example demonstrates this.
Selected emails:
The description prop can be used to associate additional help text below the input.
You can also pass a custom item renderer to the children prop. This allows you to customize the appearance of the items in the list.
Take note to use the key prop on the custom item due to virtualisation. Additionally, the itemProps prop should be spread onto the custom item to ensure that the item is selectable.
Due to virtualisation, if the custom item results in a taller height for each item, you will need to pass in a virtualRowHeight prop with the correct height to the TagField to ensure that the items are displayed correctly.
Selected types:
A TagField can be fully disabled using the isDisabled prop.
You can disable specific options by providing an array of keys to TagField via the disabledKeys prop. This will prevent options with matching keys from being pressable and receiving keyboard focus as shown in the example below.
To display validation errors, pass in both isInvalid and errorMessage props to TagField. This allows you to render error messages from all of the above sources with consistent custom styles. Additionally, ensure that the errorMessage prop is a string that describes the validation error clearly to the user.