Tagify Input Tags | Nova - Responsive WebApp UI Kit

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/tagify/dist/tagify.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/tagify/dist/jQuery.tagify.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.tagsinput.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify");
  });
</script>

Basic Example

css

html

javascript

<input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify");
  });
</script>

Blacklist

Use data-blacklist="apple" attribute.

new

bestseller

apple

<input class='form-control-tags js-tagify' placeholder='Write some tags' value='new, bestseller, apple'
       data-blacklist='apple,ananas'>

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify");
  });
</script>

Remove all button

Use data-clear-btn="#remove-tags-btn" attribute.

css

html

javascript

<!-- With Remove Button -->
<div class="form-group">
  <input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript"
         data-clear-btn="#remove-tags-btn">
</div>
<button id="remove-tags-btn" class="btn btn-primary">Remove all</button>
<!-- End With Remove Button -->

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify");
  });
</script>

Mix with Patterns

Start typing 'a' with @ or #

cartman

⁠ and

kyle

⁠ do not know

Homer simpson

⁠ because he"s a relic.

<textarea class="form-control-tags tags-textarea js-tagify-mix">[[cartman]] and [[kyle]] do not know [[homer simpson]] because he"s a relic.</textarea>

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify-mix", {
      mode: 'mix',
      pattern: /@|#/,
      enforceWhitelist: true,
      whitelist: [
        {
          value: 'cartman',
          title: 'Eric Cartman'
        },
        {
          value: 'kyle',
          title: 'Kyle Broflovski'
        },
        {
          value: 'Homer simpson'
        },
        {
          value: 'apple'
        }
      ],
      dropdown: {
        enabled: 1,
        classname: "tagify__dropdown__menu"
      }
    });
  });
</script>

Render suggestions list manually

<input class="form-control-tags js-tagify-list" data-list-manual="true" placeholder="Write some tags">

<script>
  $(document).on("ready", function () {
    // initialization of tagify
    $.HSCore.components.HSTagsInput.init(".js-tagify-list", {
      whitelist: ["A# .NET", "A# (Axiom)", "A-0 System"],
      dropdown: {
        position: "manual",
        maxItems: Infinity,
        enabled: 0,
        classname: "tagify__dropdown__menu"
      },
      enforceWhitelist: true
    });
  });
</script>

Custom templates

Holden Alvarado

Aleena Houston

<input class="form-control-tags js-tagify-avatars" placeholder="Add members">

<script>
 $(document).on('ready', function () {
   var tagifyAvatars = $.HSCore.components.HSTagsInput.init(".js-tagify-avatars", {
   delimiters: null,
   templates : {
     tag : function(v, tagData){
       try{
         return `<tag title="${v}" contenteditable="false" spellcheck="false" class="tagify__tag ${tagData.class ? tagData.class : ""}" ${this.getAttributes(tagData)}>
                  <x title="remove tag" class="tagify__tag__removeBtn"></x>
                    <div>
                        ${tagData.code ?
           `<img class="tag-avatar rounded-circle mr-2" style="margin-top: 2.2px;"
                width="20px" height="20px"
                src="${tagData.code.toLowerCase()}">` : ""
         }
                        <span class="tagify__tag-text">${v}</span>
                    </div>
                      </tag>`;
       }
       catch(err){}
     },

      dropdownItem : function(tagData){
        try {
          return `<div class="tagify__dropdown__item ${tagData.class ? tagData.class : ""}">
                    <img class="rounded-circle mr-2" style="margin-top: 2.2px;" width="20px" height="20px"
                         src="${tagData.code.toLowerCase()}">
                    <span>${tagData.value}</span>
                  </div>`
                  }
                catch(err){}
              }
            },
            enforceWhitelist: true,
            whitelist: [
              {value: 'Holden Alvarado', code: '../../assets/img/100x100/img4.jpg'},
              {value: 'Aleena Houston', code: '../../assets/img/100x100/img5.jpg'},
              {value: 'Macey Parks', code: '../../assets/img/100x100/img6.jpg'},
              {value: 'Andres Welch', code: '../../assets/img/100x100/img7.jpg'},
              {value: 'Haiden Stephens', code: '../../assets/img/100x100/img8.jpg'},
              {value: 'Leon Hartman', code: '../../assets/img/100x100/img9.jpg'},
              {value: 'Briley Massey', code: '../../assets/img/100x100/img10.jpg'},
              {value: 'Lana Joyce', code: '../../assets/img/100x100/img11.jpg'},
              {value: 'Sylvia Huang', code: '../../assets/img/100x100/img12.jpg'},
            ],
            dropdown: {
              enabled: 1,
              classname: "tagify__dropdown__menu"
            }
    });

    // add the first 2 tags from the "allowedTags" Aray automatically
    tagifyAvatars.addTags(tagifyAvatars.settings.whitelist.slice(0, 2));
  });
</script>

Sizing

Use .form-control-sm or .form-control-lg

Result
HTML

css

html

javascript

css

html

javascript

css

html

javascript

<!-- Small -->
<div class="form-group">
  <input class="form-control-tags form-control-sm js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Small -->

<!-- Default -->
<div class="form-group">
  <input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Default -->

<!-- Large -->
<div class="form-group">
  <input class="form-control-tags form-control-lg js-tagify" placeholder="Write some tags" value="css, html, javascript">
</div>
<!-- End Large -->

<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Modal Toggle -->

<!-- Tags Input Modal -->
<div class="modal fade" id="exampleModal" tabindex="1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <label>Write some tags</label>
        <div class="input-group">
          <input class="form-control-tags js-tagify" value="css, html, javascript">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- End Tags Input Modal -->

Validation states

For more inforamation about form validation your can read on Validation page

Result
HTML

css

html

javascript

Write some tags

<div class="u-has-success">
  <input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
  <small class="text-success">Write some tags</small>
</div>

Result
HTML

css

html

javascript

Write some tags

<div class="u-has-error">
  <input class="form-control-tags js-tagify" placeholder="Write some tags" value="css, html, javascript">
  <small class="text-danger">Write some tags</small>
</div>

Tagify

Official documentation

How to use?

Basic Example

Blacklist

Remove all button

Mix with Patterns

Render suggestions list manually

Custom templates

Sizing

Modal

Validation states