Tags Input

#Basic usage

Pigments

Qinghua

Celadon

tags-input/basic.vue

<script setup lang="ts">
import { TagsInput } from "@bysages/vue";
</script>

<template>
  <TagsInput.Root :default-value="['Qinghua', 'Celadon']">
    <TagsInput.Label>Pigments</TagsInput.Label>
    <TagsInput.Control>
      <TagsInput.Context v-slot="{ value }">
        <TagsInput.Item v-for="(tag, index) in value" :key="index" :index="index" :value="tag">
          <TagsInput.ItemPreview>
            <TagsInput.ItemText>{{ tag }}</TagsInput.ItemText>
            <TagsInput.ItemDeleteTrigger
              ><svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                aria-hidden="true"
              >
                <path d="M6 6l12 12M18 6 6 18" /></svg
            ></TagsInput.ItemDeleteTrigger>
          </TagsInput.ItemPreview>
          <TagsInput.ItemInput />
        </TagsInput.Item>
      </TagsInput.Context>
      <TagsInput.Input placeholder="Add pigment" />
      <TagsInput.ClearTrigger
        ><svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <path d="M6 6l12 12M18 6 6 18" /></svg
      ></TagsInput.ClearTrigger>
    </TagsInput.Control>
    <TagsInput.HiddenInput />
  </TagsInput.Root>
</template>

#Props

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemDeleteTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreview

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Description
`disabled`	`boolean \| undefined`	—
`index`	`string \| number`	—
`value`	`string`	—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the vessel at rest.
`addOnPaste`	`boolean`	`false`	Whether to add a tag when you paste values into the tag input
`allowDuplicates`	`boolean`	`false`	Whether to allow duplicate tags
`allowOverflow`	`boolean`		Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
`autoFocus`	`boolean`		Whether the input should be auto-focused
`blurBehavior`	`'clear' \| 'add'`		The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"clear"`: clear the input value
`defaultInputValue`	`string`		The initial tag input value when rendered. Use when you don't need to control the tag input value.
`defaultValue`	`string[]`		The initial tag value when rendered. Use when you don't need to control the tag value.
`delimiter`	`string \| RegExp`	`","`	The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
`disabled`	`boolean`		Whether the tags input should be disabled
`editable`	`boolean`	`true`	Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
`form`	`string`		The associate form of the underlying input element.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item(opts: tagsInput.ItemProps): string; itemDeleteTrigger(opts: tagsInput.ItemProps): string; itemInput(opts: tagsInput.ItemProps): string; }>`		The ids of the elements in the tags input. Useful for composition.
`inputValue`	`string`		The controlled tag input's value
`invalid`	`boolean`		Whether the tags input is invalid
`max`	`number`	`Infinity`	The max number of tags
`maxLength`	`number`		The max length of the input.
`modelValue`	`string[]`		The v-model value of the tags input
`name`	`string`		The name attribute for the input. Useful for form submissions
`placeholder`	`string`		The placeholder text for the input when there are no tags
`readOnly`	`boolean`		Whether the tags input should be read-only
`required`	`boolean`		Whether the tags input is required
`sanitizeValue`	`(value: string) => string`		Function to sanitize the tag value before adding it
`translations`	`tagsInput.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`validate`	`(details: tagsInput.ValidateArgs) => boolean`		Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.