TagGroup

A list of tags that can be selected or removed.

TagGroup.tsx

import {Tag, TagGroup} from 'alinea/components'

export function TagGroupExample() {
  return (
    <TagGroup
      label="Tags"
      selectionMode="multiple"
      defaultSelectedKeys={new Set(['linen'])}
    >
      <Tag id="linen">Linen</Tag>
      <Tag id="bedroom">Bedroom</Tag>
      <Tag id="summer">Summer</Tag>
      <Tag id="sale">Sale</Tag>
    </TagGroup>
  )
}

Props

`<TagGroup>`

PropTypeDefaultDescription

variantTagVariantDefault 'primary'

shapeTagShapeDefault 'square'

onRemove(keys: Set<Key>) => voidDefault –Shows a remove button on every tag

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

selectionModeSelectionModeDefault –

selectedKeysSelectionDefault –

defaultSelectedKeysSelectionDefault –

onSelectionChange(keys: Selection) => voidDefault –

disabledKeysIterable<Key>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<Tag>`

PropTypeDefaultDescription

idKeyDefault –Key of the tag, used in the selection and in onRemove

textValuestringDefault –Text for keyboard navigation and screen readers, inferred from a string child

disabledbooleanDefault –

variantTagVariantDefault –Defaults to the variant of the surrounding TagGroup

shapeTagShapeDefault –Defaults to the shape of the surrounding TagGroup

Also accepts className and style and data-* attributes.