<p align="center"> <img alt="vue-tag-selector logo" src=""> <br/> <br/> <a href=""><img src="https://img.shi
Last updated 4 months ago by tomquinonero .
Original npm · Tarball · package.json
$ cnpm install vue-tag-selector 
SYNC missed versions from official npm registry.

vue-tag-selector logo

npm bundle size (minified) npm bundle size (minified + gzip) npm version

Vue-tag-selector is a component for vuejs for tag type fields.
Light (6.3kb gzipped) and customizable.
Offering regex validation.

vue-tag-selector demo

Check out the demo


# with npm
npm install --save vue-tag-selector
# with yarn
yarn add vue-tag-selector


For using the component you just need to import the component and register it:

import TagSelector from 'vue-tag-selector'
export default {
  components: { TagSelector },
    return {
      tags: []

And then use it in your template:

  <div class="container">
    <tag-selector name="tags" v-model="tags"/>

API Documentation

Here's a list of the props available:

  • label: Displays a label, has to be String can be ignored
  • name: Required. usually the field name.
  • classes: Allows you to add classes to the field. String or Array.
  • regex: A RegExp. Validates every tag and disallow adding if not matching. By default it's alphanumerical only (/^[a-zA-Z0-9]*$/)
  • regexError: The error displayed when the Regex doesn't match


The component philosophy is pretty straightforward here: only the mandatory style is bundled. I personally never liked js library that needs too much CSS. Only 26 lines of CSS here ????. But you can easily stylize the component.

Have an example template:

<div class="field tag-selector">
  <label for="tags">Post tags</label>
  <div class="tag-selector--input">
      <div class="tag-selector--item">
        Dogs <i class="icon tag-selector--remove">delete_icon</i>
      <div class="tag-selector--item">
        Cats <i class="icon tag-selector--remove">delete_icon</i>
      <div class="tag-selector--item">
        Horses <i class="icon tag-selector--remove">delete_icon</i>
    <input type="text" id="tags" name="tags" class="tag-selector-input">
  <p class="validation-message">The tag you entered is at the wrong format. Please only use alphanumerical characters.</p>

One rule tho, .tag-selector--input has to be display: flex;.

You can see different themes applied in the demo


on Bundlephobia - on npm

Created by Tom Quinonero

Current Tags

  • 0.2.4                                ...           latest (4 months ago)

10 Versions

  • 0.2.4                                ...           4 months ago
  • 0.2.3                                ...           4 months ago
  • 0.2.2                                ...           4 months ago
  • 0.2.1                                ...           4 months ago
  • 0.2.0                                ...           4 months ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Today 0
This Week 1
This Month 2
Last Day 0
Last Week 1
Last Month 10
Dependencies (1)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2016 © |