Tags Input

Ready

Multi-value input with suggestions and keyboard navigation

Interactive Preview

Type and press Enter or comma to add tags

ReactTypeScript
Press Enter or comma to add

With Suggestions

Autocomplete suggestions as you type

frontend
Start typing for suggestions, use arrow keys to navigate

Tag Variants

Three visual styles for tags

Filled (default)

DesignCode

Outline

DesignCode

Subtle

DesignCode

Sizes

Three size options: sm, md, and lg

Small

ReactVue

Medium (default)

ReactVue

Large

ReactVue

With Limits

Limit the maximum number of tags

DesignSystems
You can add up to 5 tags

States

Different states for various use cases

Read Only

ReactTypeScriptCSS

Disabled

ReactTypeScript

With Error

At least one tag is required

Usage

How to use the Tags Input component

// Basic usage
<TagsInput
value={tags}
onChange={setTags}
placeholder="Add tag..."
/>
// With suggestions
<TagsInput
label="Skills"
value={tags}
onChange={setTags}
suggestions={skillSuggestions}
maxTags={10}
/>
// With validation
<TagsInput
value={tags}
onChange={setTags}
validateTag={(tag) => tag.length >= 3}
allowDuplicates={false}
/>

API Reference

Props

value-string[] - Array of tag strings
onChange-(value: string[]) => void - Callback with updated tags
placeholder-string - Input placeholder (default: "Add tag...")
maxTags-number - Maximum number of tags allowed
maxLength-number - Maximum length for each tag
size-"sm" | "md" | "lg" (default: "md")
tagVariant-"filled" | "outline" | "subtle" (default: "filled")
suggestions-string[] - Array of suggested values
allowDuplicates-boolean - Allow duplicate tags (default: false)
validateTag-(tag: string) => boolean - Custom validation function
onTagAdd-(tag: string) => void - Called when tag is added
onTagRemove-(tag: string) => void - Called when tag is removed
separator-string[] - Keys that trigger tag addition (default: ["Enter", ","])
disabled-boolean - Disable interaction (default: false)
readOnly-boolean - Make read-only (default: false)
label-string - Label text
error-string - Error message
helperText-string - Helper text