@usevyre/react @usevyre/vue

Tags Input

A multi-value text input that lets users enter a list of tags. Supports adding tags via Enter or comma, removing the last tag with Backspace, and paste-to-split for bulk entry.

Basic

TagsInput is fully controlled. Pass a string[] as value and update it in onChange. Duplicate tags and empty strings are silently ignored.

reacttypescript
2 tags: react, typescript
 
import { TagsInput } from "@usevyre/react";
import { useState } from "react";

const [tags, setTags] = useState(["react", "typescript"]);

<TagsInput
  value={tags}
  onChange={setTags}
  placeholder="Add tag…"
/>

Max tags

Set max to limit the number of tags. Once the limit is reached, the input placeholder disappears and the text field becomes disabled until a tag is removed.

onetwo
1 slot(s) left
 
// Limit to 5 tags — input is disabled once the limit is reached
const [skills, setSkills] = useState<string[]>([]);

<TagsInput
  value={skills}
  onChange={setSkills}
  placeholder="Add skill…"
  max={5}
/>

Inside a Field

Wrap in Field to add a label and hint text. The state prop on Field applies validation styling to the surrounding context.

reacttypescript
2 tags: react, typescript
 
import { Field, TagsInput } from "@usevyre/react";

<Field label="Skills" hint="Press Enter or comma to add a tag.">
  <TagsInput value={skills} onChange={setSkills} placeholder="e.g. React" />
</Field>

Keyboard behaviour

Enter or , adds the current input as a tag (trimmed, deduplicated). Backspace on an empty input removes the last tag. Pasting a comma-separated string (e.g. react,vue,svelte) splits and adds all parts at once.

Vue v-model

In Vue, use v-model — it binds to modelValue and emits update:modelValue with the updated string array.

Props

Props

Prop Type Default Description
value string[] — Controlled array of tags.
onChange (tags: string[]) => void — React only. Called with the updated tag array on every change.
placeholder string "Add tag…" Input placeholder. Hidden automatically when max is reached.
disabled boolean false Disables all interactions.
max number — Maximum number of tags. Input is disabled once the limit is reached.
size "sm" | "md" | "lg" "md" Size scale.
class / className string — Additional CSS class.
← Tag Toast →