TagGroup

The TagGroup is a dynamic UI component that encapsulates a collection of tags. Each tag, representing a label, category, keyword, or filter, is designed to be used within a TagList for groupings.

Props

TagGroup

isInvalid?

Whether the tags are invalid or not.

necessityIndicator?

Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.

size?

A tag can vary in size.

Defaults to md.
variant?

The visual style of the TagGroup.

Defaults to neutral.
style?

The inline style for the element.

children?

The children of the component.

disabledKeys?

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

selectionMode?

The type of selection that is allowed in the collection.

disallowEmptySelection?

Whether the collection allows empty selection.

selectedKeys?

The currently selected keys in the collection (controlled).

defaultSelectedKeys?

The initial selected keys in the collection (uncontrolled).

onSelectionChange?

Handler that is called when the selection changes.

id?

The element's unique identifier. See MDN.

className?

The CSS className for the element.

selectionBehavior?

How multiple selection should behave in the collection.

onRemove?

Handler that is called when a user deletes a tag.

aria-label?

Defines a string value that labels the current element.

aria-labelledby?

Identifies the element (or elements) that labels the current element.

aria-describedby?

Identifies the element (or elements) that describes the object.

aria-details?

Identifies the element (or elements) that provide a detailed, extended description for the object.

slot?

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

TagList

style?

The inline style for the element. A function may be provided to compute the style based on component state.

children?

The contents of the collection.

items?

Item objects in the collection.

dependencies?

Values that should invalidate the item cache when using dynamic collections.

renderEmptyState?

Provides content to display when there are no items in the tag list.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

Tag

isInvalid?

Whether the tag is invalid or not.

isLoading?

Whether the tag is loading or not.

size?

The size of the tag.

Defaults to md.
variant?

The visual style of the Tag.

Defaults to neutral.
clearButtonProps?

The props of the ClearButton.

spinnerProps?

The props of the Spinner.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

id?

A unique id for the tag.

textValue?

A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.

isDisabled?

Whether the tag is disabled.

children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

href?

A URL to link to. See MDN.

hrefLang?

Hints at the human language of the linked URL. SeeMDN.

target?

The target window for the link. See MDN.

rel?

The relationship between the linked resource and the current page. See MDN.

download?

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

ping?

A space-separated list of URLs to ping when the link is followed. See MDN.

referrerPolicy?

How much of the referrer to send when following the link. See MDN.

routerOptions?

Options for the configured client side router.

onHoverStart?

Handler that is called when a hover interaction starts.

onHoverEnd?

Handler that is called when a hover interaction ends.

onHoverChange?

Handler that is called when the hover state changes.

Anatomy

Composed Components

A TagGroup uses the following components.

A TagList uses the following components.

A Tag uses the following components.

TagGroup Examples

Label

A tag group can contain a label to provide more context to the user.

Description

A tag group can contain a description to provide more information to the user.

Disabled

Tags can be disabled using the disabledKeys prop.

Invalid

If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message.

Removable

Tags can be removed using the onRemove callback. If you are using a keyboard, you can press the backspace key to remove a tag.

Selectable

Tags can be selected using the selectionMode prop. Use defaultSelectedKeys for initially selected items (uncontrolled) and selectedKeys to manage selected items (controlled). The selected keys should match the item's id prop.

Sizes

A tag group can vary in size.

Variants

A tag group can vary in style using the variant prop. The one seen here is subdued.

TagList Examples

Empty List

Using the renderEmptyState prop, you can customize the empty state message when there are no tags.

Tag Examples

Disabled

A tag can be disabled using the isDisabled prop.

Invalid

A tag can be set as invalid using the isInvalid prop.

Sizes

A tag can vary in size.

Variants

A tag can vary in style using the variant prop.

Loading

A tag can have a loading state using the isLoading prop.

Avatar

A tag can contain an avatar.

Icons

A tag can contain an icon or an icon list.

Count

A tag can contain a count using the Badge component.

A tag can be a link by using the href prop on the Tag component. Tags with an href are not selectable.

A tag can be rendered as a react router link when using the href prop and setting the navigate prop on the HopperProvider.

Migration Notes

TagGroup

Coming from Orbiter, you should be aware of the following changes:

  • TagGroup was renamed TagList.
  • onClear is not supported.
  • validationState is not supported. Use isInvalid instead,

TagList

Coming from Orbiter, you should be aware of the following changes:

  • This is not the same as the previous TagList and should be treated as a new component.

Tag

Coming from Orbiter, you should be aware of the following changes:

  • A tag cannot be used without TagList and TagGroup.
  • A dot is not supported
  • fluid is not supported.
  • variant values are now neutral | subdued | progress | positive | caution | negative | option1 | option2 | option3 | option4 | option5 | option6 and not solid | outline.
  • validationState is not supported. Use isInvalid instead.