Default Value with booleans + checkboxes doesnt work

[andrewkucz]

Describe the bug and the expected behavior

Unless Im doing something wrong I cant seem to get default values to play nicely with checkbox inputs (when they are meant to represent boolean schemas)

See the code below but if a schema contains a boolean property acceptTerms for example, I'd expect it be checked by default when loading the page if the defaultValue passed in to the form contains { acceptTerms: true }

Any help is appreciated if Im doing something wrong. Thanks!

Conform version

v0.9.1

Steps to Reproduce the Bug or Issue

I grabbed this example from the docs verbatim, but added a defaultValue to the useForm config:

import { conform, useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { z } from 'zod';

const schema = z.object({
  acceptTerms: z.boolean({
    required_error: 'You must accept the terms and conditions',
  }),
  subscribeNewsletter: z.boolean().optional(),
});

function Example() {
  const [form, { acceptTerms, subscribeNewsletter }] = useForm({
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
    defaultValue: {
      acceptTerms: true,
    },
  });

  return (
    <form {...form.props}>
      <div>
        <label>Terms and conditions</label>
        <input {...conform.input(acceptTerms, { type: 'checkbox' })} />
        <div>{acceptTerms.error}</div>
      </div>
      <div>
        <label>Subscribe Newsletter</label>
        <input {...conform.input(subscribeNewsletter, { type: 'checkbox' })} />
        <div>{subscribeNewsletter.error}</div>
      </div>
      <button>Submit</button>
    </form>
  );
}

Render the above form. I'd expect to see "Terms and conditions" checked on page load.

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

Try this:

const [form, { acceptTerms, subscribeNewsletter }] = useForm({
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
    defaultValue: {
      // `on` is the default value of the checkbox unless you specified it on the element
      acceptTerms: 'on',
    },
  });

There are some limitations on the current implementation on how default value are handled and you need to think in terms of the input value (on for checkbox / radio button). What you did would work when v1 is released.

Is you project setup with Typescript? I expect it to complain when you pass true as well.

[andrewkucz]

Thanks for the feedback! I will use the string value for now and look forward to v1 👍🏻

And yes btw, this was in a TS project and the code I posted did not yield a TS error.

Thanks again

[adam1658]

@edmundhung do you have any thoughts around an inverse coercion.ts? Something that takes a zod schema, and a valid object, and produces a value suitable for defaultValue?

In my use-case, I'm building an edit form for an entity (stored in a DB column as JSON, validated against a zod schema). The schema for which has a property (hidden) inside an array (columns) inside a property (config). My current strategy for creating the defaultValue is as follows:

const defaultValue = {
  ...entity,
  config: {
    ...entity,
    columns: entity.columns.map(column => ({
      ...column,
      hidden: column.hidden ? 'on' : undefined
    }),
  },
};

The above works, but I'm wondering if it's worth a little effort to make something that is schema-based for next time I come across this problem.

[edmundhung]

I am not sure if we can achieve it with zod as it defines most of the logic within a function. In the next version, we will have a default serialize function to loop over each object key and array and try to convert some primitive to string. For example, it will convert boolean to on and date to text using .toISOString() which hopefully is good enough for common cases. But you might still want to serialize it manually if it doesn't fit what you need.