TagsInput

A tags input is a single or multiline control that allows the input of tags.

Source Code

uikit-react-core

Enter your tagsThis is where you enter your tags

label

description

multiline

readOnly

disabled

<HvTagsInput 
  label="Enter your tags"
  description="This is where you enter your tags"
  multiline={false}
  readOnly={false}
  disabled={false}
/>

<HvTagsInput 
  label="Enter your tags"
  description="This is where you enter your tags"
  multiline={false}
  readOnly={false}
  disabled={false}
/>

Custom tag addition

You can configure custom tag addition behavior, via the commitTagOn or commitOnBlur properties.

Custom submissionEnter a space, comma, Enter, or blur to add a tag

<HvTagsInput
  label="Custom submission"
  description="Enter a space, comma, Enter, or blur to add a tag"
  placeholder="Enter value"
  commitTagOn={["Space", "Comma", "Enter"]}
  commitOnBlur
/>

<HvTagsInput
  label="Custom submission"
  description="Enter a space, comma, Enter, or blur to add a tag"
  placeholder="Enter value"
  commitTagOn={["Space", "Comma", "Enter"]}
  commitOnBlur
/>

Controlled

Control the input with the value/onChange props. The value is an array of either string or HvTag props.

Controlled tags

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState([
    { label: "success", color: "positive" },
    { label: "warn", color: "warning" },
    "tag 3",
  ]);


  return (
    <HvTagsInput
      label="Controlled tags"
      placeholder="Enter tags"
      value={value}
      onChange={(event, value) => setValue(value)}
    />
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState([
    { label: "success", color: "positive" },
    { label: "warn", color: "warning" },
    "tag 3",
  ]);

  return (
    <HvTagsInput
      label="Controlled tags"
      placeholder="Enter tags"
      value={value}
      onChange={(event, value) => setValue(value)}
    />
  );
}

Controlled validation

Control the addition and removal of tags with the onAdd and onRemove props respectively.

Controlled validationTags with dashes can't be added or removed

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(["tag-1", "tag-2"]);
  const [status, setStatus] = useState<HvFormStatus>("valid");
  const [statusMessage, setStatusMessage] = useState("");


  const isInvalidTag = (label?: string) => label?.includes("-");


  return (
    <HvTagsInput
      label="Controlled validation"
      description="Tags with dashes can't be added or removed"
      value={value}
      status={status}
      statusMessage={statusMessage}
      onAdd={(event, newTag) => {
        if (isInvalidTag(newTag.label)) {
          setStatus("invalid");
          setStatusMessage("Tags with dashes can't be added");
          return;
        }
        setStatus("valid");
        setStatusMessage("");
        setValue((curr) => curr.concat(newTag.label));
      }}
      onDelete={(event, newTag) => {
        if (isInvalidTag(newTag)) {
          setStatus("invalid");
          setStatusMessage("Tags with dashes can't be removed");
          return;
        }
        setStatus("valid");
        setStatusMessage("");
        setValue((curr) => curr.filter((t) => t !== newTag));
      }}
    />
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(["tag-1", "tag-2"]);
  const [status, setStatus] = useState<HvFormStatus>("valid");
  const [statusMessage, setStatusMessage] = useState("");

  const isInvalidTag = (label?: string) => label?.includes("-");

  return (
    <HvTagsInput
      label="Controlled validation"
      description="Tags with dashes can't be added or removed"
      value={value}
      status={status}
      statusMessage={statusMessage}
      onAdd={(event, newTag) => {
        if (isInvalidTag(newTag.label)) {
          setStatus("invalid");
          setStatusMessage("Tags with dashes can't be added");
          return;
        }
        setStatus("valid");
        setStatusMessage("");
        setValue((curr) => curr.concat(newTag.label));
      }}
      onDelete={(event, newTag) => {
        if (isInvalidTag(newTag)) {
          setStatus("invalid");
          setStatusMessage("Tags with dashes can't be removed");
          return;
        }
        setStatus("valid");
        setStatusMessage("");
        setValue((curr) => curr.filter((t) => t !== newTag));
      }}
    />
  );
}

Suggestions

Auto-complete suggestions can be shown by using the suggestionListCallback prop, similar to HvInput’s. The suggestionsLoose allows adding any value besides the suggestions.

CountriesSelect countries from South America

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState<HvTagProps[]>([]);


  return (
    <HvTagsInput
      className="mb-lg"
      label="Countries"
      description="Select countries from South America"
      placeholder="Select countries"
      value={value}
      suggestionsLoose // disable to restrict to suggestions
      onChange={(event, value) => setValue(value)}
      suggestionListCallback={findCountries}
    />
  );
}


function findCountries(val: string) {
  if (!val) return null;
  const foundCountries = countries.filter((c) =>
    c.toUpperCase().startsWith(val.toUpperCase()),
  );


  return foundCountries.length === 0
    ? null
    : foundCountries.map((country, id) => ({ id, label: country }));
}


const countries = [
  "Argentina",
  "Bolivia",
  "Brazil",
  "Chile",
  "Colombia",
  "Ecuador",
  "French Guiana",
  "Guyana",
  "Nicaragua",
  "Paraguay",
  "Peru",
  "Suriname",
  "Uruguay",
  "Venezuela",
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState<HvTagProps[]>([]);

  return (
    <HvTagsInput
      className="mb-lg"
      label="Countries"
      description="Select countries from South America"
      placeholder="Select countries"
      value={value}
      suggestionsLoose // disable to restrict to suggestions
      onChange={(event, value) => setValue(value)}
      suggestionListCallback={findCountries}
    />
  );
}

function findCountries(val: string) {
  if (!val) return null;
  const foundCountries = countries.filter((c) =>
    c.toUpperCase().startsWith(val.toUpperCase()),
  );

  return foundCountries.length === 0
    ? null
    : foundCountries.map((country, id) => ({ id, label: country }));
}

const countries = [
  "Argentina",
  "Bolivia",
  "Brazil",
  "Chile",
  "Colombia",
  "Ecuador",
  "French Guiana",
  "Guyana",
  "Nicaragua",
  "Paraguay",
  "Peru",
  "Suriname",
  "Uruguay",
  "Venezuela",
];

Tag Textarea

TagsInput

Custom tag addition

Controlled

Controlled validation

Suggestions

Related components