@gcforms/tag-input 0.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-05-14
+
+### Added
+
+- Initial release

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@gcforms/tag-input",
+  "version": "0.0.0",
+  "author": "Canadian Digital Service",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@4.6.0",
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}

package/src/TagInput.tsx

@@ -0,0 +1,269 @@
+import { useRef, useState } from "react";
+import { CancelIcon } from "./icons/CancelIcon";
+import "./styles.css";
+import { useTranslation } from "./i18n/useTranslation";
+import { WarningIcon } from "./icons/WarningIcon";
+
+const keys = {
+  ENTER: "Enter",
+  ESC: "Escape",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  TAB: "Tab",
+  DELETE: "Delete",
+  BACKSPACE: "Backspace",
+  COMMA: ",",
+  SPACE: " ",
+  SEMICOLON: ";",
+};
+
+export const TagInput = ({
+  initialTags,
+  name = "tag-input",
+  id = "tag-input",
+  label = "Tags",
+  locale = "en",
+  placeholder,
+  description,
+  restrictDuplicates = true,
+  maxTags,
+  onTagAdd,
+  onTagRemove,
+  validateTag,
+}: {
+  initialTags?: string[];
+  name?: string;
+  id?: string;
+  label?: string;
+  locale?: string;
+  placeholder?: string;
+  description?: string;
+  restrictDuplicates?: boolean;
+  maxTags?: number;
+  onTagAdd?: (tag: string) => void;
+  onTagRemove?: (tag: string) => void;
+  validateTag?: (tag: string) => {
+    isValid: boolean;
+    errors?: string[];
+  };
+}) => {
+  const tagInputRef = useRef<HTMLInputElement>(null);
+  const [selectedTags, setSelectedTags] = useState<string[]>(initialTags || []);
+  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null);
+  const [errorMessages, setErrorMessages] = useState<string[]>([]);
+  const [ariaLiveRegionText, setAriaLiveRegionText] = useState<string | null>(null);
+  const { t } = useTranslation(locale);
+
+  const say = (phrase: string) => {
+    setAriaLiveRegionText(phrase);
+  };
+
+  const resetMessages = () => {
+    setErrorMessages([]);
+  };
+
+  const handleAddTag = (tag: string) => {
+    resetMessages();
+
+    if (maxTags && selectedTags.length >= maxTags) {
+      // Announce max tags reached
+      say(t("maxTagsReached", { maxTags: maxTags.toString() }));
+
+      // Display a validation error
+      setErrorMessages([t("maxTagsReached", { max: maxTags.toString() })]);
+      return;
+    }
+
+    if (validateTag) {
+      const { isValid, errors } = validateTag(tag);
+      if (!isValid) {
+        // Announce invalid tag
+        say(t("announceInvalidTag", { tag }));
+
+        // Display validation errors
+        setErrorMessages(errors || []);
+        return;
+      }
+    }
+
+    if (restrictDuplicates && selectedTags.includes(tag)) {
+      // Announce duplicate tag
+      say(t("announceDuplicateTag", { tag }));
+
+      // Highlight the duplicate tag momentarily
+      const duplicateTagIndex = selectedTags.indexOf(tag);
+      const duplicateTagElement = document.getElementById(`tag-${duplicateTagIndex}`);
+      if (duplicateTagElement) {
+        duplicateTagElement.classList.add("duplicate");
+        setTimeout(() => {
+          duplicateTagElement.classList.remove("duplicate");
+        }, 4000); // Remove the class after 4 seconds
+      }
+
+      // Display a validation error
+      setErrorMessages([t("duplicateTag", { tag })]);
+      return;
+    }
+
+    // Fire onTagAdd callback
+    if (onTagAdd) {
+      onTagAdd(tag);
+    }
+
+    // Announce tag added
+    say(t("announceTagAdded", { tag }));
+
+    // Add the tag to the selected tags
+    setSelectedTags((prevTags) => [...prevTags, tag]);
+  };
+
+  const handleRemoveTag = (index: number) => {
+    const tag = selectedTags[index];
+
+    // Fire onTagRemove callback
+    if (onTagRemove) {
+      onTagRemove(tag);
+    }
+
+    // Announce tag removed
+    say(t("announceTagRemoved", { tag }));
+
+    // Remove the tag from the selected tags
+    setSelectedTags((prevTags) => prevTags.filter((_, i) => i !== index));
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    resetMessages();
+
+    const { key } = event;
+    const acceptKeys = [keys.ENTER, keys.TAB, keys.COMMA];
+    const navigateKeys = [keys.ARROW_LEFT, keys.ARROW_RIGHT];
+
+    // Clear selection when entering text input
+    if (!navigateKeys.includes(key) && selectedTagIndex !== null) {
+      setSelectedTagIndex(null);
+    }
+
+    // Accept tag input
+    if (acceptKeys.includes(key)) {
+      const tag = event.currentTarget.value.trim();
+      if (tag) {
+        event.preventDefault();
+        handleAddTag(tag);
+        event.currentTarget.value = "";
+      }
+    }
+
+    // Delete selected tag
+    if (key === keys.DELETE && selectedTagIndex !== null) {
+      handleRemoveTag(selectedTagIndex);
+      setSelectedTagIndex(null);
+      return;
+    }
+
+    // Backspace key handling
+    if (key === keys.BACKSPACE) {
+      // If a tag is selected, delete it
+      if (selectedTagIndex !== null) {
+        handleRemoveTag(selectedTagIndex);
+        setSelectedTagIndex(null);
+        return;
+      }
+
+      // If the input is empty, delete the last tag
+      if (event.currentTarget.value === "") {
+        if (selectedTags.length) {
+          handleRemoveTag(selectedTags.length - 1);
+          event.currentTarget.value = "";
+        }
+      }
+    }
+
+    // Roving through tags with arrow keys
+    if (event.currentTarget.value === "") {
+      if (key === keys.ARROW_LEFT) {
+        if (selectedTags.length) {
+          let newTagIndex = 0;
+          if (selectedTagIndex === null) {
+            newTagIndex = selectedTags.length - 1;
+          } else if (selectedTagIndex > 0) {
+            newTagIndex = selectedTagIndex - 1;
+          }
+          setSelectedTagIndex(newTagIndex);
+          say(t("announceTagSelected", { tag: selectedTags[newTagIndex] }));
+        }
+      }
+
+      if (key === keys.ARROW_RIGHT) {
+        if (selectedTags.length) {
+          if (selectedTagIndex === null) {
+            setSelectedTagIndex(0);
+          } else if (selectedTagIndex < selectedTags.length - 1) {
+            setSelectedTagIndex(selectedTagIndex + 1);
+            say(t("announceTagSelected", { tag: selectedTags[selectedTagIndex + 1] }));
+          }
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="gc-tag-input-container" onClick={() => tagInputRef.current?.focus()}>
+      <label htmlFor={id} className="gc-tag-input-label">
+        {label}
+      </label>
+      {description && <p className="gc-tag-input-description">{description}</p>}
+      <span id="input-instructions" aria-live="polite" className="visually-hidden">
+        {t("inputLabel", { tags: selectedTags.length.toString() })}
+      </span>
+      <div className="gc-tag-input">
+        {selectedTags.map((tag, index) => (
+          <div
+            key={`${tag}-${index}`}
+            id={`tag-${index}`}
+            className={`gc-tag ${selectedTagIndex === index ? "gc-selected-tag" : ""}`}
+          >
+            <div>{tag}</div>
+            <button type="button" onClick={() => handleRemoveTag(index)}>
+              <CancelIcon />
+            </button>
+          </div>
+        ))}
+
+        <input
+          aria-describedby="input-instructions"
+          data-testid="tag-input"
+          id={id}
+          name={name}
+          type="text"
+          placeholder={placeholder}
+          onKeyDown={handleKeyDown}
+          ref={tagInputRef}
+        />
+        <span
+          id="tag-input-live-region"
+          className="gc-visually-hidden"
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+        >
+          {ariaLiveRegionText}
+        </span>
+      </div>
+      <div
+        role="alert"
+        aria-live="assertive"
+        className="gc-tag-input-error"
+        data-testid="tag-input-error"
+      >
+        {errorMessages.length > 0 &&
+          errorMessages.map((error, index) => (
+            <div key={`error-${index}`}>
+              <WarningIcon />
+              {error}
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};

package/src/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "announceDuplicateTag": "\"{tag}\" is a duplicate tag",
+  "announceInvalidTag": "Invalid tag: \"{tag}\"",
+  "announceTagAdded": "Tag \"{tag}\" added",
+  "announceTagRemoved": "Tag \"{tag}\" removed",
+  "announceTagSelected": "Tag \"{tag}\" selected",
+  "duplicateTag": "Tag already added",
+  "inputLabel": "{tags} tags. Use Enter, Tab, or a comma to create a tag. Use left and right arrow keys to navigate tags. Use Backspace or Delete to remove a tag.",
+  "maxTagsReached": "Maximum number of tags reached ({max})"
+}

package/src/i18n/fr.json

@@ -0,0 +1,10 @@
+{
+  "announceDuplicateTag": "\"{tag}\" est une balise dupliquée",
+  "announceInvalidTag": "Balise invalide : \"{tag}\"",
+  "announceTagAdded": "Balise \"{tag}\" ajoutée",
+  "announceTagRemoved": "Balise \"{tag}\" supprimée",
+  "announceTagSelected": "Tag \"{tag}\" sélectionnée",
+  "duplicateTag": "La balise a déjà été ajoutée",
+  "inputLabel": "Balises {tags}. Utilisez Entrée, la touche Tab ou une virgule pour créer une balise. Utilisez les touches fléchées gauche et droite pour naviguer dans les balises. Utilisez le retour en arrière ou Supprimer  pour enlever une balise.",
+  "maxTagsReached": "Le nombre maximal de balises a été atteint ({max})"
+}

package/src/i18n/index.tsx

@@ -0,0 +1,12 @@
+import en from "./en.json";
+import fr from "./fr.json";
+
+const translations = {
+  en,
+  fr,
+};
+
+export default translations;
+export type Language = keyof typeof translations;
+export type TranslationKey = keyof typeof translations.en;
+export type Translations = typeof translations.en;

package/src/i18n/useTranslation.tsx

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import type { Translations } from "../i18n";
+import type { TranslationKey } from "../i18n";
+import translations, { Language } from "../i18n";
+
+export const useTranslation = (initialLocale: string) => {
+  let locale = initialLocale as Language;
+
+  if (!translations[initialLocale as Language]) {
+    // eslint-disable-next-line no-console
+    console.warn(`The locale "${initialLocale}" is not supported. Defaulting to "en".`);
+    locale = "en";
+  }
+
+  const t = useCallback(
+    (key: TranslationKey, placeholders?: Record<string, string>): string => {
+      const langTranslations = translations[locale] as Translations;
+      let translation = langTranslations[key] || key;
+
+      if (placeholders) {
+        Object.entries(placeholders).forEach(([placeholder, value]) => {
+          translation = translation.replace(new RegExp(`{${placeholder}}`, "g"), value);
+        });
+      }
+
+      return translation;
+    },
+    [locale]
+  );
+
+  return { t, locale };
+};

package/src/icons/CancelIcon.tsx

@@ -0,0 +1,15 @@
+export const CancelIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    width="24"
+    className={className}
+    viewBox="0 0 24 24"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6Zm3.6 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z" />
+  </svg>
+);

package/src/icons/WarningIcon.tsx

@@ -0,0 +1,16 @@
+export const WarningIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    width="24"
+    className={className}
+    viewBox="0 96 960 960"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+    data-testid="WarningIcon"
+  >
+    {title && <title>{title}</title>}
+    <path d="m40 936 440-760 440 760H40Zm138-80h604L480 336 178 856Zm302-40q17 0 28.5-11.5T520 776q0-17-11.5-28.5T480 736q-17 0-28.5 11.5T440 776q0 17 11.5 28.5T480 816Zm-40-120h80V496h-80v200Zm40-100Z" />
+  </svg>
+);

package/src/index.ts

@@ -0,0 +1 @@
+export { TagInput } from "./TagInput";

package/src/styles.css

@@ -0,0 +1,99 @@
+:root {
+  --gc-tag-input-border-color: #4338ca;
+  --gc-tag-input-background-color: #eef2ff;
+  --gc-tag-input-text-color: #374151;
+  --gc-tag-border-color: #000000;
+  --gc-tag-duplicate-bg-color: #fef2f2;
+  --gc-tag-duplicate-text-color: #d3080c;
+  --gc-tag-selected-bg-color: #ffffff;
+  --gc-tag-selected-text-color: #1e293b;
+  --gc-error-text-color: #b91c1c;
+}
+
+.gc-tag-input {
+  display: flex;
+  padding: 0.5rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  border-width: 1px;
+  border-color: var(--gc-tag-border-color);
+  border-radius: 0.375rem;
+
+  .gc-tag {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    gap: 0.25rem;
+    align-items: center;
+    border-radius: 0.375rem;
+    border: 1px solid var(--gc-tag-input-border-color);
+    background-color: var(--gc-tag-input-background-color);
+    color: var(--gc-tag-input-text-color);
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+    &.duplicate {
+      background-color: var(--gc-tag-duplicate-bg-color);
+      color: var(--gc-tag-duplicate-text-color);
+      border-color: var(--gc-tag-duplicate-text-color);
+      svg {
+        color: var(--gc-tag-duplicate-text-color);
+        fill: var(--gc-tag-duplicate-text-color);
+      }
+    }
+    &.gc-selected-tag {
+      background-color: var(--gc-tag-selected-bg-color);
+      color: var(--gc-tag-selected-text-color);
+      border-color: var(--gc-tag-selected-text-color);
+      svg {
+        color: var(--gc-tag-selected-text-color);
+        fill: var(--gc-tag-selected-text-color);
+      }
+    }
+  }
+
+  input {
+    display: inline-block;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    border-style: none;
+    outline-style: none;
+  }
+}
+
+.gc-tag-input-label {
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.gc-tag-input-description {
+  margin-top: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.gc-tag-input-error {
+  font-weight: 700;
+  margin-top: 1rem;
+  color: var(--gc-error-text-color);
+  svg {
+    color: var(--gc-error-text-color);
+    fill: var(--gc-error-text-color);
+    display: inline-block;
+    margin-right: 0.25rem;
+  }
+}
+
+.gc-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/src/tests/TagInput.cy.tsx

@@ -0,0 +1,239 @@
+"use client";
+import React from "react";
+
+import { TagInput } from "../TagInput";
+
+describe("<TagInput />", () => {
+  it("renders without crashing", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} />
+      </div>
+    );
+  });
+
+  it("accepts initial tags", () => {
+    cy.mount(
+      <div>
+        <TagInput
+          initialTags={["Tag one", "Tag two", "Tag three"]}
+          onTagAdd={() => {}}
+          onTagRemove={() => {}}
+        />
+      </div>
+    );
+
+    cy.get(".gc-tag").should("have.length", 3);
+    cy.get(".gc-tag").should("contain", "Tag one");
+    cy.get(".gc-tag").should("contain", "Tag two");
+    cy.get(".gc-tag").should("contain", "Tag three");
+  });
+
+  it("sets the name attribute", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} name="test-name" />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").should("have.attr", "name", "test-name");
+  });
+
+  it("adds a custom label", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} label="Custom Label" />
+      </div>
+    );
+
+    cy.get(".gc-tag-input-label").should("contain", "Custom Label");
+  });
+
+  it("adds a custom description", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} description="Custom Description" />
+      </div>
+    );
+
+    cy.get(".gc-tag-input-description").should("contain", "Custom Description");
+  });
+
+  it("adds a tag", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
+    cy.get("[data-testid='tag-input']").should("have.value", "");
+    cy.get(".gc-tag").should("contain", "New Tag");
+  });
+
+  it("announces that a tag was added", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} />
+      </div>
+    );
+    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
+    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "New Tag" added`);
+  });
+
+  it("restricts duplicates", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={["Tag 1"]} restrictDuplicates={true} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("Tag 1{enter}");
+    cy.get("[data-testid='tag-input']").should("have.value", "");
+    cy.get(".gc-tag").should("have.length", 1);
+  });
+
+  it("announces that a duplicate tag was added", () => {
+    cy.mount(
+      <div>
+        <TagInput restrictDuplicates={true} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("Tag 1{enter}Tag 1{enter}");
+    cy.get("#tag-input-live-region").should("exist").and("contain", `"Tag 1" is a duplicate tag`);
+  });
+
+  it("allows duplicates", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={["Tag 1"]} restrictDuplicates={false} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("Tag 1{enter}");
+    cy.get("[data-testid='tag-input']").should("have.value", "");
+    cy.get(".gc-tag").should("have.length", 2);
+  });
+
+  it("removes a tag", () => {
+    const onTagRemove = cy.stub().as("onTagRemove");
+
+    cy.mount(
+      <div>
+        <TagInput initialTags={["Tag 1", "Tag 2"]} onTagAdd={() => {}} onTagRemove={onTagRemove} />
+      </div>
+    );
+
+    cy.get(".gc-tag").should("contain", "Tag 2").should("contain", "Tag 1");
+    cy.get("#tag-0 button").click();
+    cy.get(".gc-tag").should("contain", "Tag 2").should("not.contain", "Tag 1");
+    cy.get("@onTagRemove").should("have.been.calledWith", "Tag 1");
+  });
+
+  it("removes a selected tag", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={["one", "two", "three", "four", "five", "six"]} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("{leftarrow}{leftarrow}{leftarrow}{leftarrow}{del}");
+    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "three" removed`);
+    cy.get(".gc-tag").should("not.contain", "three");
+  });
+
+  it("announces when a tag is removed", () => {
+    cy.mount(
+      <div>
+        <TagInput initialTags={["Tag 1"]} onTagAdd={() => {}} onTagRemove={() => {}} />
+      </div>
+    );
+
+    cy.get(".gc-tag").should("contain", "Tag 1");
+    cy.get(".gc-tag button").click();
+    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "Tag 1" removed`);
+  });
+
+  it("calls onTagAdd handler when adding a tag", () => {
+    const onTagAdd = cy.stub().as("onTagAdd");
+
+    cy.mount(
+      <div>
+        <TagInput initialTags={[]} onTagAdd={onTagAdd} onTagRemove={() => {}} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
+    cy.get("[data-testid='tag-input']").should("have.value", "");
+    cy.get(".gc-tag").should("contain", "New Tag");
+    cy.get("@onTagAdd").should("have.been.calledWith", "New Tag");
+  });
+
+  it("calls onTagRemove handler when removing a tag", () => {
+    const onTagRemove = cy.stub().as("onTagRemove");
+
+    cy.mount(
+      <div>
+        <TagInput initialTags={["Tag one", "Tag two"]} onTagRemove={onTagRemove} />
+      </div>
+    );
+
+    cy.get(".gc-tag").should("contain", "Tag one");
+    cy.get(".gc-tag").first().find("button").click();
+    cy.get("[data-testid='tag-input']").should("not.contain", "Tag one");
+    cy.get("@onTagRemove").should("have.been.calledWith", "Tag one");
+  });
+
+  it("validates the tag according to the validation function", () => {
+    const validateTag = (tag: string) => {
+      const errors: string[] = [];
+
+      if (tag.length < 3) {
+        errors.push("Tag must be at least 3 characters long");
+      }
+
+      if (/\d/.test(tag)) {
+        errors.push("Tag must not include numbers");
+      }
+
+      if (tag.length > 10) {
+        errors.push("Tag must be at most 10 characters long");
+      }
+
+      return {
+        isValid: errors.length === 0,
+        errors: errors,
+      };
+    };
+
+    cy.mount(
+      <div>
+        <TagInput validateTag={validateTag} />
+      </div>
+    );
+
+    cy.get("[data-testid='tag-input']").type("ab{enter}");
+    cy.get("[data-testid='tag-input-error'] div").should("have.length", 1);
+    cy.get("[data-testid='tag-input-error']").should(
+      "contain",
+      "Tag must be at least 3 characters long"
+    );
+
+    cy.get("[data-testid='tag-input']").type("abcdefghijklmnopqrstuvwxy{enter}");
+    cy.get("[data-testid='tag-input-error'] div").should("have.length", 1);
+    cy.get("[data-testid='tag-input-error']").should(
+      "contain",
+      "Tag must be at most 10 characters long"
+    );
+
+    // Multiple errors
+    cy.get("[data-testid='tag-input']").type("T1{enter}");
+    cy.get("[data-testid='tag-input-error'] div").should("have.length", 2);
+    cy.get("[data-testid='tag-input-error']").should(
+      "contain",
+      "Tag must be at least 3 characters long"
+    );
+    cy.get("[data-testid='tag-input-error']").should("contain", "Tag must not include numbers");
+  });
+});