Tag Group / Chips

Group of tags that can be selectable and removable, with keyboard navigation.

Import

import { TagGroup, Tag } from '@marbleui/ui'

Props

Prop	Type	Default
description	`ReactNode`	`—`
label	`ReactNode`	`—`
variant	`Variant`	`'soft'`

<Tag>

No props of its own.

Also accepts React Aria props (97).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Tag · React Aria TagGroup · React Aria TagList. Follow the primitive's docs for the full keyboard map.

Usage notes

Group of tags that can be selected (as filters) or removed. For a read-only label use Badge; for entering free-form values use MultiSelect or a ComboBox.

<TagGroup label="Labels" selectionMode="multiple" defaultSelectedKeys={['design']}>
  <Tag id="design">design</Tag>
  <Tag id="frontend">frontend</Tag>
</TagGroup>

Selection: selectionMode with defaultSelectedKeys, or controlled selectedKeys and onSelectionChange.
Passing onRemove shows a remove button on each Tag. Update your list there; pair it with items and renderEmptyState for a “No labels” state.
Provide a visible label, or aria-label when there isn’t one. Arrow keys move between tags.
variant is soft (default) or outline; description adds help text.

Example source · show

import { useListData } from 'react-aria-components'
import { Tag, TagGroup } from './tag-group'

function Removable() {
  const list = useListData({
    initialItems: [
      { id: 1, name: 'design' },
      { id: 2, name: 'frontend' },
      { id: 3, name: 'p1' },
      { id: 4, name: 'needs review' },
    ],
  })
  return (
    <TagGroup
      className="w-72"
      label="Labels"
      items={list.items}
      onRemove={(keys) => list.remove(...keys)}
      renderEmptyState={() => <span className="text-xs text-fg-subtle">No labels</span>}
    >
      {(item) => <Tag>{item.name}</Tag>}
    </TagGroup>
  )
}

export const styles = {
  Filter: () => (
    <TagGroup label="Amenities" selectionMode="multiple" defaultSelectedKeys={['wifi', 'parking']} className="w-80">
      <Tag id="wifi">Wi-Fi</Tag>
      <Tag id="parking">Parking</Tag>
      <Tag id="pool">Pool</Tag>
      <Tag id="gym">Gym</Tag>
      <Tag id="pets">Pet friendly</Tag>
    </TagGroup>
  ),
  Outline: () => (
    <TagGroup label="Stack" variant="outline" selectionMode="single" defaultSelectedKeys={['react']}>
      <Tag id="react">React</Tag>
      <Tag id="vue">Vue</Tag>
      <Tag id="svelte">Svelte</Tag>
      <Tag id="solid">Solid</Tag>
    </TagGroup>
  ),
  Removable,
}

Source: packages/ui/src/tag-group/tag-group.tsx

Catalog

Category: collections
Priority: Foundation
Primitive: react-aria
React Aria: TagGroup