Tag Input
Tag Input is a versatile package designed to simplify the process of managing and displaying tags within input fields. With intuitive components like TagAutocomplete, TagPopover, TagList, and TagInput, users can effortlessly add, remove, and organize tags, enhancing the user experience of tag-based input systems. This package provides a customizable and efficient solution for incorporating tag functionality into web applications.
Installation
yarn add @camped-ui/tag-inputUsage
import { TagType, TagInput } from "@camped-ui/tag-input";Examples
Variant
Choose from different visual styles like default, primary, and destructive.
Animation
Add animations on render for tags.
Border
Choose between different border styles or opt for no border at all.
Interaction
Define the interaction style of the tags. Make them clickable or non-clickable.
Shape
Customize the shape of the tags.
Size
Customize the size of the tags.
TextCase
Control the text casing within the tags.
TextStyles
Customize the text style within the tags.
Props
Autocomplete
Enable or disable the autocomplete feature for the tag input.
Max Tag
Set the maximum number of tags that can be added.
Custom tag render
Replace the standard tag appearance with your own custom-designed tags.
Truncate tag
Prevent tags from overflowing the tag input by specifying the maximum number of characters to display.
Clear all tags
Clear all tags from the tag input.
Draggable
Allow tags to be dragged and dropped to reorder them.
Tag Popover
Allows users to view all entered tags in a popover overlay, offering easier management of tags.
Allow Duplicate tags
Allow duplicate tags to be added to the tag input.
Direction tags
Change the direction of the tag layout from row to column.
Input field position
Change the position of the input field to be inline or stacked in relation to the tags.
Options
| Option | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "" | Placeholder text for the input. |
| tags | Array<{ id: string, text: string }> | [] | An array of tags that are displayed as pre-selected. |
| setTags | React.Dispatch<React.SetStateAction<{ id: string, text: string }[]>> | [] | Function to set the state of tags. |
| enableAutocomplete | boolean | false | Enable autocomplete feature. Must be used with autocompleteOptions. |
| autocompleteOptions | Array<{ id: string, text: string }> | [] | List of options for autocomplete. Must be used with enableAutocomplete. |
| maxTags | number | null | Maximum number of tags allowed. |
| minTags | number | null | Minimum number of tags required. |
| readOnly | boolean | false | Make the input read-only. |
| disabled | boolean | false | Disable the input. |
| onTagAdd | Function | null | Callback function when a tag is added. |
| onTagRemove | Function | null | Callback function when a tag is removed. |
| allowDuplicates | boolean | false | Allow duplicate tags. |
| maxLength | number | null | Maximum length of a tag. |
| minLength | number | null | Maximum length of tag. |
| validateTag | Function | null | Function to validate a tag. |
| delimiter | Delimiter | null | Character used to separate tags. |
| showCount | boolean | false | Show the count of tags. |
| placeholderWhenFull | string | "" | Placeholder text when tag limit is reached. |
| sortTags | boolean | false | Sort tags alphabetically. |
| delimiterList | Array | [] | List of characters that can be used as delimiters. |
| truncate | number | null | Truncate tag text to a certain length. |
| autocompleteFilter | Function | null | Function to filter autocomplete options. |
| direction | string | row | Layout direction of the tag inputs. |
| onInputChange | Function | null | A callback function that is called whenever the input value changes. |
| customTagRenderer | Function | null | A callback function that is used to render custom tag elements. This function receives a tag object as an argument and should return a React element representing the custom-rendered tag. |
| onFocus | Function | null | Function to be called when the input field gains focus. |
| onBlur | Function | null | Function to be called when the input field loses focus. |
| restrictTagsToAutocompleteOptions | boolean | false | Only allow tags that are present in the autocomplete options. |
| onTagClick | Function | null | A callback function to be called when a tag is clicked |
| draggable | boolean | false | Enable drag and drop functionality. |
| inputFieldPosition | string | bottom | Position of the input field in relation to the tags |
| clearAll | boolean | false | Show a button to clear all tags. |
| onClearAll | Function | null | A callback function to be called when the clear all button is clicked. |
| inputProps | Object | {} | Additional props to be passed to the input field (for example autocomplete, disabled etc). |
| usePopoverForTags | boolean | false | Use a popover to display tags instead of inline. |