Tags can be made actionable to support either being “cleared” or “added”.By providing an onClear handler and a clearLabel, a ButtonIcon component with a clear icon will be added to the right of the tag label.Alternatively, providing an onAdd handler and an addLabel will insert a ButtonIcon component with an add icon to the right of the tag label. The aria-label for the button can be customised by providing the relevant clearLabel or addLabel prop.
Use actionable tags to allow users to input data, make selections, define search criteria or filter content. Common patterns include selecting from a list or entering text in a form field. Below are examples of each.
Selecting from a list
Allows users to select items from a predefined list.
Allows users to select items from a predefined list, enter their own items, or a combination of both. The example below uses Autosuggest to surface a predefined list, however additional approaches can be created using Dropdown or TextField.
Suggestions will appear below the field as you type
Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.