[docs] Add Programmatic control section

Author: x0k

.changeset/strong-worms-exercise.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+Add `Programmatic control` section

apps/docs/src/content/docs/guides/_bind-form.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Schema } from "@sjsf/form";
+
+  import CustomForm from "@/components/custom-form.svelte";
+
+  const schema: Schema = {
+    type: "string",
+  };
+
+  let form = $state<HTMLFormElement>();
+</script>
+
+<CustomForm bind:form {schema} novalidate onSubmit={(v) => window.alert(v)}>
+  {null}
+</CustomForm>
+
+<button
+  onclick={() => {
+    form?.requestSubmit();
+  }}>My submit</button
+>
+
+<button onclick={() => {
+  form?.reset();
+}} >
+  My reset
+</button>

apps/docs/src/content/docs/guides/custom-form.mdx

@@ -1,7 +1,7 @@
 ---
 title: Custom form
 sidebar:
-  order: 3
+  order: 4
 ---
 
 import { Code } from '@astrojs/starlight/components';

apps/docs/src/content/docs/guides/programmatic-control.mdx

@@ -0,0 +1,32 @@
+---
+title: Programmatic control
+sidebar:
+  order: 3
+---
+
+import { Code, Card } from '@astrojs/starlight/components';
+
+import BindForm from './_bind-form.svelte';
+import bindFormCode from './_bind-form.svelte?raw';
+
+If you need to control the form programmatically, you can bind to the `form` property.
+
+<Code code={bindFormCode} lang="svelte" />
+
+<Card>
+  <BindForm client:only="svelte" />
+</Card>
+
+## Methods
+
+Also you can bind to `this` to get access to exported methods:
+
+### Validate
+
+Perform validation on the form without form state modifications.
+
+```typescript
+import type { Errors } from '@sjsf/form';
+
+function validate(): Errors<E>
+```