Tailwind CSS Tagging Selects Blocks

Tagging Selects

Tailwind CSS tagging selects for threads, labels, tags, and multi-value assignment flows.

Recipient Tagging Select Pro

Multi-recipient select turns chosen people into chips while the dropdown keeps avatar rows and secondary details visible.

<select  multiple data-hs-select='{
                    "placeholder": "Enter email or name",
                    "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                    "dropdownScope": "window",
                    "dropdownPlacement": "bottom-left",
                    "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                    "mode": "tags",
                    "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                    "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                    "tagsInputId": "hs-pro-in1trtotid1",
                    "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                    "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                  }' class="hidden">
                    <option value="">Choose</option>
                    <option selected  value="1" data-hs-select-option='{
                        "description": "schen@company.com",
                        "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                      }'>Sarah Chen</option>
                    <option   value="2" data-hs-select-option='{
                        "description": "david1harris@example.com",
                        "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                      }'>David Harrisom</option>
                    <option   value="3" data-hs-select-option='{
                        "description": "lewis@company.com",
                        "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                      }'>Lewis Clarke</option>
                    <option   value="4" data-hs-select-option='{
                        "description": "isabella@site.com",
                        "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                      }'>Isabella Lauda</option>
                    <option   value="5" data-hs-select-option='{
                        "description": "chrstiwilliams@site.so",
                        "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                      }'>Christina Williams</option>
                    <option   value="6" data-hs-select-option='{
                        "description": "amanda@preline.so",
                        "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                      }'>Amanda Harvey</option>
                  </select>

Open related shared inbox page

People Tagging Select Pro

Selected people stay as rounded chips in the field while the menu lists larger profile rows underneath.

<div class="relative w-full">
  <select id="hs-pro-select-tags" multiple data-hs-select='{
      "placeholder": "Select option...",
      "wrapperClasses": "hs-select-active:ring-2 hs-select-active:ring-primary-active pe-9 rounded-lg flex items-center flex-wrap text-nowrap w-full text-start text-sm bg-layer border border-layer-line shadow-2xs text-foreground",
      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm focus:bg-layer-hover",
      "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
      "mode": "tags",
      "tagsClasses": "relative ps-0.5 pe-9 min-h-9.5 flex items-center flex-wrap text-nowrap w-full bg-layer border border-layer-line rounded-lg text-start text-sm focus:border-primary-focus focus:ring-primary-focus",
      "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-layer border border-layer-line rounded-full p-1 m-0.5 text-layer-foreground\"><div class=\"size-6 me-1\" data-icon></div><div class=\"whitespace-nowrap\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-surface-foreground bg-surface-1 hover:bg-surface-2 focus:outline-hidden text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
      "tagsInputClasses": "py-1.5 sm:py-2 px-4 grow order-1 sm:text-sm border-transparent bg-transparent text-foreground placeholder:text-muted-foreground-1 rounded-lg focus:ring-transparent focus-visible:outline-hidden",
      "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2\" data-icon></div><div><div class=\"text-sm font-semibold text-foreground\" data-title></div><div class=\"text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>",
      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
    }' class="hidden">
    <option value="">Choose</option>
    <option selected value="1" data-hs-select-option='{
        "description": "James Collins",
        "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
      }'>James</option>

<option value="3" data-hs-select-option='{
        "description": "david",
        "icon": "<img class=\"inline-block rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80\" alt=\"Avatar\">"
      }'>David</option>

Open related user profile page