fix(multi-select): render checkboxes for form data (#1835)

* chore: downgrade docs to svelte 3 for compatibility
* chore(multi-select): keep checkboxes rendered in DOM
* Display ListBox via CSS

See #1742

docs/src/COMPONENT_API.json

@@ -7006,8 +7006,8 @@
         {
           "name": "itemToInput",
           "kind": "let",
-          "description": "Override the item name, title, labelText passed to the checkbox input",
-          "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
+          "description": "Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.",
+          "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }",
           "value": "(item) => {}",
           "isFunction": true,
           "isFunctionDeclaration": false,

docs/src/pages/components/MultiSelect.svx

@@ -11,7 +11,12 @@
 
 ## Default
 
-By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
+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.
 
 <MultiSelect titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -73,6 +78,34 @@ Use the `itemToString` prop to format the display of individual items.
     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.
+
+<MultiSelect
+  itemToInput={(item) => ({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.
@@ -159,4 +192,4 @@ Use the `disabled` property in the `items` prop to disable specific items.
     { id: "1", text: "Email", disabled: true },
     { id: "2", text: "Fax" },
   ]}
-/>
+/>