Tags

Tags are a way to apply multiple labels to an item.

Powered by

cmdkShadcn UIKibo UILucide

Installation

npx shadcn@latest add @redpanda/tags

pnpm dlx shadcn@latest add @redpanda/tags

yarn dlx shadcn@latest add @redpanda/tags

bunx shadcn@latest add @redpanda/tags

nubx shadcn@latest add @redpanda/tags

aube dlx shadcn@latest add @redpanda/tags

When to use

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

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.

<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

Filter

Credits

• We use Kibo UI for the tags component and style.