チェックボックスとラジオグループ

チェックボックスやラジオグループの設定も、他の標準的な input と変わりません。

#ラジオグループ

ラジオグループを設定するには、すべての入力で name 属性が同じであることを確認してください。また、フィールドメタデータから initialValue を使用して、ラジオボタンがチェックされるべきかを導き出すこともできます。yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各選択のエラーは、配列自体（例： answers ）ではなく、対応するインデックス（例： answer[0] ）にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの allErrors プロパティを代わりに使用することを検討できます。

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}

#チェックボックス

チェックボックスグループの設定は、ラジオグループと似ていますが、チェックボックスがブール値なのかグループなのかについてサーバーサイドで情報が不足しているため、 initialValue は文字列または配列のいずれかになります。以下に示すように、 initialValue から defaultChecked 値を導出できます。

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}

ただし、単一のチェックボックスの場合は、ブラウザによってデフォルトで on に設定されている入力 value と initialValue が一致するかどうかを確認できます。

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}