TagInput

Examples

Size variants

Available ui prop values for size: xs / s / m / l.

Large

Normal

Small

Extra small

<template>
<article>
  <section>
    <veui-tag-input
      v-model="valueL"
      ui="l"
    />
  </section>
  <section>
    <veui-tag-input v-model="valueM"/>
  </section>
  <section>
    <veui-tag-input
      v-model="valueS"
      ui="s"
    />
  </section>
  <section>
    <veui-tag-input
      v-model="valueXs"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { TagInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Read-only

Use the readonly prop to set the input to readonly state.

Read-only

Large

Normal

Small

Extra small

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="readonly">
      Read-only
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-tag-input
        v-model="valueL"
        ui="l"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueM"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueS"
        ui="s"
        :readonly="readonly"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueXs"
        ui="xs"
        :readonly="readonly"
      />
    </section>
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small'],
      readonly: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Disabled

Use the disabled prop to disable the input.

Disabled

Large

Normal

Small

Extra small

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <section>
      <veui-tag-input
        v-model="valueL"
        ui="l"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueM"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueS"
        ui="s"
        :disabled="disabled"
      />
    </section>
    <section>
      <veui-tag-input
        v-model="valueXs"
        ui="xs"
        :disabled="disabled"
      />
    </section>
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      valueS: ['Small'],
      valueL: ['Large'],
      valueM: ['Normal'],
      valueXs: ['Extra small'],
      disabled: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Allow duplicate

Use the allow-duplicate prop to allow duplicate tags.

Allow duplicate

Steve

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="allowDuplicate">
      Allow duplicate
    </veui-checkbox>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :allow-duplicate="allowDuplicate"
    />
  </section>
</article>
</template>

<script>
import { TagInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      allowDuplicate: true,
      value: ['Steve', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Maximum tags

Use the max prop to limit the maximum number of tags.

Max tag count

Tony

Steve

2/3

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Max tag count</h4>
    <veui-number-input v-model="max"/>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :max="max"
    />
  </section>
</article>
</template>

<script>
import { TagInput, NumberInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      max: 3,
      value: ['Tony', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Maximum characters

Use the maxlength prop to limit the maximum number of characters.

Max tag length

Tony

Steve

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Max tag length</h4>
    <veui-number-input v-model="maxlength"/>
  </section>
  <section>
    <veui-tag-input
      v-model="value"
      :maxlength="maxlength"
    />
  </section>
</article>
</template>

<script>
import { TagInput, NumberInput } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      maxlength: 6,
      value: ['Tony', 'Steve']
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

Custom tags

Use the tag slot to customize the display of tags.

Stephen

Wanda

Carol

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tag-input v-model="value">
      <template #tag="{ tag, attrs, listeners }">
        <veui-tag
          ui="bordered"
          color="violet"
          v-bind="attrs"
          v-on="listeners"
        >
          {{ tag }}
        </veui-tag>
      </template>
    </veui-tag-input>
  </section>
</article>
</template>

<script>
import { TagInput, Tag } from 'veui'

export default {
  components: {
    'veui-tag-input': TagInput,
    'veui-tag': Tag
  },
  data () {
    return {
      value: ['Stephen', 'Wanda', 'Carol']
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.

value

string

v-model

The value of the input tags list.

input-value

string

''

.sync

The value of the text input box.

disabled boolean false Whether the tag input is disabled.

readonly boolean false Whether the tag input is read-only.

placeholder string - Input placeholder.

clearable boolean false Whether to show the clear button.

autofocus boolean false Whether to autofocus the tag input.

maxlength number - The maximum number of characters that can be entered.

max number - The maximum number of tags that can be added.

strict

boolean | Object

false

When boolean, it configures both maxlength and max restrictions in strict mode. When Object, it can be configured separately.

Name	Type	Description
`maxlength`	`boolean`	Whether to strictly input the length and prohibit input beyond the limit.
`max`	`boolean`	Whether to strictly limit the number of tags entered, and new tags added beyond the limit will not take effect.

get-length function(string): number - A custom function to calculate the length of characters.

allow-duplicate boolean false Whether to allow duplicate tags.

Slots

Name Description

tag

The added tag items.

Default content: The tag items rendered by the Tag component.

Name	Type	Description
`attrs`	`Object`	Properties that need to be output to the standard `Tag` component. You can use `v-bind="attrs"` for unified output.
`listeners`	`Object`	Event listeners that need to be output to the standard `Tag` component. You can use `v-on="listeners"` for unified output.
`tag`	`string`	The text value of the tag item.
`index`	`function(value: *): void`	Used to switch selected items.
`key`	`string`	The `key` of the tag item, which must be bound to a single item.
`invalid`	`boolean`	Whether it is in an invalid state of validation.
`readonly`	`boolean`	Whether it is in read-only state.
`disabled`	`boolean`	Whether it is in a disabled state.
`edit`	`function(): void`	Edit the current tag item.
`remove`	`function(): void`	Remove the current tag item.

Events

Name	Description
`change`	`v-model` Triggered when the content of the tag list changes. The callback function takes `(value: Array<string>)` as its parameter, where `value` is the list of tags that have been entered.
`input`	`.sync` Triggered when the input content in the text box changes. The callback function takes `(inputValue: string)` as its parameter, where `inputValue` is the text content of the input box.
`clear`	Triggered when the clear button is clicked.

In addition, TagInput supports the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, and focusout.

The parameters of the callback function are all native event objects.

Icons

Name	Description
`remove`	The clear button.

Edit this page on GitHubEdit