Multi-select
@xui/multi-selectA filterable multi-select: removable chips + a query input open a popover of options with a check on the chosen ones. Clicking an option toggles it and the popover stays open; Backspace on an empty query removes the last chip. [(values)] two-way binding.
Install
pnpm add @xui/multi-select Add the barrel to a standalone component's imports:
import { XuiMultiSelectImports } from '@xui/multi-select';
@Component({
imports: [XuiMultiSelectImports],
// …
})Examples
Default
Loading preview…
<div class="w-80">
<xui-multi-select [items]="items" [itemText]="itemText" [(values)]="selected" placeholder="Add frameworks…" />
<p class="text-foreground-muted mt-3 text-sm">Selected: {{ selected.length ? selected.map(f => f.name).join(', ') : '—' }}</p>
</div>API
A filterable multi-select: an inline field of removable chips plus a query input opens a popover of options with a check on the chosen ones. Clicking an option toggles it (the popover stays open). [(values)] two-way binding.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''itemsreadonly T[]The options to choose from.[]itemText(item: T) => stringHow an item is labelled. Also what the default filter matches against, so give it the text the user would type.(item: T) => (item == null ? '' : String(item))itemPredicate(query: string, item: T) => booleanCustom filter for one item against the query. Defaults to a case-insensitive substring match on itemText.itemDisabled(item: T) => booleanWhich items cannot be selected. They stay in the list, greyed out.() => falsedisabledbooleanBlock interaction and dim the control.falseplaceholderstringText shown in the empty field. Hidden once anything is selected.'Select…'noResultsTextstringShown in place of the list when the query matches nothing.'No results.'valuesT[]The chosen items. Two-way bindable with [(values)], or via formControl/ngModel.[]Outputs
itemAddedTEmits the item that was just selected.itemRemovedTEmits the item that was just deselected.