feat(MultiSelect): add selectedOnly and combineValues props

The MultiSelect wasn't rendering form-submittable inputs. This fix adds two new props to help customize how the hidden inputs render.

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?:\nstring; value?: string }",
           "value": "(item) => {}",
           "isFunction": true,
           "isFunctionDeclaration": false,
@@ -7015,6 +7015,30 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "selectedOnly",
+          "kind": "let",
+          "description": "Set to `true` to only render selected options as hidden inputs for form submission.",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "combineValues",
+          "kind": "let",
+          "description": "Combine selected items as comma-separated values when submitted in a form.\nIf set to `true`, the default separator is a comma `,`.\nPass in a string to override the separator.",
+          "type": "false | true | string",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "selectedIds",
           "kind": "let",

docs/src/pages/components/MultiSelect.svx

@@ -11,7 +11,13 @@
 
 ## 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).
+
+Hidden inputs will be rendered based on user selection, such as `<input type="hidden"
+name="0" value="true" />` to mirror checkbox values and to allow MultiSelect to
+be submittable within forms. These hidden inputs can be customized with
+the `combineValues` or `itemToInput` props.
 
 <MultiSelect titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -73,6 +79,56 @@ 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.
+
+When using with the `selectedOnly` prop, you can override every hidden input to
+use the same `name` attribute. This may be useful if you
+wish to use `formData.getAll('contact')` in your server-side form handler.
+
+<MultiSelect
+  itemToInput={(item) => ({name: 'contact', value: item.id})}
+  selectedOnly
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[
+    {id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}
+  ]}"
+/>
+
+## Combine values into a single input
+
+With the `combineValues` prop, all selected items' values will render as a
+comma-separated string within a single hidden input. A custom delimiter can
+alternatively be passed in.
+
+<MultiSelect
+  combineValues
+  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 +215,4 @@ Use the `disabled` property in the `items` prop to disable specific items.
     { id: "1", text: "Email", disabled: true },
     { id: "2", text: "Fax" },
   ]}
-/>
+/>