精选最新
标签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 whose label doubles as an edit button, swapping in an inline field to rename.
<!--
A chip whose label doubles as an "Edit" button; activating it swaps in a text
field (Enter commits, Escape cancels). Static markup shows the resting state.
-->
<ul class="flex flex-wrap gap-2">
<li>
<span class="inline-flex items-center gap-1 rounded-full bg-gray-100 py-1 pl-1 pr-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">
<button type="button" aria-label="Edit backend" class="rounded-full px-2 py-0.5 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-700 dark:focus-visible:ring-blue-400">backend</button>
<button type="button" aria-label="Remove backend" class="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 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>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
defaultTags | string[] | [] | Default tags |
onChange | (tags: string[]) => void | - | On change |
className | string | - | 合并到根元素上的额外类名。 |
Activating a chip opens an inline input that selects its text; Enter commits, Escape cancels, and clearing the field deletes the tag rather than leaving a blank chip. Each chip also keeps its own accessible remove button.