Tag Input

A tags input is a user interface element that enables users to input multiple entries, formatting them as tags within a text field. This functionality is also referred to as a Tagging/Tokenizing system.

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

---

Usage

import { TagInput } from "@newfold/ui-component-library";

const tagsPool = [
    'Adventure', 'Action', 'Comedy', 'Drama', 'Fantasy', 'Horror', 'Mystery',
    'Romance', 'Thriller', 'Western', 'Sci-Fi', 'Crime', 'Animation',
    'Documentary', 'Musical', 'War', 'With Space'
];

const [tags, setTags] = useState(tagsPool || []);

const handleAddTag = (tag) => {
    setTags([...tags, tag]);
};

const handleRemoveTag = (index) => {
    setTags(tags.filter((tag, i) => i !== index));
}

<TagInput
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
/>

---

TagInput.Tag Sub Component

You can use the TagInput.Tag sub component to render the tags. This will override the the tags prop.

With this method, you can pass props individually to each tag, giving you more granular control over the rendered tags.

AdventureActionDisabled Tag

<TagInput>
    <TagInput.Tag 
        key={0}
        tag="Adventure"
        index={0}
        onRemoveTag={() => {alert('custom remove tag function')}}
    />
    <TagInput.Tag
        key={1}
        tag="Action"
        index={1}
        onRemoveTag={x => console.log(x)}
    />
    <TagInput.Tag
        key={2}
        tag="Disabled Tag"
        index={2}
        onRemoveTag={() => {alert('custom remove tag function')}}
        disabled
        screenReaderRemoveTag="Non-removable tag"
    />
</TagInput>

---

Disabled

Use the disabled prop to disable the tag input.

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

<TagInput
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    disabled
/>

---

Props

Attribute	Type	Description	Default
tags	array |	Array of `string` tags to display	-
children	node |	You can pass `TagInput.Tag` subcomponent(s) as children to render tags. This will override the `tags` prop.	-
onAddTag	function |	Callback function when a tag is added. The function will receive the new tag as a parameter.	-
onRemoveTag	function |	Callback function when a tag is removed. The function will receive the removed tag as a parameter.	-
onSetTags	function |	Sets the tags to the given array.	-
onBlur	function |	-	-
screenReaderRemoveTag	string |	Screen reader text for the remove tag button.	Remove tag
disabled	bool |	If true, the tag input will be disabled.	false
className	string |	-	-