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.
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>{fields.answer.errors}</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}