Client Forms

For client-side only forms without server actions. Uses bind:value for state and validates with Zod before calling onsubmit.

Basic Usage

<script lang="ts">
  import { TypedForm } from '@repo/form'
  import { z } from 'zod/v4'

  const schema = z.object({
    name: z.string(),
    email: z.string().email()
  })

  let value = $state(TypedForm.getInitial(schema))

  function handleSubmit() {
    console.log(value)
  }
</script>

<TypedForm.Client bind:value {schema} onsubmit={handleSubmit} />

With Initial Values

<script lang="ts">
  let value = $state({
    name: 'John',
    email: 'john@example.com'
  })
</script>

<TypedForm.Client bind:value {schema} onsubmit={handleSubmit} />