Skip to main content

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: