I'm currently in the process of creating a form with SvelteKit Actions, Superforms, Formsnap, and Zod. However, I've encountered an issue with my checkbox not functioning as expected.
// schema.ts
export const formSchema = z.object({
...
private: z.boolean().default(true),
...
});
<!-- +page.svelte -->
<script lang="ts">
...
export let data: PageData;
const form = superForm(data.form, {
validators: zodClient(formSchema),
});
const { enhance, form: formData, errors, submitting } = form;
...
</script>
...
<Form.Field {form} name="private">
<Form.Control let:attrs>
<Form.Label>Private</Form.Label>
<Checkbox {...attrs} bind:checked={$formData.private} />
</Form.Control>
</Form.Field>
...
While things appear to be working fine on the client side (with the value displaying correctly in the SuperDebug component and updating accordingly), I noticed that upon form submission, the private field is missing from the form data (this was observed within the onSubmit event and on the server). As a result, the value defaults to false on the server side.
In an attempt to resolve this issue, I also tried using an
<input type="checkbox" /><Checkbox /> component, but unfortunately, the problem persisted. It seems like the issue lies in the form submission process.
I'm puzzled as to why this is happening. Everything appears to be set up correctly, and it's working smoothly for all other text-based form fields I have implemented.