Input Tag

Previews with Code

Example 1: Simple Tag Input

Example 2: Tag Input with Custom Limit

Example 3: Advanced Tag Input with Stacked Layout

Installation

The TagInput component allows users to dynamically add and manage tags with flexible layout options and styling.

npx axionjs-ui add tag-input

File Structure

Props

TagInput Props

Tag Interface

interface Tag {
  id: string;
  text: string;
}

Features

• Dynamic Tag Management:
  • Add, remove, and navigate between tags with keyboard support.
• Flexible Layouts:
  • Choose between inline, stacked, or custom tag layouts.
• Customizable Limits:
  • Set maximum tag counts with visual feedback.
• Pre-populated Tags:
  • Initialize with existing tags for editing workflows.
• Advanced Styling:
  • Comprehensive style customization for all component parts.
• Keyboard Navigation:
  • Navigate and edit tags using keyboard shortcuts.

Accessibility

The TagInput component includes:

• Proper labeling with associated form elements
• Keyboard navigation between tags
• Focus management
• Screen reader announcements for tag actions
• Clear visual indicators for interactive elements

Usage with Form Libraries

The TagInput component works well with popular form libraries:

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { TagInput } from "@/components/ui/tag-input";
 
const form = useForm({
  defaultValues: {
    tags: [],
  },
});
 
// In your component:
<Controller
  name="tags"
  control={form.control}
  render={({ field }) => (
    <TagInput
      id="form-tags"
      label="Tags"
      initialTags={field.value}
      setTags={(newTags) => field.onChange(newTags)}
      maxTags={5}
    />
  )}
/>

Conclusion

The TagInput component provides a flexible solution for tag management in forms and interfaces. With support for various layouts, keyboard navigation, and comprehensive styling options, it adapts to many different use cases and design requirements.