Skip to main content

@repo/form

Schema-driven form generation for Svelte 5 with automatic field rendering from Zod schemas.

Quick Start​

Define the schema

import { z } from 'zod'

const schema = z.object({
  username: z.string()
})

For remote functions. Read more about TypedForm.Remote

<TypedForm.Remote form={createUserForm} {schema} />

Remote forms reset client state to schema defaults when unmounted. Use Zod .default(...) for non-empty create defaults; fields without defaults clear. Set disabled to wrap the fields in a disabled fieldset and hide the submit button.

For client functions. Read more about TypedForm.Client

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

Customize fields with the input prop:

<TypedForm.Remote form={createUserForm} schema={schema}>
  {#snippet children({ fields })}
    <TypedForm.RemoteField field={fields.username} />
    <TypedForm.RemoteField field={fields.password} input={TypedForm.TextInput} type="password" />
  {/snippet}
</TypedForm.Remote>

The fields and client-form value snippet parameters are inferred from schema; call sites do not need to annotate them.

Use ChoiceBooleanField for a yes/no button field:

<TypedForm.RemoteField field={fields.isAgencyWorker} input={TypedForm.ChoiceBooleanField} />

Utilities​

getFormFieldByPath(accessor: string)​

Retrieves a form field and its parent remote form from context by dot-notation path. Must be called inside a TypedForm.Remote component tree.

<script lang="ts">
  import { getFormFieldByPath } from '@repo/form'

  const { formField, remoteForm } = getFormFieldByPath('domain')
</script>

<select {...formField.as('select')}>
  ...
</select>

Docs​