Multi Select

Select multiple items from a list. The component stores the value field of each selected option while displaying the human-readable label as chips. Supports static arrays and async source objects with search and get methods.

Pass a { value, label }[] array as options. Click the trigger to open the dropdown and toggle items.

Three sizes available: normal (default), compact, and small.

disabled disables the trigger and prevents opening the dropdown. In 0.0.34, chip removal callbacks and sorting are not guarded by this flag; do not use it as a complete read-only guarantee. Guard custom chip actions and omit sorting when a non-editable presentation is required. max caps how many items can be selected — further options are greyed out. clearable adds a button to clear all selections at once.

Pass an object with search and get as options to fetch results on demand. search(query) is called on every query change. get(values) resolves selected values after mount and when the selection changes so their labels are shown correctly.

Add sortable to allow drag-and-drop reordering of selected chips. The value binding is kept in sync with the new order.

Use the chip snippet to replace the default chip. It receives the full SelectOption object and a remove() callback.

Supply button for a fixed-label trigger rather than a chip field. See the Select button-trigger example for both Select and MultiSelect. Use the value binding to render your own selection summary.