---
title: "Tag group"
description: "A set of chips: labels, services, filters in force. Arrow keys move between tags; with onRemove each tag has a remove button (and Backspace removes the focused one); with selectionMode tags can be chosen."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tag group

## Removable

```tsx
import { useState } from 'react';
import { Tag, TagGroup } from '@arbol-ai/ui';

const RemovableExample = () => {
  const [labels, setLabels] = useState([
    { id: 'vip', name: 'VIP' },
    { id: 'new', name: 'New patient' },
    { id: 'whatsapp', name: 'Prefers WhatsApp' },
  ]);
  return (
    <TagGroup
      emptyLabel="No labels"
      items={labels}
      label="Contact labels"
      onRemove={(keys) => {
        setLabels((current) => current.filter((label) => !keys.has(label.id)));
      }}
    >
      {(label) => <Tag>{label.name}</Tag>}
    </TagGroup>
  );
};

<RemovableExample />
```

## Selectable

```tsx
import { Tag, TagGroup } from '@arbol-ai/ui';

<TagGroup defaultSelectedKeys={['checkup']} label="Services" selectionMode="multiple">
  <Tag id="checkup">Annual checkup</Tag>
  <Tag id="vaccine">Vaccination</Tag>
  <Tag id="lab">Lab results</Tag>
</TagGroup>
```

## Source

The examples above are [`src/components/tag-group/tag-group.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/tag-group/tag-group.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/collections/tag-group/index.mdx