fix auto revalidate

examples/shadcn-ui/src/App.tsx

@@ -44,7 +44,7 @@ const UserSubscriptionSchema = z.object({
 	accountType: z.enum(['personal', 'business'], {
 		required_error: 'You must select an account type',
 	}),
-	accountTypes: z.array(z.enum(['personal', 'business'])),
+	accountTypes: z.array(z.enum(['personal', 'business'])).min(1,'You must select at least one account type'),
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
@@ -180,8 +180,9 @@ function App() {
 							{ value: 'business2', label: 'Business2' },
 						]}
 					/>
-					{fields.accountTypes.errors && (
-						<FieldError>{fields.accountTypes.errors}</FieldError>
+					{fields.accountTypes.allErrors && (
+						<FieldError>{
+							Object.values(fields.accountTypes.allErrors).flat()}</FieldError>
 					)}
 				</Field>
 				<Field>

examples/shadcn-ui/src/components/conform/ToggleGroup.tsx

@@ -28,18 +28,24 @@ export const ToggleGroupConform = ({
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/> : control.value ? (control.value as string[]).map(v => <input
-				// use the same name as the field, html form will handle the rest
-				name={meta.name} 
+			/> : <select
+				multiple
+				name={meta.name}
 				className="sr-only"
-				tabIndex={-1}
-				value={v}
-				// we just care the value to be submitted
-				onChange={() => { }}
+				ref={control.register}
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/>) : null}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+			>
+				{items.map((item) => (
+					<option value={item.value} key={item.value}>
+						{item.label}
+					</option>
+				))}
+			</select>
+			}
 
 			<ToggleGroup
 				{...props}