Tags Input Fieldv1.0.0
GitHub
Production Ready

Professional Tags InputComponent Library

Enterprise-grade React component with advanced form validation, smooth animations, and comprehensive TypeScript support. Built for scalable applications.

Try Live DemoView on GitHub

Type Safe

Full TypeScript support with comprehensive type definitions

Performant

Optimized with React.memo and efficient re-rendering

Customizable

Multiple variants and extensive styling options

Developer DX

Intuitive API with comprehensive documentation

Getting Started

Installation & Setup

Simply copy the component and install dependencies. No package installation required.

Install Dependencies
Install the required packages for the component to work.
Installation Commandsbash
# Install required dependencies
npm install lucide-react class-variance-authority clsx tailwind-merge cmdk

# Install shadcn/ui components
npx shadcn@latest add form input badge button

# Install React Hook Form and validation
npm install react-hook-form @hookform/resolvers zod

# Install Framer Motion for animations
npm install framer-motion

No Package Installation

Just copy the component file and install these dependencies. No npm package to install.

Interactive Demo & 7 Usage Scenarios

Explore different configurations and use cases. Test the component with various settings and see real-time results.

Live Demo - 7 Usage Scenarios
Try different configurations and see how the component behaves in various contexts.

Skills & Expertise

Professional skills with validation

React
TypeScript

Add your technical skills

2 tags

Technologies & Frameworks

Secondary variant with length limits

Frameworks and tools you use

Personal Interests

Minimal variant with outline tags

Programming Languages

Default variant with custom suggestions

Development Tools

Enterprise variant with destructive tags

Tools and software you use daily

Project Categories

Minimal variant with team collaboration focus

Team & Collaboration

Default variant for team-related tags

Tools for team collaboration

Key Features
Enterprise-grade features built for production applications.
Performance

Optimized Rendering

Memoized components with React Hook Form integration for minimal re-renders.

Variants

Multiple Design Systems

Enterprise, minimal, and default variants with customizable tag styles.

Validation

Form Integration

Built-in validation with React Hook Form and Zod schema support.

Usage Statistics
See how the component performs across different scenarios.
Total Scenarios7
Variant Types3
Tag Variants4
Max Suggestions12
Code Examples
Copy and paste these examples to get started quickly.
Basic Implementationtsx
import { TagsInputField } from "@/components/tags-input-field"
import { useForm, FormProvider } from "react-hook-form"

function MyForm() {
  const form = useForm({
    defaultValues: {
      skills: ["React", "TypeScript"]
    }
  })

  return (
    <FormProvider {...form}>
      <TagsInputField
        name="skills"
        label="Skills"
        placeholder="Add your skills..."
        maxTags={10}
        suggestions={["JavaScript", "Python", "Go", "Rust"]}
      />
    </FormProvider>
  )
}
API Reference

Complete API Documentation

Comprehensive reference for all props, methods, and configuration options.

Component Props
All available props and their TypeScript definitions.
TagsInputFieldProps Interfacetsx
interface TagsInputFieldProps<TFieldValues extends FieldValues> {
  // Core Props
  name: Path<TFieldValues>                    // Form field name (required)
  label: string                               // Field label (required)
  
  // Display & Behavior
  beautifyName?: string                       // Custom name for tag counter
  description?: string                        // Help text below field
  placeholder?: string                        // Input placeholder text
  disabled?: boolean                          // Disable the entire field
  className?: string                          // Additional CSS classes
  autoFocus?: boolean                         // Auto-focus on mount
  
  // Validation & Limits
  maxTags?: number                           // Maximum number of tags
  maxLength?: number                         // Maximum tag character length
  allowDuplicates?: boolean                  // Allow duplicate tags
  
  // Styling Variants
  variant?: "default" | "enterprise" | "minimal"
  tagVariant?: "default" | "secondary" | "outline" | "destructive"
  
  // Icons & Suggestions
  startIcon?: ReactNode                      // Icon at start of input
  endIcon?: ReactNode                        // Icon at end of input
  suggestions?: string[]                     // Autocomplete suggestions
}

Required Props

name

Form field name for React Hook Form integration

label

Display label for the input field

Variant Options

variant

"default" | "enterprise" | "minimal"

tagVariant

"default" | "secondary" | "outline" | "destructive"