devsnips
Search docs, APIs, guides…

Component

Tag Input

Input fields with tag/chip functionality for multiple selections

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/tag-input/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/tag-input
registry path: Tailwind/Components/Input/tag-input

Source

Implementation

code.html 
<!-- Tag Input - Default -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-2">Skills</label>
  <div class="flex flex-wrap gap-2 p-3 bg-white border border-gray-300 rounded-lg focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500 transition-colors">
    <span class="px-3 py-1.5 bg-blue-100 text-blue-700 text-sm rounded-lg flex items-center gap-1">
      JavaScript
      <button class="hover:text-blue-900">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
    <span class="px-3 py-1.5 bg-green-100 text-green-700 text-sm rounded-lg flex items-center gap-1">
      React
      <button class="hover:text-green-900">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
    <span class="px-3 py-1.5 bg-purple-100 text-purple-700 text-sm rounded-lg flex items-center gap-1">
      Tailwind
      <button class="hover:text-purple-900">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
    <input type="text" placeholder="Add skill..." class="flex-1 min-w-[120px] bg-transparent border-0 focus:outline-none text-sm" />
  </div>
</div>

<!-- Tag Input - Pill Style -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Topics</label>
  <div class="flex flex-wrap gap-2 p-4 bg-gray-50 border border-gray-200 rounded-full focus-within:ring-2 focus-within:ring-purple-500 focus-within:border-purple-500 transition-colors">
    <span class="px-4 py-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white text-sm rounded-full flex items-center gap-2">
      Technology
      <button class="hover:text-pink-200">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
    <span class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-500 text-white text-sm rounded-full flex items-center gap-2">
      Design
      <button class="hover:text-cyan-200">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </span>
    <input type="text" placeholder="Add topic..." class="flex-1 min-w-[100px] bg-transparent border-0 focus:outline-none text-sm" />
  </div>
</div>

<!-- Tag Input - Categories -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Categories</label>
  <div class="p-3 bg-white border border-gray-300 rounded-xl">
    <div class="flex flex-wrap gap-2 mb-2">
      <button class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg flex items-center gap-1">
        Frontend
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      <button class="px-3 py-1.5 bg-green-100 text-green-700 text-sm rounded-lg flex items-center gap-1 hover:bg-green-200">
        Backend
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <input type="text" placeholder="Search or add category..." class="w-full bg-transparent border-0 focus:outline-none text-sm" />
  </div>
</div>
77 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/tag-input
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/tag-input/

Install: npx devsnips add
Tailwind/Components/Input/tag-input

This is the Tag Input — Input fields with tag/chip functionality for multiple selections

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/tag-input