Tag input
@xui/tag-inputA token/chip input. Type and press Enter (or the separator) to add a tag; click a tag's ✕ or press Backspace on an empty field to remove one. Paste splits on the separator. [(values)] two-way binding and ControlValueAccessor.
Install
pnpm add @xui/tag-input Add the barrel to a standalone component's imports:
import { XuiTagInputImports } from '@xui/tag-input';
@Component({
imports: [XuiTagInputImports],
// …
})Examples
Default
Loading preview…
<div class="w-96">
<xui-tag-input [(values)]="tags" placeholder="Add a tag…" fill />
<p class="text-foreground-muted mt-3 text-sm">Values: {{ tags.join(', ') }}</p>
</div>Empty
Loading preview…
<div class="w-96"><xui-tag-input fill placeholder="Type and press Enter" /></div>Add on blur with duplicates
Loading preview…
<div class="w-96"><xui-tag-input fill addOnBlur allowDuplicates [(values)]="tags" placeholder="Blur to add" /></div>Disabled
Loading preview…
<div class="w-96"><xui-tag-input fill disabled [(values)]="tags" /></div>API
A token/chip input: type and press Enter (or the separator) to add a tag, click a tag's ✕ or press Backspace on an empty field to remove one. [(values)] two-way binding and ControlValueAccessor over a string[].
Variants
fillfalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valuesstring[]The current tags. Two-way bindable with [(values)].[]placeholderstringText shown in the empty field. Hidden once there is at least one tag.''fillbooleanStretch to the available width instead of hugging its contents.falsedisabledbooleanBlock interaction and dim the field and its tags.falseseparatorstringCharacter that also commits the current draft (besides Enter).','addOnBlurbooleanCommit the draft when the field loses focus.falseaddOnPastebooleanSplit pasted text on the separator and add each piece.trueallowDuplicatesbooleanReject a tag that already exists.falseOutputs
addedstringEmits each tag as it is added.removedstringEmits each tag as it is removed.