`MultiSelect` is keyed for performance reasons.

Every items object must have a unique "id" property.

## Default By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering). MultiSelect provides interactivity for a list of checkbox inputs. Those checkboxes will remain rendered in the DOM and are submittable within forms. Checkbox attributes can be adjusted via the `itemToInput` prop. ## Custom slot Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. ## No alphabetical ordering To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop. ## Filterable `$$restProps` are spread to the underlying input element. ## Initial selected items To select (or bind) items, pass an array of item ids to `selectedIds`. ## Multiple multi-select dropdowns ## Format item display text Use the `itemToString` prop to format the display of individual items. { return item.text + ' (' + item.id +')' }} titleText="Contact" label="Select contact methods..." items="{[{id: "0", text: "Slack"}, {id: "1", text: "Email"}, {id: "2", text: "Fax"}]}" sortItem="{() => {}}" /> ## Format checkbox values Use the `itemToInput` prop to customize the user-selectable checkbox values. This will also override the underlying hidden inputs used for form submission. For example: ```js (item) => ({name: `Contact_${item.id}`], value: item.id}) ``` The above function sets the `name` attribute to `Contact_0` (respective to each item's `id`) for every hidden input that renders, along with each respective item's `id` set to the `value` attribute. ({name: 'contact', value: item.id})} titleText="Contact" label="Select contact methods..." items="{[ {id: "0", text: "Slack"}, {id: "1", text: "Email"}, {id: "2", text: "Fax"} ]}" /> ## Top direction Set `direction` to `"top"` for the dropdown menu to appear above the input. ## Hidden label ## Light variant ## Inline variant ## Large size ## Small size ## Invalid state ## Warning state ## Disabled state ## Disabled items Use the `disabled` property in the `items` prop to disable specific items.