docs: explain the usage of allErrors with checkbox group (#735)

docs/checkbox-and-radio-group.md

@@ -37,7 +37,7 @@ function Example() {
 
 ## 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.
+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.
 
 ```tsx
 import { useForm } from '@conform-to/react';
@@ -65,7 +65,7 @@ function Example() {
             />
           </div>
         ))}
-        <div>{fields.answer.errors}</div>
+        <div>{Object.values(fields.answer.allErrors).flat()}</div>
       </fieldset>
       <button>Submit</button>
     </form>

docs/file-upload.md

@@ -70,11 +70,7 @@ function Example() {
       <div>
         <label>Mutliple Files</label>
         <input type="file" name={fields.files.name} multiple />
-        <div>
-          {Object.entries(fields.files.allErrors).flatMap(
-            ([, messages]) => messages,
-          )}
-        </div>
+        <div>{Object.values(fields.files.allErrors).flat()}</div>
       </div>
       <button>Upload</button>
     </form>

docs/ja/checkbox-and-radio-group.md

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

docs/ja/file-upload.md

@@ -37,7 +37,7 @@ function Example() {
 
 ## 複数のファイル
 
-複数のファイルをアップロードできるようにするには、ファイル入力に **multiple** 属性を設定する必要があります。フィールドメタデータのエラーが各ファイルのすべてのエラーを含んでいない可能性があることに注意することが重要です。 yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各ファイルのエラーは、配列自体（例： `files` ）ではなく、対応するインデックス（例： `files[0]` ）にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの **allErrors** プロパティを代わりに使用することを検討できます。
+複数のファイルをアップロードできるようにするには、ファイル入力に **multiple** 属性を設定する必要があります。フィールドメタデータのエラーが各ファイルのすべてのエラーを含んでいない可能性があることに注意することが重要です。 yup および zod からのエラーは、対応するパスに基づいてマッピングされ、各選択のエラーは、配列自体（例： `files` ）ではなく、対応するインデックス（例： `files[0]` ）にマッピングされます。すべてのエラーを表示したい場合は、フィールドメタデータの **allErrors** プロパティを代わりに使用することを検討できます。
 
 ```tsx
 import { useForm } from '@conform-to/react';
@@ -70,11 +70,7 @@ function Example() {
       <div>
         <label>Mutliple Files</label>
         <input type="file" name={fields.files.name} multiple />
-        <div>
-          {Object.entries(fields.files.allErrors).flatMap(
-            ([, messages]) => messages,
-          )}
-        </div>
+        <div>{Object.values(fields.files.allErrors).flat()}</div>
       </div>
       <button>Upload</button>
     </form>