फ़ीचर्डनया
टैग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…
A wrapping list of chips, each with a real remove button and an accessible label.
<div class="w-full">
<p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Applied filters</p>
<!-- A <ul> because it is a list; the row wraps so any number of chips is safe. -->
<ul class="flex flex-wrap gap-2">
<li>
<span class="inline-flex items-center gap-1 rounded-full bg-gray-100 py-1 pl-3 pr-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">
In stock
<button type="button" aria-label="Remove In stock" class="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="h-3.5 w-3.5" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
</button>
</span>
</li>
</ul>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
label | string | 'Applied filters' | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
defaultTags | string[] | [] | Default tags |
onRemove | (tag: string, tags: string[]) => void | - | On remove |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Each chip owns a `<button aria-label="Remove …">` rather than a bare glyph, and the row is a `<ul>` that wraps at any width. Clearing the last chip swaps in an empty-state line instead of collapsing to nothing.