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 zaf to add labels, descriptions, or swap components:

import { zaf } from '@repo/form'

const schema = z.object({
  username: z.string(),
  password: zaf(z.string(), { type: 'password' }),
})

Next Steps​

Explore the core concepts: