फ़ीचर्डनया
टैगTag Input Chips
A text field that turns typed values into removable chips, with the chips wrapping above the input.
#tags#chips#input
3 फ्रेमवर्कएडवांस्ड
Loading…
Chips that pair a leading icon from a small fixed set with their text label.
<!-- The leading glyph is aria-hidden: the text label already names the tag. -->
<ul class="flex flex-wrap gap-2">
<li>
<span class="inline-flex items-center gap-1.5 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">
<svg viewBox="0 0 24 24" fill="currentColor" class="h-3.5 w-3.5 text-amber-500" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 18.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z" /></svg>
Featured
</span>
</li>
<li>
<span class="inline-flex items-center gap-1.5 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">
<svg viewBox="0 0 24 24" fill="currentColor" class="h-3.5 w-3.5 text-blue-500" aria-hidden="true"><path d="M13 2 4.5 13H11l-1 9 8.5-11H12z" /></svg>
Fast
</span>
</li>
</ul>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | Array<{ label: string; icon: TagIcon }> | - | रेंडर की जाने वाली आइटम की सूची। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Each item names one of `star`, `bolt`, `check` or `tag`; the glyph is `aria-hidden` because the text already names the tag, and the icons are inline SVG paths so nothing loads over the network. The row wraps at any width.