InputTag

Input multiple tags as discrete values.

Basic Usage

tag1

tag2

Add a tag

<template>
  <bp-input-tag placeholder="Add a tag" v-model="val" style="width: 280px"></bp-input-tag>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const val = ref<string[]>(["tag1", "tag2"]);
</script>

Tag Collapse

Collapse overflow tags with max-tag-count (shows +N...).

Show at most 3 tags

Vue

React

Angular

+1...

Press Enter to add

All tags: [ "Vue", "React", "Angular", "Svelte" ]

Show at most 2 tags

Tag A

Tag B

+1...

Press Enter to add

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Show at most 3 tags</div>
      <bp-input-tag v-model="val" :max-tag-count="3" placeholder="Press Enter to add" style="width: 280px" />
      <div class="value">All tags: {{ val }}</div>
    </div>
    <div>
      <div class="label">Show at most 2 tags</div>
      <bp-input-tag v-model="val2" :max-tag-count="2" placeholder="Press Enter to add" style="width: 280px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref(["Vue", "React", "Angular", "Svelte"]);
const val2 = ref(["Tag A", "Tag B", "Tag C"]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

Disabled

Disable the input with disabled.

Normal

Vue

React

Press Enter to add

Disabled

Vue

React

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Normal</div>
      <bp-input-tag v-model="val" placeholder="Press Enter to add" style="width: 280px" />
    </div>
    <div>
      <div class="label">Disabled</div>
      <bp-input-tag v-model="val" disabled style="width: 280px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref(["Vue", "React"]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

InputTag Props

v-model	Bound value	Array	-	-
id	Input id	String	-	-
name	Input name	String	-	-
placeholder	Placeholder	String	-	-
disabled	Whether disabled	Boolean	-	-
max-tag-count	Max visible count	Number	-	-

InputTag Events

add	Triggered when a tag is added	value: String	-
remove	Triggered when a tag is removed	value: String, index: Number	-