---
title: Tags
description: Tags are a way to apply multiple labels to an item.
icon: tags
author:
  name: haydenbleasel
  url: https://github.com/haydenbleasel
search:
  keywords: [chips, tag input]
mode: wide
---

<PoweredBy
  packages={[
    { name: 'cmdk', url: 'https://cmdk.paco.me/' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/command' },
    { name: 'Kibo UI', url: 'https://www.kibo-ui.com/components/tags' },
    { name: 'Lucide', url: 'https://lucide.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/tags
```

<ComponentPreview name="tags-demo" title="Tags" description="A component that displays tags." />

## When to use

Tags provide a way to apply multiple labels to items. Use this decision tree:

```mermaid
graph TD;
    A[Need to categorize items?] --> B{Multiple labels per item?};
    A --> |No| C[Use single category selection];
    B --> |Yes| D[Use Tags Component];
    B --> |No| E{Single category only?};
    D --> F{Tag interaction type?};
    E --> |Yes| G[Use Select or Radio buttons];
    F --> H[Interactive Tags - add/remove];
    F --> I[Display-only Tags];
    F --> J[Filterable Tags];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;

    class D,H,I,J recommended;
    class C,G discouraged;
    class A,B,E,F decision;
```

## Features

- Built-in search input to filter through tags
- Supports both controlled and uncontrolled usage
- Caller-owned layout through `className`; shared recipes own control appearance
- Automatically adjusts width based on parent container
- Optional remove button for selected tags
- Full keyboard navigation support through `Command` component
- Shared state management through `TagsContext`

## Examples

### Removable values

Provide an item-specific action name whenever `onRemove` is present. Values without
removal do not accept `removeLabel`. Keyboard removal returns focus to the picker
without opening it.

```tsx
<TagsValue onRemove={removeReact} removeLabel="Remove React">
  React
</TagsValue>
```

Removal actions use the standard destructive-ghost icon Button. Its larger target
intentionally increases chip height compared with the old miniature custom button.

### Default

<ComponentPreview name="tags-demo" title="Tags" description="A component that displays a list of tags." />

### Filter

<ComponentPreview
  name="tags-filter-demo"
  title="Tags with filter"
  description="A component that filters available tags."
/>

## Credits

- We use [Kibo UI](https://www.kibo-ui.com/components/tags) for the tags component and style.