InputTags

Free-text tags

For labels the user makes up: keywords, topics, addresses to invite. When the values come from a known list, use Combobox or a multiple Select instead, so nobody types a tag that doesn't exist.

Basic

Tags

• anime
• 2015

[ "anime", "2015" ]

<script setup lang="ts">
import { ref } from "vue";
import { BlessInputTags, BlessLabel } from "blessing-ui";
const tags = ref(["anime", "2015"]);
</script>

<template>
  <div class="col">
    <BlessLabel for="d-tags">Tags</BlessLabel>
    <BlessInputTags id="d-tags" v-model="tags" placeholder="type, Enter or comma" :max="6" />
    <small>{{ tags }}</small>
  </div>
</template>

• separators takes keys (Enter) and characters (,). Characters also split a paste and work on phone keyboards, which don't report the comma key.
• Backspace in an empty draft removes the last tag. Adds and removes are announced to screen readers.
• max stops adding at that many; duplicates allows the same tag twice.
• Inside a Field the field's label names it; alone, pass label. name submits one value per tag, like a multiple select.

Usage

import { BlessInputTags } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
placeholder	string	—
name	string	—	submitted with the form, one value per tag
separators	string[]	["Enter", ","]	keys (Enter) or characters (,) that commit the draft; characters also split a paste
max	number	—
disabled	boolean	—
invalid	boolean	—
label	string	—
duplicates	boolean	—	allow the same tag twice
modelValue	string[]	[]

Events

Name	Payload	Description
update:modelValue	[value: string[]]