I am trying to build a form using SvelteKit Actions, Superforms, Formsnap and Zod. But my checkbox is not working as expected.
// schema.tsexport 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>...
On the client, things seem to work as expected (the value in the SuperDebug component and a variable updates the value correctly), but when the form is submitted the private
field is missing in the form data (observed in the onSubmit
event and on the server). This means that on the server the value is always set to false (as it is missing).
I have tried using an <input type="checkbox" />
instead of the custom <Checkbox />
component, but the problem persists. It seems to be an issue when submitting the form.
Why is this happening? This setup seems like it should work, and it does for all my other (text) form fields.