MultiSelect — Loidolt Theme

import { MultiSelect } from '@loidolt/theme-svelte';

Example

Export layers

Cut lines

Choose up to three.

Notes

The search clears after each pick so the next one can be typed straight away.
Backspace in the empty search removes the last chip. Removing a chip with its button moves focus to the next chip, or back to the input.
Once max is reached the remaining options disable, and screen readers are told why.
Chips are square because they are pressable; the pill shape is reserved for badges.

Props

Generated from the component source, so it cannot drift from the implementation.

MultiSelect props
Prop	Type	Default	Notes
`options` required	`OptionEntry<T>[]`	`—`	Options, optionally in labelled groups.
`boxed`	`boolean`	`false`	Draws the full box instead of the default underline.
`class`	`string`	`—`	Lands on the wrapper; the rest props land on the text input.
`contentClass`	`string`	`—`
`disabled`	`boolean`	`false`
`emptyText`	`string`	`'No results'`
`filter`	`((option: Option<T>, query: string) => boolean) \| false`	`—`	How typing narrows the list. `false` when `onQueryChange` filters on a server.
`item`	`Snippet<[Option<T>, { selected: boolean; highlighted: boolean }]>`	`—`
`label`	`string`	`—`	Accessible name when the control is not wrapped in a `Field` or `<label>`.
`loading`	`boolean`	`false`
`loadingText`	`string`	`'Loading…'`
`max`	`number`	`—`	Most values that can be chosen. Remaining options disable once it is reached.
`maxText`	`(max: number) => string`	(limit) => `Up to ${limit} can be chosen`
`name`	`string`	`—`	Submits each selected value under this name.
`onOpenChange`	`(open: boolean) => void`	`—`
`onQueryChange`	`(query: string) => void`	`—`
`onValueChange`	`(value: T[]) => void`	`—`
`open` bindable	`boolean`	`false`
`query` bindable	`string`	`''`
`queryDebounce`	`number`	`0`
`ref` bindable	`HTMLElement \| null`	`null`
`removeLabel`	`(label: string) => string`	(text) => `Remove ${text}`	Accessible name of each chip's remove button.
`required`	`boolean`	`false`
`resultsText`	`(count: number, selected: number) => string`	(count, selected) => `${count} ${count === 1 ? 'result' : 'results'}, ${selected} selected`
`triggerLabel`	`string`	`'Show options'`
`value` bindable	`T[]`	`[]`	The selected values, in the order they were chosen.