forms

Forms

All forms in this project use sveltekit-superforms + FormSnap + Zod v4 in SPA mode (no server-side form actions — everything is client-side). The app has ssr = false.

Full pattern

1. Zod schema — apps/web/src/lib/forms/<name>-schema.ts

import z from 'zod';

export const profileFormSchema = z.object({
  name: z
    .string()
    .min(2, { message: 'Name must be at least 2 characters.' })
    .max(50, { message: 'Name must be under 50 characters.' })
    .trim(),
  email: z.email({ message: 'Please enter a valid email address.' }).trim(),
  bio: z.string().max(500, { message: 'Bio must be under 500 characters.' }).optional()
});

export type ProfileFormSchema = typeof profileFormSchema;

Use z.email() (not z.string().email()) — this project runs Zod v4. Cross-field validation uses .refine():

export const changePasswordSchema = z
  .object({
    password: z.string().min(8),
    confirmPassword: z.string()
  })
  .refine((d) => d.password === d.confirmPassword, {
    message: "Passwords don't match.",
    path: ['confirmPassword']
  });

2. Page component — +page.svelte

<script lang="ts">
  import { apiFetch } from '$lib/api';
  import { profileFormSchema } from '$lib/forms/profile-schema';
  import { Button, Form, Input } from '@repo/ui';
  import { toast } from 'svelte-sonner';
  import { defaults, superForm } from 'sveltekit-superforms';
  import { zod4, zod4Client } from 'sveltekit-superforms/adapters';

  const initialData = { name: '', email: '', bio: '' };

  const form = superForm(defaults(initialData, zod4(profileFormSchema)), {
    SPA: true,
    validators: zod4Client(profileFormSchema),
    validationMethod: 'onsubmit',   // validate on blur for better UX on longer forms
    async onUpdate({ form }) {
      if (!form.valid) return;

      try {
        const { error } = await apiFetch('/v1/profile', {
          method: 'PUT',
          body: form.data
        });

        if (error) {
          toast.error(error.message ?? 'Could not save profile. Please try again.');
          return;
        }

        toast.success('Profile updated.');
      } catch {
        toast.error('Could not save profile. Please try again.');
      }
    }
  });

  const { form: formData, enhance, submitting } = form;
</script>

<form method="POST" use:enhance>
  <Form.Field {form} name="name">
    <Form.Control>
      {#snippet children({ props })}
        <Form.Label>Name</Form.Label>
        <Input.Root bind:value={$formData.name} type="text" {...props} class="text-base" />
      {/snippet}
    </Form.Control>
    <Form.FieldErrors />
  </Form.Field>

  <Form.Field {form} name="email">
    <Form.Control>
      {#snippet children({ props })}
        <Form.Label>Email</Form.Label>
        <Input.Root bind:value={$formData.email} type="email" {...props} class="text-base" />
      {/snippet}
    </Form.Control>
    <Form.FieldErrors />
  </Form.Field>

  <Button.Root type="submit" class="w-full" disabled={$submitting}>
    {$submitting ? 'Saving...' : 'Save changes'}
  </Button.Root>
</form>