Tag Field

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. The TagField component extends the TagInput element by adding a label, description and validation variants.

A tag field

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

---

Usage

import { TagField } 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));
}

<TagField
    id="tag-field-demo"
    label="A tag field"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
/>

---

Label

Use the label prop to add a label to the TagField component.

Tag field label 👋

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

<TagField
    id="tag-field-label"
    label="Tag field label 👋"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
/>

---

Description

Use the description prop to add a description to the TagField component.

Tag field label 👋

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

Tag field description 🙌

<TagField
    id="tag-field-description"
    label="Tag field label 👋"
    description="Tag field description 🙌"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
/>

---

Disabled

Use the disabled prop to disable the TagField component.

A tag field

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

<TagField
    id="tag-field-disabled"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    disabled={true}
/>

---

validation

Use the validation prop to add validation to the TagField component. The TagField provides four validation variants: success, warning, info, and error.

Success

Success variant

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

Success unlocked. Keep soaring!

<TagField
    id="tag-field-success"
    label="Success variant"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    validation={{
        variant: "success",
        message: "Success unlocked. Keep soaring!"
    }}
/>

Warning

Warning variant

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

Caution: Proceed with care to avoid potential pitfalls.

<TagField
    id="tag-field-warning"
    label="Warning variant"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    validation={{
        variant: "warning",
        message: "Caution: Proceed with care to avoid potential pitfalls."
    }}
/>

Info

Info variant

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

Information: Knowledge is the key to empowerment.

<TagField
    id="tag-field-info"
    label="Info variant"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    validation={{
        variant: "info",
        message: "Information: Knowledge is the key to empowerment."
    }}
/>

Error

Error variant

AdventureActionComedyDramaFantasyHorrorMysteryRomanceThrillerWesternSci-FiCrimeAnimationDocumentaryMusicalWarWith Space

Error: Unable to proceed without required input.

<TagField
    id="tag-field-error"
    label="Error variant"
    onAddTag={handleAddTag}
    onRemoveTag={handleRemoveTag}
    tags={tags}
    validation={{
        variant: "error",
        message: "Error: Unable to proceed without required input."
    }}
/>

---

Props

Attribute	Type	Description	Default
id*	string |	ID for the tag field.	-
label*	string |	Label for the tag field.	-
tags	array |	Array of `string` tags to display	-
labelSuffix	node |	Content to display after the label.	-
description	string |	Description for the tag field.	-
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 |	-	-
validation	{ variant: string, message: node } |	Validation state and message	-
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 |	-	-