Preview

Installation

npx sigma-ui@latest add tags-input

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from '@/components/ui/tags-input';

const modelValue = ref(['Apple', 'Banana']);
</script>

<template>
  <TagsInput v-model="modelValue">
    <TagsInputItem
      v-for="item in modelValue"
      :key="item"
      :value="item"
    >
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>

    <TagsInputInput placeholder="Fruits..." />
  </TagsInput>
</template>

• v-model is a string[]. Typing in TagsInputInput and pressing Enter adds a tag.
• Render one TagsInputItem per value, with TagsInputItemText for the label and TagsInputItemDelete for the remove button.

Examples

Tags with Combobox

Combines the tags input with a Combobox so the user picks tags from a filtered list.

API Reference

TagsInput

Props

Prop	Type	Default
modelValue The controlled value of the tags input. Can be bind as v-model.	AcceptableInputValue[] | null	-
defaultValue The value of the tags that should be added. Use when you do not need to control the state of the tags input	AcceptableInputValue[]	-
addOnPaste When true, allow adding tags on paste. Work in conjunction with delimiter prop.	boolean	-
addOnTab When true allow adding tags on tab keydown	boolean	-
addOnBlur When true allow adding tags blur input	boolean	-
duplicate When true, allow duplicated tags.	boolean	-
disabled When true, prevents the user from interacting with the tags input.	boolean	-
delimiter The character or regular expression to trigger the addition of a new tag. Also used to split tags for @paste event	string | RegExp	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
max Maximum number of tags.	number	-
id	string	-
convertValue Convert the input value to the desired type. Mandatory when using objects as values and using TagsInputInput	((value: string) => AcceptableInputValue)	-
displayValue Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values	((value: AcceptableInputValue) => string)	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the value changes	[payload: AcceptableInputValue[]]
invalid Event handler called when the value is invalid	[payload: AcceptableInputValue]
addTag Event handler called when tag is added	[payload: AcceptableInputValue]
removeTag Event handler called when tag is removed	[payload: AcceptableInputValue]

Slots

Slot	Scope
default The content of the component.	-

TagsInputInput

Props

Prop	Type	Default
placeholder The placeholder character to use for empty tags input.	string	-
autoFocus Focus on element when mounted.	boolean	-
maxLength Maximum number of character allowed.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

TagsInputItem

Props

Prop	Type	Default
valuerequired Value associated with the tags	AcceptableInputValue	-
disabled When true, prevents the user from interacting with the tags input.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

TagsInputItemDelete

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

TagsInputItemText

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Accessibility

There is no dedicated WAI-ARIA pattern for tags inputs. Reka UI renders the tags followed by a native text input, and handles the keyboard navigation between the input and the tags.

Key	Description
Tab	Moves focus to the input.
Enter	When focus is on the input, adds the typed text as a tag.
Delete	When a tag is active, removes it and sets the next tag active.
Backspace	When a tag is active, removes it and sets the previous tag active.
ArrowRight	Sets the next tag active.
ArrowLeft	Sets the previous tag active.
Home	Sets the first tag active.
End	Sets the last tag active.