# TagGroup
A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
## Content
`TagGroup` follows the [Collection Components API](collections.html?component=TagGroup), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. Items can be removed via the `onRemove` event.
```tsx
import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
import {useListData} from 'react-stately';
function Example() {
let list = useListData({
initialItems: [
{ id: 1, name: 'News' },
{ id: 2, name: 'Travel' },
{ id: 3, name: 'Gaming' },
{ id: 4, name: 'Shopping' }
]
});
return (
list.remove(...keys)}
renderEmptyState={() =>
No categories
}>
{/*- end highlight -*/}
{(item) => {item.name}}
);
}
```
### Links
Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework.
```tsx
import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
{/*- begin highlight -*/}
Landscape
{/*- end highlight -*/}
PortraitMacroNightDualGolden Hour
```
## Selection
Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.html?component=TagGroup) for more details.
```tsx
import type {Selection} from 'react-aria-components';
import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
import {useState} from 'react';
function Example(props) {
let [selected, setSelected] = useState(new Set());
return (