Tag Input
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The TagInput component provides an intuitive way to add and remove tags. Perfect for categorization, filtering, skill selection, or any scenario where you need multiple values in a tag format. Features keyboard navigation, custom separators, and flexible input handling.
Basic Usage
With Helper Text
Press Enter or comma to add tags. Use Backspace to remove the last tag.
Custom Separator
Use pipe (|) or Enter to separate tags
With Initial Values
From String
From Array
Form Integration
Tag Management
react
typescript
2 tags selected
Quick Add:
Properties
TagInput
| Property | Type | Description |
|---|---|---|
value | string[] | Array of current tags (controlled). |
onChange | (value: string[]) => void | Callback fired when tags change. |
initialValue | string | string[] | Initial tags value (uncontrolled). |
separator | string | Character used to separate tags. Default is ",". |
placeholder | string | Placeholder text for the input. |
helperText | string | Helper text displayed below the input. |
className | string | Additional CSS classes for the container. |
id | string | HTML id attribute for the input element. |
Accessibility
The TagInput component includes comprehensive accessibility features:
- Keyboard Navigation - Enter and comma keys add tags, Backspace removes tags
- Focus Management - Proper focus handling for input and tag removal
- Screen Reader Support - Tags and actions announced to screen readers
- ARIA Labels - Descriptive labels for tag removal buttons
- Form Integration - Works seamlessly with form libraries and validation
- Visual Feedback - Clear visual indicators for interactive elements
Common Use Cases
The TagInput component is perfect for:
- Skill Selection - Add programming languages, frameworks, or tools
- Categorization - Tag content with categories or labels
- Filtering - Create filter tags for search and data filtering
- Keywords - Add SEO keywords or metadata tags
- User Interests - Collect user preferences and interests
- Product Tags - Tag products with features or characteristics
- Contact Management - Add labels to contacts or organizations
Best Practices
- Clear Instructions - Provide helpful placeholder and helper text
- Validation - Validate tags for length, format, or allowed values
- Duplicate Prevention - Prevent duplicate tags automatically
- Reasonable Limits - Consider setting maximum number of tags
- Consistent Separators - Use familiar separators like comma or Enter
- Visual Feedback - Show clear states for adding and removing tags
- Accessibility - Ensure keyboard navigation and screen reader support
- Form Integration - Handle form submission and validation properly