Tags Input

Forms
Input

Multi-value input with suggestions and keyboard navigation. Ideal for skills, categories, and labels.

Preview

Type and press Enter or comma to add tags

ReactTypeScript
Press Enter or comma to add

Tag Variants

Three visual styles for tags

Filled (default)

DesignCode

Outline

DesignCode

Subtle

DesignCode

With Suggestions

Autocomplete suggestions as you type

frontend
Start typing for suggestions, use arrow keys to navigate

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

Props

TagsInput component API reference

PropTypeDefaultDescription
valuestring[]—Array of tag strings
onChange(value: string[]) => void—Callback with updated tags
placeholderstring'Add tag...'Input placeholder
maxTagsnumber—Maximum number of tags allowed
maxLengthnumber—Maximum length for each tag
size'sm' | 'md' | 'lg''md'Input size
tagVariant'filled' | 'outline' | 'subtle''filled'Tag visual style
suggestionsstring[]—Array of suggested values
allowDuplicatesbooleanfalseAllow duplicate tags
validateTag(tag: string) => boolean—Custom validation function
separatorstring[]['Enter', ',']Keys that trigger tag addition
onTagAdd(tag: string) => void—Called when tag is added
onTagRemove(tag: string) => void—Called when tag is removed
labelstring—Label text
errorstring—Error message
helperTextstring—Helper text
disabledbooleanfalseDisable interaction
readOnlybooleanfalseMake read-only

Usage

Import and implementation example

import { TagsInput } from '@/components/ui/tags-input'

export default function Example() {
  const [tags, setTags] = useState(['React', 'TypeScript'])
  const suggestions = ['React', 'TypeScript', 'JavaScript', 'CSS']

  return (
    <>
      {/* Basic usage */}
      <TagsInput
        value={tags}
        onChange={setTags}
        placeholder="Add tag..."
      />

      {/* With suggestions */}
      <TagsInput
        label="Skills"
        value={tags}
        onChange={setTags}
        suggestions={suggestions}
        maxTags={10}
      />

      {/* With validation */}
      <TagsInput
        value={tags}
        onChange={setTags}
        validateTag={(tag) => tag.length >= 3}
        allowDuplicates={false}
      />

      {/* Different variants */}
      <TagsInput value={tags} tagVariant="filled" />
      <TagsInput value={tags} tagVariant="outline" />
      <TagsInput value={tags} tagVariant="subtle" />
    </>
  )
}

Features

Built-in functionality

  • Keyboard navigation: Enter/comma to add, Backspace to remove
  • Autocomplete suggestions: Filter suggestions as you type
  • Three variants: Filled, outline, and subtle styles
  • Three sizes: Small, medium, and large
  • Tag limits: Set maximum number of tags
  • Custom validation: Validate tags before adding
  • Duplicate prevention: Optionally block duplicate tags
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Input is properly labeledSuggestions use role="listbox"Options use role="option"aria-activedescendant tracks selection

Keyboard Navigation

KeyAction
Enter/CommaAdd current text as tag
BackspaceRemove last tag (when input empty)
Arrow Up/DownNavigate suggestions
EscapeClose suggestions

Notes

  • Tags can be removed via click or keyboard
  • Suggestions dropdown is keyboard navigable
  • Error state announced to screen readers
  • Focus management handled automatically

Related Components

InputComboboxMulti-Select Dropdown