Introduction

Shadecn Tags Input is a versatile React component that enables you to create an interactive tags input field with suggestion support. It's built on top of the shadcn/ui principles, offering a seamless integration with your React applications.

Key Features

The component comes with several powerful features out of the box:

• Tag Creation & Management: Easily add and remove tags
• Suggestions Support: Display and filter suggestions as users type
• Keyboard Navigation: Full keyboard support for accessibility
• Customizable Styling: Follows shadcn/ui theming system
• TypeScript Support: Built with type safety in mind

Basic Example

Here's a quick example of how to use the Tags Input component:

import { TagsInput } from "@/components/ui/tags-input";

export default function Demo() {
  return (
    <TagsInput
      value={selectedTags}
      onChange={setSelectedTags}
      suggestions={suggestions}
      onlyFromSuggestions={true}
      maxTags={3}
      onError={handleError}
      placeholder="add tag"
      className=""
    />
  );
}

Why Shadecn Tags Input?

When building modern web applications, handling multiple input values in the form of tags is a common requirement. Whether you're building a blog platform that needs tag management, a search interface with multiple filters, or any application that requires grouping of items, Shadecn Tags Input provides a robust solution.

Key benefits include:

• Seamless integration with shadcn/ui components
• Accessible by default
• Minimal bundle size
• Customizable styling

Getting Started

Props

Prop	Type	Default	Description
value	Tag[]	Required	Array of current tags
onChange	(tags: Tag[]) => void	Required	Callback when tags change
suggestions	Tag[]	[]	Array of suggestion tags
className	string	undefined	Container class name
inputClassName	string	undefined	Input field class name
badgeClassName	string	undefined	Tag badge class name
badgeCloseClassName	string	undefined	Close button class name
autocompleteClassName	string	undefined	Suggestions dropdown class name
onlyFromSuggestions	boolean	false	Only allow tags from suggestions
maxTags	number	undefined	Maximum number of tags allowed
onError	(code: TagErrorCode) => void	undefined	Error callback
placeholder	string	undefined	Input placeholder text

To start using Shadecn Tags Input in your project, head over to the Installation guide. There, you'll find detailed instructions on how to set up the component and integrate it into your application.

Keyboard Navigation

• Enter: Add a tag
• Backspace: Remove the last tag (when input is empty)
• Arrow Up/Down: Navigate through suggestions
• Escape: Close suggestions

Error Handling

The component provides two error codes:

• E01: Tag already exists
• E02: Tag not in suggestions (when onlyFromSuggestions is true)

For more advanced usage and customization options, check out our Examples section.