Getting Started
Define a Schema
import { z } from 'zod'
const schema = z.object({
username: z.string(),
email: z.string().email(),
})Remote Form
For server actions with validation and redirects:
<script lang="ts">
import { TypedForm } from '@repo/form'
import { createUserForm, userSchema } from './user.remote'
</script>
<TypedForm.Remote form={createUserForm} schema={userSchema} />Client Form
For local state and client-side validation:
<script lang="ts">
import { TypedForm } from '@repo/form'
import { z } from 'zod/v4'
const schema = z.object({ name: z.string() })
let value = $state(TypedForm.getInitial(schema))
</script>
<TypedForm.Client bind:value {schema} onsubmit={() => console.log(value)} />Customize Fields
Use the children snippet with typed fields and the input prop:
<TypedForm.Remote form={createUserForm} schema={userSchema}>
{#snippet children({ fields })}
<TypedForm.RemoteField field={fields.username} />
<TypedForm.RemoteField field={fields.password} input={TypedForm.TextInput} type="password" />
{/snippet}
</TypedForm.Remote>Next Steps
Explore the core concepts:
- Remote vs Client — which to use
- Remote Forms — server actions
- Client Forms — client-side forms