React Tagsinput v3.19.0

For this we've used react-tagsinput and restyled it to match out theme.

You can pass the following classNames to get the desire color, react-tagsinput-tag $color, where $color can be one of primary, info, success, warning or danger.

Please refer to react-tagsinput documentation for more information.

Styles

You will find the styles for this component in
assets/scss/nextjs-material-kit-pro/plugins/_plugin-react-tagsinput.scss.

Example

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "react-tagsinput";

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={{ className: "react-tagsinput-tag info" }}
    />
  );
}

export default Tags;