Skip to content

TagGroup

Props

API reference for TagGroup. For usage examples, see the React tab.

TagGroup.Root

NameTypeDefault
childrenReactNode

The children of the component.

descriptionstring
disabledKeysIterable<Key>

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

labelstring

TagGroup.Description

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
elementTypestring
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

isInvalidboolean
itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

TagGroup.Label

NameTypeDefault
aboutstring
accessKeystring
autoSavestring
childrenReactNode
colorstring
contentstring
contextMenustring
dangerouslySetInnerHTML{ __html: string | TrustedHTML; }
datatypestring
defaultCheckedboolean
elementTypestring
exportpartsstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)

htmlForstring
inlistany
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Hints at the type of data that might be entered by the user while editing the element or its contents

See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)

isDisabledboolean

Whether the Label is on a disabled input or element.

isRequiredboolean

Whether the Label is on a required input or element.

itemIDstring
itemPropstring
itemRefstring
itemScopeboolean
itemTypestring
partstring

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)

prefixstring
propertystring
radioGroupstring
relstring
resourcestring
resultsnumber
revstring
securitystring
titlestring
typeofstring
unselectable"off" | "on"
vocabstring

TagGroup.List

NameTypeDefault
children((item: T) => ReactNode) | ReactNode

The contents of the collection.

dependenciesreadonly any[]

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

itemsIterable<T>

Item objects in the collection.

renderEmptyState((props: TagListRenderProps) => ReactNode)

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

TagGroup.Tag

NameTypeDefault
childrenReactNode

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

isDisabledboolean

Whether the tag is disabled.

textValuestring

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