FeaturedNew
TagsTag Input Chips
A text field that turns typed values into removable chips, with the chips wrapping above the input.
#tags#chips#input
3 frameworksAdvanced
Loading…
Shows the first few tags and rolls the rest into a +N button that expands them.
<!--
Show the first few chips and roll the rest into a +N button. The button
carries an aria-label naming the hidden count so it is not just "+2".
-->
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Marketing</span>
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Design</span>
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Sales</span>
<button type="button" aria-label="Show 2 more tags" class="inline-flex items-center rounded-full border border-gray-300 px-2.5 py-1 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">+2</button>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
tagsrequired | string[] | - | Tags |
max | number | 3 | Max |
className | string | - | Additional classes merged onto the root element. |
Set how many chips show before the overflow with `max`; the `+N` control carries an `aria-label` naming the hidden count and correctly singularises "tag" versus "tags". Clicking it reveals the full wrapping set.