Skip to content

Commit 1f6b9c0

Browse files
committed
[docs] Add sveltekit guide client block
1 parent d4ff1b8 commit 1f6b9c0

File tree

1 file changed

+30
-1
lines changed

1 file changed

+30
-1
lines changed

apps/docs/src/content/docs/integrations/sveltekit.mdx

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,34 @@ The name of the `initForm` function result should match the name from the `actio
7474

7575
## Client
7676

77-
## Disabled JavaScript
77+
On the client side you should call `useSvelteKitForm`.
78+
79+
```typescript
80+
import type { PageData, ActionData } from './$types';
81+
82+
const { form, mutation, enhance } = useSvelteKitForm(
83+
meta<ActionData, PageData>(), "form", { /* form options */ }
84+
);
85+
```
86+
87+
:::note
88+
89+
The error type will be inferred from `ActionData` and the form data type from `PageData`.
90+
91+
If you did not use `initForm` in the `load` function,
92+
the third generic parament of the `meta` function will be used as the form data type
93+
(the default is `SchemaValue`).
94+
95+
:::
96+
97+
According to Svelte documentation your form should always use `POST` requests.
98+
99+
```svelte
100+
<form use:enhance method="POST" novalidate style="display: flex; flex-direction: column; gap: 1rem">
101+
<FormContent bind:value={form.formValue} />
102+
<button type="submit" style="padding: 0.5rem;">Submit</button>
103+
</form>
104+
```
105+
106+
## Progressive enhancement
78107

0 commit comments

Comments
 (0)