Checkbox and Radio Group

Setting up a checkbox or radio group is no different from any standard inputs.

#Radio Group

To set up a radio group, make sure the name attribute is the same for all the inputs. You can also use the initialValue from the field metadata to derive whether the radio button should be checked.

1import { useForm } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return (
7    <form id={form.id}>
8      <fieldset>
9        <legend>Please select your favorite color</legend>
10        {['red', 'green', 'blue'].map((value) => (
11          <div key={value}>
12            <label>{value}</label>
13            <input
14              type="radio"
15              name={fields.color.name}
16              value={value}
17              defaultChecked={fields.color.initialValue === value}
18            />
19          </div>
20        ))}
21        <div>{fields.color.errors}</div>
22      </fieldset>
23      <button>Submit</button>
24    </form>
25  );
26}

#Checkbox

Setting up a checkbox group would be similar to a radio group except the initialValue can be either a string or an array because of missing information on the server side whether the checkbox is a boolean or a group. You can derive the defaultChecked value from the initialValue as shown below. As the errors from both yup and zod are mapped based on the corresponding paths and the errors of each option will be mapped to its corresponding index, e.g. answer[0] instead of the array itself, e.g. answers. If you want to display all the errors, you can consider using the allErrors property on the field metadata instead.

1import { useForm } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return (
7    <form id={form.id}>
8      <fieldset>
9        <legend>Please select the correct answers</legend>
10        {['a', 'b', 'c', 'd'].map((value) => (
11          <div key={value}>
12            <label>{value}</label>
13            <input
14              type="checkbox"
15              name={fields.answer.name}
16              value={value}
17              defaultChecked={
18                fields.answer.initialValue &&
19                Array.isArray(fields.answer.initialValue)
20                  ? fields.answer.initialValue.includes(value)
21                  : fields.answer.initialValue === value
22              }
23            />
24          </div>
25        ))}
26        <div>{Object.values(fields.answer.allErrors).flat()}</div>
27      </fieldset>
28      <button>Submit</button>
29    </form>
30  );
31}

However, if it is just a single checkbox, you can check if the initialValue matches the input value which defaults to on by the browser.

1import { useForm } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return (
7    <form id={form.id}>
8      <div>
9        <label>Terms and conditions</label>
10        <input
11          name={fields.toc}
12          defaultChecked={fields.toc.initialValue === 'on'}
13        />
14        <div>{fields.toc.errors}</div>
15      </div>
16      <button>Submit</button>
17    </form>
18  );
19}