feat(form): add ref prop (#900)

Closes #877

COMPONENT_INDEX.md

@@ -1447,7 +1447,9 @@ None.
 
 ### Props
 
-None.
+| Prop name | Kind             | Reactive | Type                                     | Default value     | Description                            |
+| :-------- | :--------------- | :------- | :--------------------------------------- | ----------------- | -------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLFormElement</code> | <code>null</code> | Obtain a reference to the form element |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -3998,7 +3998,19 @@
     {
       "moduleName": "Form",
       "filePath": "src/Form/Form.svelte",
-      "props": [],
+      "props": [
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the form element",
+          "type": "null | HTMLFormElement",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        }
+      ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
         { "type": "forwarded", "name": "click", "element": "form" },

src/Form/Form.svelte

@@ -1,6 +1,12 @@
+<script>
+  /** Obtain a reference to the form element */
+  export let ref = null;
+</script>
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <form
   class:bx--form="{true}"
+  bind:this="{ref}"
   {...$$restProps}
   on:click
   on:keydown

tests/Form.test.svelte

@@ -9,9 +9,11 @@
     SelectItem,
     Button,
   } from "../types";
+
+  let ref: HTMLFormElement;
 </script>
 
-<Form on:submit>
+<Form on:submit bind:ref>
   <FormGroup legendText="Checkboxes">
     <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
     <Checkbox id="checkbox-1" labelText="Checkbox Label" />

types/Form/Form.svelte.d.ts

@@ -2,7 +2,13 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface FormProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
+  /**
+   * Obtain a reference to the form element
+   * @default null
+   */
+  ref?: null | HTMLFormElement;
+}
 
 export default class Form extends SvelteComponentTyped<
   FormProps,