fix tests and docs

docs/checkbox-and-radio-group.md

@@ -39,7 +39,6 @@ function Example() {
  .collection(color, {
  type: 'radio',
  options: ['red', 'green', 'blue'],
- ariaAttributes: true,
  })
  .map((props, index) => (
  <div key={index}>
@@ -57,19 +56,18 @@ function Example() {
 
 ## Checkbox
 
-Setting up a checkbox group would be similar to a radio group with `type` being set to `checkbox`. However, there is one caveat when validating a checkbox group: Conform will transform the value to an array only when there are more than one checkboxes selected. To ensure a consistent data structure, you need to preprocess the data as shown in the snippet.
+Setting up a checkbox group would be similar to a radio group except the `type` is set to `checkbox`.
 
 ```tsx
 import { useForm } from '@conform-to/react';
 import { parse } from '@conform-to/zod';
 import { z } from 'zod';
 
 const schema = z.object({
- answer: z.preprocess(
- // To ensure the value is always an array
- (value) => !Array.isArray(value) ? [value] : value,
- z.string().array().nonEmpty('At least one answer is required')
- ),
+ answer: z
+ .string()
+ .array()
+ .nonEmpty('At least one answer is required'),
 });
 
 function Example() {
@@ -87,7 +85,6 @@ function Example() {
  .collection(answer, {
  type: 'checkbox',
  options: ['a', 'b', 'c', 'd'],
- ariaAttributes: true,
  })
  .map((props, index) => (
  <div key={index}>

playground/app/routes/collection.tsx

@@ -1,39 +1,14 @@
-import { conform, parse, useForm } from '@conform-to/react';
+import { conform, useForm } from '@conform-to/react';
+import { parse } from '@conform-to/zod';
 import { type LoaderArgs, type ActionArgs, json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
+import { z } from 'zod';
 import { Playground, Field } from '~/components';
 
-interface Schema {
- singleChoice: string;
- multipleChoice: string;
-}
-
-function parseForm(formData: FormData) {
- return parse(formData, {
- resolve({ singleChoice, multipleChoice }) {
- const error: Record<string, string> = {};
-
- if (!singleChoice) {
- error.singleChoice = 'Required';
- }
-
- if (!multipleChoice) {
- error.multipleChoice = 'Required';
- }
-
- if (error.singleChoice || error.multipleChoice) {
- return { error };
- }
-
- return {
- value: {
- singleChoice,
- multipleChoice,
- },
- };
- },
- });
-}
+const schema = z.object({
+ singleChoice: z.string({ required_error: 'Required' }),
+ multipleChoice: z.string().array().min(1, 'Required'),
+});
 
 export async function loader({ request }: LoaderArgs) {
  const url = new URL(request.url);
@@ -45,20 +20,20 @@ export async function loader({ request }: LoaderArgs) {
 
 export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
- const submission = parseForm(formData);
+ const submission = parse(formData, { schema });
 
  return json(submission);
 }
 
 export default function Example() {
  const { noClientValidate } = useLoaderData<typeof loader>();
  const lastSubmission = useActionData<typeof action>();
- const [form, { singleChoice, multipleChoice }] = useForm<Schema>({
+ const [form, { singleChoice, multipleChoice }] = useForm({
  id: 'collection',
  lastSubmission,
  shouldRevalidate: 'onInput',
  onValidate: !noClientValidate
- ? ({ formData }) => parseForm(formData)
+ ? ({ formData }) => parse(formData, { schema })
  : undefined,
  });
 

tests/integrations/collection.spec.ts

@@ -28,7 +28,7 @@ async function runValidationScenario(page: Page) {
  error: {},
  value: {
  singleChoice: 'y',
- multipleChoice: 'c',
+ multipleChoice: ['c'],
  },
  },
  null,