diff --git a/.gitignore b/.gitignore
index 5611bea8..e083b003 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@ dist
 .DS_STORE
 
 lerna-debug.log
+packages/*/dist/**
 packages/*/src/playground.ts
diff --git a/eslint.config.js b/eslint.config.js
index af97e02c..dd83646f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -18,6 +18,7 @@ export default tseslint.config(
       '@typescript-eslint/no-use-before-define': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
     },
   },
   {
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 00000000..b867229b
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1 @@
+declare const __DEV__: boolean;
diff --git a/packages/core/src/constants/index.ts b/packages/core/src/constants/index.ts
index fb4c8c08..31c00570 100644
--- a/packages/core/src/constants/index.ts
+++ b/packages/core/src/constants/index.ts
@@ -8,6 +8,7 @@ export const FieldTypePrefixes = {
   RadioButtonGroup: 'rbg',
   Slider: 'sl',
   SearchField: 'sf',
+  FormGroup: 'fg',
 } as const;
 
 export const NOOP = () => {};
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index dc451f7b..8f32603d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -8,6 +8,7 @@ export * from './useNumberField';
 export * from './useSpinButton';
 export * from './types';
 export * from './config';
-export * from './form';
+export * from './useForm';
+export * from './useFormGroup';
 export * from './validation';
 export { normalizePath } from './utils/path';
diff --git a/packages/core/src/types/common.ts b/packages/core/src/types/common.ts
index 52af0a20..3cff3715 100644
--- a/packages/core/src/types/common.ts
+++ b/packages/core/src/types/common.ts
@@ -4,7 +4,7 @@ export type Numberish = number | `${number}`;
 
 export type AriaLabelProps = {
   id: string;
-  for: string;
+  for?: string;
 };
 
 export type AriaDescriptionProps = {
diff --git a/packages/core/src/types/forms.ts b/packages/core/src/types/forms.ts
index d86ccfb3..bba8b9eb 100644
--- a/packages/core/src/types/forms.ts
+++ b/packages/core/src/types/forms.ts
@@ -1,9 +1,37 @@
 import { Schema, Simplify } from 'type-fest';
 import { FormObject } from './common';
 import { Path } from './paths';
+import { TypedSchemaError } from './typedSchema';
+import { FormValidationMode } from '../useForm/formContext';
 
 export type TouchedSchema<TForm extends FormObject> = Simplify<Schema<TForm, boolean>>;
 
 export type DisabledSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, boolean>>;
 
 export type ErrorsSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, string[]>>;
+
+type BaseValidationResult = {
+  isValid: boolean;
+  errors: TypedSchemaError[];
+};
+
+export interface ValidationResult<TValue = unknown> extends BaseValidationResult {
+  type: 'FIELD';
+  output: TValue;
+  path: string;
+}
+
+export interface GroupValidationResult<TOutput extends FormObject = FormObject> extends BaseValidationResult {
+  type: 'GROUP';
+  path: string;
+  output: TOutput;
+  mode: FormValidationMode;
+}
+
+export interface FormValidationResult<TOutput extends FormObject = FormObject> extends BaseValidationResult {
+  type: 'FORM';
+  output: TOutput;
+  mode: FormValidationMode;
+}
+
+export type AnyValidationResult = GroupValidationResult | ValidationResult;
diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts
index a7f279d9..f353fe8d 100644
--- a/packages/core/src/useCheckbox/useCheckbox.ts
+++ b/packages/core/src/useCheckbox/useCheckbox.ts
@@ -1,9 +1,9 @@
 import { Ref, computed, inject, nextTick, ref, toValue } from 'vue';
 import { isEqual, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
-import { AriaLabelableProps, Reactivify, InputBaseAttributes, RovingTabIndex } from '../types';
+import { AriaLabelableProps, Reactivify, InputBaseAttributes, RovingTabIndex, TypedSchema } from '../types';
 import { useLabel } from '../a11y/useLabel';
 import { CheckboxGroupContext, CheckboxGroupKey } from './useCheckboxGroup';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 
 export interface CheckboxProps<TValue = string> {
@@ -14,6 +14,8 @@ export interface CheckboxProps<TValue = string> {
   trueValue?: TValue;
   falseValue?: TValue;
   indeterminate?: boolean;
+
+  schema?: TypedSchema<TValue>;
 }
 
 export interface CheckboxDomInputProps extends AriaLabelableProps, InputBaseAttributes {
@@ -30,10 +32,10 @@ export interface CheckboxDomProps extends AriaLabelableProps {
 }
 
 export function useCheckbox<TValue = string>(
-  _props: Reactivify<CheckboxProps<TValue>>,
+  _props: Reactivify<CheckboxProps<TValue>, 'schema'>,
   elementRef?: Ref<HTMLInputElement | undefined>,
 ) {
-  const props = normalizeProps(_props);
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.Checkbox);
   const getTrueValue = () => (toValue(props.trueValue) as TValue) ?? (true as TValue);
   const getFalseValue = () => (toValue(props.falseValue) as TValue) ?? (false as TValue);
@@ -45,6 +47,7 @@ export function useCheckbox<TValue = string>(
         path: props.name,
         initialValue: toValue(props.modelValue) as TValue,
         disabled: props.disabled,
+        schema: props.schema,
       });
 
   const checked = computed({
diff --git a/packages/core/src/useCheckbox/useCheckboxGroup.ts b/packages/core/src/useCheckbox/useCheckboxGroup.ts
index 6bd0906d..f91b3334 100644
--- a/packages/core/src/useCheckbox/useCheckboxGroup.ts
+++ b/packages/core/src/useCheckbox/useCheckboxGroup.ts
@@ -9,12 +9,13 @@ import {
   Direction,
   Reactivify,
   Arrayable,
+  TypedSchema,
 } from '../types';
 import { useUniqId, createDescribedByProps, normalizeProps, isEqual } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { useErrorDisplay } from '../form/useErrorDisplay';
+import { useErrorDisplay } from '../useFormField/useErrorDisplay';
 
 export type CheckboxGroupValue<TCheckbox> = TCheckbox[];
 
@@ -59,6 +60,8 @@ export interface CheckboxGroupProps<TCheckbox = unknown> {
   disabled?: boolean;
   readonly?: boolean;
   required?: boolean;
+
+  schema?: TypedSchema<CheckboxGroupValue<TCheckbox>>;
 }
 
 interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
@@ -66,8 +69,8 @@ interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps
   dir: Direction;
 }
 
-export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProps<TCheckbox>>) {
-  const props = normalizeProps(_props);
+export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProps<TCheckbox>, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const groupId = useUniqId(FieldTypePrefixes.CheckboxGroup);
   const { direction } = useLocale();
   const checkboxes: CheckboxContext[] = [];
@@ -79,6 +82,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
   const field = useFormField({
     path: props.name,
     initialValue: toValue(props.modelValue),
+    schema: props.schema,
   });
 
   const { displayError } = useErrorDisplay(field);
diff --git a/packages/core/src/form/formContext.ts b/packages/core/src/useForm/formContext.ts
similarity index 92%
rename from packages/core/src/form/formContext.ts
rename to packages/core/src/useForm/formContext.ts
index 28477c5e..2a948ec1 100644
--- a/packages/core/src/form/formContext.ts
+++ b/packages/core/src/useForm/formContext.ts
@@ -13,9 +13,9 @@ import {
 import { cloneDeep, normalizeArrayable } from '../utils/common';
 import { escapePath, findLeaf, getFromPath, isPathSet, setInPath, unsetPath as unsetInObject } from '../utils/path';
 import { FormSnapshot } from './formSnapshot';
-import { merge } from '../../../shared/src';
+import { isObject, merge } from '../../../shared/src';
 
-export type FormValidationMode = 'native' | 'schema';
+export type FormValidationMode = 'aggregate' | 'schema';
 
 export interface BaseFormContext<TForm extends FormObject = FormObject> {
   id: string;
@@ -36,7 +36,7 @@ export interface BaseFormContext<TForm extends FormObject = FormObject> {
   setFieldErrors<TPath extends Path<TForm>>(path: TPath, message: Arrayable<string>): void;
   getValidationMode(): FormValidationMode;
   getErrors: () => TypedSchemaError[];
-  clearErrors: () => void;
+  clearErrors: (path?: string) => void;
   hasErrors: () => boolean;
   getValues: () => TForm;
   setValues: (newValues: Partial<TForm>, opts?: SetValueOptions) => void;
@@ -83,7 +83,12 @@ export function createFormContext<TForm extends FormObject = FormObject, TOutput
   }
 
   function isFieldTouched<TPath extends Path<TForm>>(path: TPath) {
-    return !!getFromPath(touched, path);
+    const value = getFromPath(touched, path);
+    if (isObject(value)) {
+      return !!findLeaf(value, v => !!v);
+    }
+
+    return !!value;
   }
 
   function isFieldSet<TPath extends Path<TForm>>(path: TPath) {
@@ -199,8 +204,17 @@ export function createFormContext<TForm extends FormObject = FormObject, TOutput
     merge(touched, newTouched);
   }
 
-  function clearErrors() {
-    errors.value = {} as ErrorsSchema<TForm>;
+  function clearErrors(path?: string) {
+    if (!path) {
+      errors.value = {} as ErrorsSchema<TForm>;
+      return;
+    }
+
+    Object.keys(errors.value).forEach(key => {
+      if (key === path || key.startsWith(path)) {
+        delete errors.value[key as Path<TForm>];
+      }
+    });
   }
 
   function revertValues() {
@@ -212,7 +226,7 @@ export function createFormContext<TForm extends FormObject = FormObject, TOutput
   }
 
   function getValidationMode(): FormValidationMode {
-    return schema ? 'schema' : 'native';
+    return schema ? 'schema' : 'aggregate';
   }
 
   return {
diff --git a/packages/core/src/form/formSnapshot.ts b/packages/core/src/useForm/formSnapshot.ts
similarity index 100%
rename from packages/core/src/form/formSnapshot.ts
rename to packages/core/src/useForm/formSnapshot.ts
diff --git a/packages/core/src/useForm/index.ts b/packages/core/src/useForm/index.ts
new file mode 100644
index 00000000..05e9f084
--- /dev/null
+++ b/packages/core/src/useForm/index.ts
@@ -0,0 +1 @@
+export * from './useForm';
diff --git a/packages/core/src/form/useForm.spec.ts b/packages/core/src/useForm/useForm.spec.ts
similarity index 92%
rename from packages/core/src/form/useForm.spec.ts
rename to packages/core/src/useForm/useForm.spec.ts
index 2e13a5a2..f86a355f 100644
--- a/packages/core/src/form/useForm.spec.ts
+++ b/packages/core/src/useForm/useForm.spec.ts
@@ -1,6 +1,6 @@
 import { flush, renderSetup } from '@test-utils/index';
 import { useForm } from './useForm';
-import { useFormField } from './useFormField';
+import { useFormField } from '../useFormField';
 import { Component, nextTick, Ref, ref } from 'vue';
 import { useInputValidity } from '../validation/useInputValidity';
 import { fireEvent, render, screen } from '@testing-library/vue';
@@ -417,7 +417,8 @@ describe('form validation', () => {
         inheritAttrs: false,
         setup: (_, { attrs }) => {
           const name = (attrs.name || 'test') as string;
-          const { errorMessage, inputProps } = useTextField({ name, label: name });
+          const schema = attrs.schema as TypedSchema<any>;
+          const { errorMessage, inputProps } = useTextField({ name, label: name, schema });
 
           return { errorMessage: errorMessage, inputProps, name };
         },
@@ -489,7 +490,7 @@ describe('form validation', () => {
       });
 
       await fireEvent.click(screen.getByText('Submit'));
-      await nextTick();
+      await flush();
       expect(screen.getByTestId('err').textContent).toBe('error');
       expect(screen.getByTestId('form-err').textContent).toBe('error');
       expect(handler).not.toHaveBeenCalled();
@@ -534,7 +535,7 @@ describe('form validation', () => {
       expect(screen.getByTestId('err').textContent).toBe('error');
       expect(screen.getByTestId('form-err').textContent).toBe('error');
       await fireEvent.click(screen.getByText('Submit'));
-      await nextTick();
+      await flush();
       expect(handler).toHaveBeenCalledOnce();
       expect(screen.getByTestId('err').textContent).toBe('');
       expect(screen.getByTestId('form-err').textContent).toBe('');
@@ -577,7 +578,7 @@ describe('form validation', () => {
       });
 
       await fireEvent.click(screen.getByText('Submit'));
-      await nextTick();
+      await flush();
       expect(handler).toHaveBeenCalledOnce();
       expect(handler).toHaveBeenLastCalledWith({ test: true, foo: 'bar' });
     });
@@ -633,6 +634,52 @@ describe('form validation', () => {
 
       expect(values).toEqual({ test: 'foo' });
     });
+
+    test('combines errors from field-level schemas', async () => {
+      const handler = vi.fn();
+      const schema: TypedSchema<object, object> = {
+        async parse() {
+          return {
+            errors: [{ path: 'test', messages: ['error'] }],
+          };
+        },
+      };
+
+      const fieldSchema: TypedSchema<object, object> = {
+        async parse() {
+          return {
+            errors: [{ path: 'field', messages: ['field error'] }],
+          };
+        },
+      };
+
+      await render({
+        components: { Child: createInputComponent() },
+        setup() {
+          const { handleSubmit, getError } = useForm({
+            schema,
+          });
+
+          return { getError, onSubmit: handleSubmit(handler), fieldSchema };
+        },
+        template: `
+      <form @submit="onSubmit" novalidate>
+      <Child />
+      <Child name="field" :schema="fieldSchema" />
+        <span data-testid="form-err">{{ getError('test') }}</span>
+        <span data-testid="field-err">{{ getError('field') }}</span>
+
+        <button type="submit">Submit</button>
+      </form>
+    `,
+      });
+
+      await fireEvent.click(screen.getByText('Submit'));
+      await flush();
+      expect(screen.getByTestId('form-err').textContent).toBe('error');
+      expect(screen.getByTestId('field-err').textContent).toBe('field error');
+      expect(handler).not.toHaveBeenCalled();
+    });
   });
 
   test('form reset clears errors', async () => {
diff --git a/packages/core/src/form/useForm.ts b/packages/core/src/useForm/useForm.ts
similarity index 93%
rename from packages/core/src/form/useForm.ts
rename to packages/core/src/useForm/useForm.ts
index 518e494d..1bcbdc46 100644
--- a/packages/core/src/form/useForm.ts
+++ b/packages/core/src/useForm/useForm.ts
@@ -9,10 +9,13 @@ import {
   ErrorsSchema,
   Path,
   TypedSchema,
+  ValidationResult,
+  FormValidationResult,
+  GroupValidationResult,
 } from '../types';
 import { createFormContext, BaseFormContext } from './formContext';
 import { FormTransactionManager, useFormTransactions } from './useFormTransactions';
-import { FormValidationResult, useFormActions } from './useFormActions';
+import { useFormActions } from './useFormActions';
 import { useFormSnapshots } from './formSnapshot';
 import { findLeaf } from '../utils/path';
 
@@ -28,7 +31,9 @@ export interface FormContext<TForm extends FormObject = FormObject, TOutput exte
     FormTransactionManager<TForm> {
   requestValidation(): Promise<FormValidationResult<TOutput>>;
   onSubmitAttempt(cb: () => void): void;
-  onNativeValidationDispatch(cb: () => void): void;
+  onValidationDispatch(
+    cb: (enqueue: (promise: Promise<ValidationResult | GroupValidationResult>) => void) => void,
+  ): void;
 }
 
 export const FormKey: InjectionKey<FormContext<any>> = Symbol('Formwerk FormKey');
diff --git a/packages/core/src/form/useFormActions.ts b/packages/core/src/useForm/useFormActions.ts
similarity index 61%
rename from packages/core/src/form/useFormActions.ts
rename to packages/core/src/useForm/useFormActions.ts
index e848289b..ffe42d2e 100644
--- a/packages/core/src/form/useFormActions.ts
+++ b/packages/core/src/useForm/useFormActions.ts
@@ -1,10 +1,18 @@
 import { shallowRef } from 'vue';
-import { DisabledSchema, FormObject, MaybeAsync, Path, TouchedSchema, TypedSchema, TypedSchemaError } from '../types';
-import { batchAsync, cloneDeep, withLatestCall } from '../utils/common';
+import {
+  DisabledSchema,
+  FormObject,
+  FormValidationResult,
+  MaybeAsync,
+  Path,
+  TouchedSchema,
+  TypedSchema,
+  TypedSchemaError,
+} from '../types';
 import { createEventDispatcher } from '../utils/events';
-import { BaseFormContext, FormValidationMode, SetValueOptions } from './formContext';
+import { BaseFormContext, SetValueOptions } from './formContext';
 import { unsetPath } from '../utils/path';
-import { SCHEMA_BATCH_MS } from '../constants';
+import { useValidationProvider } from '../validation/useValidationProvider';
 
 export interface ResetState<TForm extends FormObject> {
   values: Partial<TForm>;
@@ -17,26 +25,25 @@ export interface FormActionsOptions<TForm extends FormObject = FormObject, TOutp
   disabled: DisabledSchema<TForm>;
 }
 
-export interface FormValidationResult<TOutput extends FormObject = FormObject> {
-  isValid: boolean;
-  errors: TypedSchemaError[];
-  output: TOutput;
-  mode: FormValidationMode;
-}
-
 export function useFormActions<TForm extends FormObject = FormObject, TOutput extends FormObject = TForm>(
   form: BaseFormContext<TForm>,
   { disabled, schema }: FormActionsOptions<TForm, TOutput>,
 ) {
   const isSubmitting = shallowRef(false);
   const [dispatchSubmit, onSubmitAttempt] = createEventDispatcher<void>('submit');
-  const [dispatchValidate, onNativeValidationDispatch] = createEventDispatcher<void>('native-validate');
+  const {
+    validate: _validate,
+    onValidationDispatch,
+    defineValidationRequest,
+  } = useValidationProvider({ schema, getValues: () => form.getValues(), type: 'FORM' });
+  const requestValidation = defineValidationRequest(updateValidationStateFromResult);
 
   function handleSubmit<TReturns>(onSuccess: (values: TOutput) => MaybeAsync<TReturns>) {
     return async function onSubmit(e: Event) {
       e.preventDefault();
       isSubmitting.value = true;
 
+      // No need to wait for this event to propagate, it is used for non-validation stuff like setting touched state.
       dispatchSubmit();
       const { isValid, output } = await validate();
       // Prevent submission if the form has errors
@@ -62,33 +69,6 @@ export function useFormActions<TForm extends FormObject = FormObject, TOutput ex
     };
   }
 
-  /**
-   * Validates but tries to not mutate anything if possible.
-   */
-  async function _validate(): Promise<FormValidationResult<TOutput>> {
-    // If we are using native validation, then we don't stop the state mutation
-    // Because it already has happened, since validations are sourced from the fields.
-    if (form.getValidationMode() === 'native' || !schema) {
-      await dispatchValidate();
-
-      return {
-        mode: 'native',
-        isValid: !form.hasErrors(),
-        errors: form.getErrors(),
-        output: cloneDeep(form.getValues() as unknown as TOutput),
-      };
-    }
-
-    const { errors, output } = await schema.parse(form.getValues());
-
-    return {
-      mode: 'schema',
-      isValid: !errors.length,
-      errors,
-      output: cloneDeep(output ?? (form.getValues() as unknown as TOutput)),
-    };
-  }
-
   function updateValidationStateFromResult(result: FormValidationResult<TOutput>) {
     form.clearErrors();
     applyErrors(result.errors);
@@ -98,10 +78,6 @@ export function useFormActions<TForm extends FormObject = FormObject, TOutput ex
 
   async function validate(): Promise<FormValidationResult<TOutput>> {
     const result = await _validate();
-    if (result.mode === 'native') {
-      return result;
-    }
-
     updateValidationStateFromResult(result);
 
     return result;
@@ -134,12 +110,6 @@ export function useFormActions<TForm extends FormObject = FormObject, TOutput ex
     return Promise.resolve();
   }
 
-  const requestValidation = withLatestCall(batchAsync(_validate, SCHEMA_BATCH_MS), result => {
-    updateValidationStateFromResult(result);
-
-    return result;
-  });
-
   return {
     actions: {
       handleSubmit,
@@ -148,7 +118,7 @@ export function useFormActions<TForm extends FormObject = FormObject, TOutput ex
     },
     requestValidation,
     onSubmitAttempt,
-    onNativeValidationDispatch,
+    onValidationDispatch,
     isSubmitting,
   };
 }
diff --git a/packages/core/src/form/useFormTransactions.ts b/packages/core/src/useForm/useFormTransactions.ts
similarity index 100%
rename from packages/core/src/form/useFormTransactions.ts
rename to packages/core/src/useForm/useFormTransactions.ts
diff --git a/packages/core/src/form/index.ts b/packages/core/src/useFormField/index.ts
similarity index 54%
rename from packages/core/src/form/index.ts
rename to packages/core/src/useFormField/index.ts
index 84616bec..a88ad74a 100644
--- a/packages/core/src/form/index.ts
+++ b/packages/core/src/useFormField/index.ts
@@ -1,2 +1 @@
-export * from './useForm';
 export * from './useFormField';
diff --git a/packages/core/src/form/useErrorDisplay.spec.ts b/packages/core/src/useFormField/useErrorDisplay.spec.ts
similarity index 100%
rename from packages/core/src/form/useErrorDisplay.spec.ts
rename to packages/core/src/useFormField/useErrorDisplay.spec.ts
diff --git a/packages/core/src/form/useErrorDisplay.ts b/packages/core/src/useFormField/useErrorDisplay.ts
similarity index 100%
rename from packages/core/src/form/useErrorDisplay.ts
rename to packages/core/src/useFormField/useErrorDisplay.ts
diff --git a/packages/core/src/form/useFormField.spec.ts b/packages/core/src/useFormField/useFormField.spec.ts
similarity index 75%
rename from packages/core/src/form/useFormField.spec.ts
rename to packages/core/src/useFormField/useFormField.spec.ts
index aa808f22..a25a257f 100644
--- a/packages/core/src/form/useFormField.spec.ts
+++ b/packages/core/src/useFormField/useFormField.spec.ts
@@ -1,6 +1,7 @@
 import { renderSetup } from '@test-utils/index';
 import { useFormField } from './useFormField';
-import { useForm } from './useForm';
+import { useForm } from '../useForm/useForm';
+import { nextTick } from 'vue';
 
 test('it initializes the field value', async () => {
   const { fieldValue } = await renderSetup(() => {
@@ -114,3 +115,38 @@ test('formless fields maintain their own error state', async () => {
   expect(errorMessage.value).toBe('error');
   expect(errors.value).toEqual(['error']);
 });
+
+test('can have a typed schema for validation', async () => {
+  const { validate, errors } = await renderSetup(() => {
+    return useFormField({
+      initialValue: 'bar',
+      schema: {
+        parse: async () => {
+          return { errors: [{ messages: ['error'], path: 'field' }] };
+        },
+      },
+    });
+  });
+
+  expect(errors.value).toEqual([]);
+  await validate(true);
+  expect(errors.value).toEqual(['error']);
+});
+
+test('can have a typed schema for initial value', async () => {
+  const { fieldValue } = await renderSetup(() => {
+    return useFormField({
+      schema: {
+        parse: async () => {
+          return { errors: [] };
+        },
+        defaults(value) {
+          return value || 'default';
+        },
+      },
+    });
+  });
+
+  await nextTick();
+  expect(fieldValue.value).toEqual('default');
+});
diff --git a/packages/core/src/form/useFormField.ts b/packages/core/src/useFormField/useFormField.ts
similarity index 80%
rename from packages/core/src/form/useFormField.ts
rename to packages/core/src/useFormField/useFormField.ts
index 9c712494..b182f16f 100644
--- a/packages/core/src/form/useFormField.ts
+++ b/packages/core/src/useFormField/useFormField.ts
@@ -10,10 +10,11 @@ import {
   toValue,
   watch,
 } from 'vue';
-import { FormContext, FormKey } from './useForm';
-import { Arrayable, Getter } from '../types';
+import { FormContext, FormKey } from '../useForm/useForm';
+import { Arrayable, Getter, TypedSchema, ValidationResult } from '../types';
 import { useSyncModel } from '../reactivity/useModelSync';
 import { cloneDeep, isEqual, normalizeArrayable } from '../utils/common';
+import { FormGroupKey } from '../useFormGroup';
 
 interface FormFieldOptions<TValue = unknown> {
   path: MaybeRefOrGetter<string | undefined> | undefined;
@@ -22,6 +23,7 @@ interface FormFieldOptions<TValue = unknown> {
   syncModel: boolean;
   modelName: string;
   disabled: MaybeRefOrGetter<boolean | undefined>;
+  schema: TypedSchema<TValue>;
 }
 
 export type FormField<TValue> = {
@@ -31,6 +33,10 @@ export type FormField<TValue> = {
   isValid: Ref<boolean>;
   errors: Ref<string[]>;
   errorMessage: Ref<string>;
+  schema: TypedSchema<TValue> | undefined;
+  validate(mutate?: boolean): Promise<ValidationResult>;
+  getPath: Getter<string | undefined>;
+  getName: Getter<string | undefined>;
   setValue: (value: TValue | undefined) => void;
   setTouched: (touched: boolean) => void;
   setErrors: (messages: Arrayable<string>) => void;
@@ -38,19 +44,25 @@ export type FormField<TValue> = {
 
 export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<TValue>>): FormField<TValue> {
   const form = inject(FormKey, null);
-  const getPath = () => toValue(opts?.path);
-  const { fieldValue, pathlessValue, setValue } = useFieldValue(getPath, form, opts?.initialValue);
+  const formGroup = inject(FormGroupKey, null);
+  const getPath = () => {
+    const path = toValue(opts?.path);
+
+    return formGroup ? formGroup.prefixPath(path) : path;
+  };
+  const initialValue = opts?.schema?.defaults?.(opts?.initialValue as TValue) ?? opts?.initialValue;
+  const { fieldValue, pathlessValue, setValue } = useFieldValue(getPath, form, initialValue);
   const { isTouched, pathlessTouched, setTouched } = useFieldTouched(getPath, form);
   const { errors, setErrors, isValid, errorMessage, pathlessValidity } = useFieldValidity(getPath, form);
 
   const isDirty = computed(() => {
     if (!form) {
-      return !isEqual(fieldValue.value, opts?.initialValue);
+      return !isEqual(fieldValue.value, initialValue);
     }
 
     const path = getPath();
     if (!path) {
-      return !isEqual(pathlessValue.value, opts?.initialValue);
+      return !isEqual(pathlessValue.value, initialValue);
     }
 
     return !isEqual(fieldValue.value, form.getFieldOriginalValue(path));
@@ -64,6 +76,34 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     });
   }
 
+  function createValidationResult(result: Omit<ValidationResult, 'type' | 'path'>): ValidationResult {
+    return {
+      type: 'FIELD',
+      path: (formGroup ? toValue(opts?.path) : getPath()) || '',
+      ...result,
+    };
+  }
+
+  async function validate(mutate?: boolean): Promise<ValidationResult> {
+    const schema = opts?.schema;
+    if (!schema) {
+      return Promise.resolve(
+        createValidationResult({ isValid: true, errors: [], output: cloneDeep(fieldValue.value) }),
+      );
+    }
+
+    const { errors, output } = await schema.parse(fieldValue.value as TValue);
+    if (mutate) {
+      setErrors(errors.map(e => e.messages).flat());
+    }
+
+    return createValidationResult({
+      isValid: errors.length === 0,
+      output,
+      errors: errors.map(e => ({ messages: e.messages, path: getPath() || e.path })),
+    });
+  }
+
   const field: FormField<TValue> = {
     fieldValue: readonly(fieldValue) as Ref<TValue | undefined>,
     isTouched: readonly(isTouched) as Ref<boolean>,
@@ -71,6 +111,10 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     isValid,
     errors,
     errorMessage,
+    schema: opts?.schema,
+    validate,
+    getPath,
+    getName: () => toValue(opts?.path),
     setValue,
     setTouched,
     setErrors,
@@ -80,13 +124,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     return field;
   }
 
-  initFormPathIfNecessary(
-    form,
-    getPath,
-    opts?.initialValue,
-    opts?.initialTouched ?? false,
-    toValue(opts?.disabled) ?? false,
-  );
+  initFormPathIfNecessary(form, getPath, initialValue, opts?.initialTouched ?? false, toValue(opts?.disabled) ?? false);
 
   form.onSubmitAttempt(() => {
     setTouched(true);
diff --git a/packages/core/src/useFormGroup/index.md b/packages/core/src/useFormGroup/index.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/core/src/useFormGroup/index.ts b/packages/core/src/useFormGroup/index.ts
new file mode 100644
index 00000000..b8a18462
--- /dev/null
+++ b/packages/core/src/useFormGroup/index.ts
@@ -0,0 +1 @@
+export * from './useFormGroup';
diff --git a/packages/core/src/useFormGroup/useFormGroup.spec.ts b/packages/core/src/useFormGroup/useFormGroup.spec.ts
new file mode 100644
index 00000000..244b2edc
--- /dev/null
+++ b/packages/core/src/useFormGroup/useFormGroup.spec.ts
@@ -0,0 +1,318 @@
+import { renderSetup } from '@test-utils/renderSetup';
+import { Component } from 'vue';
+import { TypedSchema, useTextField, useForm, useFormGroup } from '@core/index';
+import { fireEvent, render, screen } from '@testing-library/vue';
+import { flush } from '@test-utils/flush';
+
+function createInputComponent(): Component {
+  return {
+    inheritAttrs: false,
+    setup: (_, { attrs }) => {
+      const name = (attrs.name || 'test') as string;
+      const schema = attrs.schema as TypedSchema<any>;
+      const { errorMessage, inputProps } = useTextField({ name, label: name, schema });
+
+      return { errorMessage: errorMessage, inputProps, name };
+    },
+    template: `
+        <input v-bind="inputProps" :data-testid="name" />
+        <span data-testid="err">{{ errorMessage }}</span>
+      `,
+  };
+}
+
+function createGroupComponent(fn?: (fg: ReturnType<typeof useFormGroup>) => void): Component {
+  return {
+    inheritAttrs: false,
+    setup: (_, { attrs }) => {
+      const name = (attrs.name || 'test') as string;
+      const schema = attrs.schema as TypedSchema<any>;
+      const fg = useFormGroup({ name, label: name, schema });
+      fn?.(fg);
+
+      return {};
+    },
+    template: `
+        <slot />
+      `,
+  };
+}
+
+test('warns if no form is present', async () => {
+  const warnFn = vi.spyOn(console, 'warn');
+
+  await renderSetup(() => {
+    return useFormGroup({ name: 'test' });
+  });
+
+  expect(warnFn).toHaveBeenCalledOnce();
+  warnFn.mockRestore();
+});
+
+test('prefixes path values with its name', async () => {
+  let form!: ReturnType<typeof useForm>;
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent() },
+    setup() {
+      form = useForm();
+
+      return {};
+    },
+    template: `
+      <TGroup name="groupTest">
+        <TInput name="field1" />
+      </TGroup>
+
+      <TGroup name="nestedGroup.deep">
+        <TInput name="field2" />
+      </TGroup>
+    `,
+  });
+
+  await flush();
+  await fireEvent.update(screen.getByTestId('field1'), 'test 1');
+  await fireEvent.update(screen.getByTestId('field2'), 'test 2');
+  await flush();
+
+  expect(form.values).toEqual({ groupTest: { field1: 'test 1' }, nestedGroup: { deep: { field2: 'test 2' } } });
+});
+
+test('tracks its dirty state', async () => {
+  const groups: ReturnType<typeof useFormGroup>[] = [];
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent(fg => groups.push(fg)) },
+    setup() {
+      useForm();
+
+      return {};
+    },
+    template: `
+      <TGroup name="groupTest">
+        <TInput name="field1" />
+      </TGroup>
+
+      <TGroup name="nestedGroup.deep">
+        <TInput name="field2" />
+      </TGroup>
+    `,
+  });
+
+  await flush();
+  expect(groups[0].isDirty.value).toBe(false);
+  expect(groups[1].isDirty.value).toBe(false);
+  await fireEvent.update(screen.getByTestId('field1'), 'test 1');
+  await flush();
+  expect(groups[0].isDirty.value).toBe(true);
+  expect(groups[1].isDirty.value).toBe(false);
+});
+
+test('tracks its touched state', async () => {
+  const groups: ReturnType<typeof useFormGroup>[] = [];
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent(fg => groups.push(fg)) },
+    setup() {
+      useForm();
+
+      return {};
+    },
+    template: `
+      <TGroup name="groupTest">
+        <TInput name="field1" />
+      </TGroup>
+
+      <TGroup name="nestedGroup.deep">
+        <TInput name="field2" />
+      </TGroup>
+    `,
+  });
+
+  await flush();
+  expect(groups[0].isTouched.value).toBe(false);
+  expect(groups[1].isTouched.value).toBe(false);
+  await fireEvent.touch(screen.getByTestId('field1'));
+  await flush();
+  expect(groups[0].isTouched.value).toBe(true);
+  expect(groups[1].isTouched.value).toBe(false);
+});
+
+test('tracks its valid state', async () => {
+  const groups: ReturnType<typeof useFormGroup>[] = [];
+  const schema: TypedSchema<string> = {
+    async parse(value) {
+      return {
+        errors: value ? [] : [{ path: 'groupTest.field1', messages: ['error'] }],
+      };
+    },
+  };
+
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent(fg => groups.push(fg)) },
+    setup() {
+      useForm();
+
+      return {
+        schema,
+      };
+    },
+    template: `
+      <TGroup name="groupTest">
+        <TInput name="field1" :schema="schema" />
+      </TGroup>
+
+      <TGroup name="nestedGroup.deep">
+        <TInput name="field2" />
+      </TGroup>
+    `,
+  });
+
+  await flush();
+  expect(groups[0].isValid.value).toBe(false);
+  expect(groups[1].isValid.value).toBe(true);
+  await fireEvent.update(screen.getByTestId('field1'), 'test');
+  await fireEvent.blur(screen.getByTestId('field1'));
+  await flush();
+  expect(groups[0].isValid.value).toBe(true);
+  expect(groups[1].isValid.value).toBe(true);
+});
+
+test('validates with a typed schema', async () => {
+  let form!: ReturnType<typeof useForm>;
+  const groups: ReturnType<typeof useFormGroup>[] = [];
+  const schema: TypedSchema<{ field: string }> = {
+    async parse(value) {
+      return {
+        errors: value.field ? [] : [{ path: 'field', messages: ['error'] }],
+      };
+    },
+  };
+
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent(fg => groups.push(fg)) },
+    setup() {
+      form = useForm();
+
+      return {
+        schema,
+      };
+    },
+    template: `
+      <TGroup name="group" :schema="schema">
+        <TInput name="field" />
+      </TGroup>
+    `,
+  });
+
+  await flush();
+  expect(groups[0].isValid.value).toBe(false);
+  expect(form.getError('group.field')).toBe('error');
+  await fireEvent.update(screen.getByTestId('field'), 'test');
+  await fireEvent.blur(screen.getByTestId('field'));
+
+  await flush();
+  expect(groups[0].isValid.value).toBe(true);
+  expect(form.getError('group.field')).toBeUndefined();
+});
+
+test('validation combines schema with form schema', async () => {
+  let form!: ReturnType<typeof useForm>;
+  const groups: ReturnType<typeof useFormGroup>[] = [];
+  const groupSchema: TypedSchema<{ field: string }> = {
+    async parse(value) {
+      return {
+        errors: value.field ? [] : [{ path: 'field', messages: ['error'] }],
+      };
+    },
+  };
+
+  const formSchema: TypedSchema<{ other: string }> = {
+    async parse(value) {
+      return {
+        errors: value.other ? [] : [{ path: 'other', messages: ['error'] }],
+      };
+    },
+  };
+
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent(fg => groups.push(fg)) },
+    setup() {
+      form = useForm({
+        schema: formSchema,
+      }) as any;
+
+      return {
+        groupSchema,
+      };
+    },
+    template: `
+      <TGroup name="group" :schema="groupSchema">
+        <TInput name="field" />
+      </TGroup>
+
+      <TInput name="other" />
+    `,
+  });
+
+  await flush();
+  expect(form.getErrors()).toHaveLength(2);
+  await fireEvent.update(screen.getByTestId('field'), 'test');
+  await fireEvent.blur(screen.getByTestId('other'));
+  await flush();
+  expect(form.getErrors()).toHaveLength(1);
+  await fireEvent.update(screen.getByTestId('other'), 'test');
+  await fireEvent.blur(screen.getByTestId('other'));
+  await flush();
+  expect(form.getErrors()).toHaveLength(0);
+});
+
+test('submission combines group data with form data', async () => {
+  const submitHandler = vi.fn();
+  const groupSchema: TypedSchema<{ first: string }> = {
+    async parse() {
+      return {
+        output: { first: 'wow', second: 'how' },
+        errors: [],
+      };
+    },
+  };
+  await render({
+    components: { TInput: createInputComponent(), TGroup: createGroupComponent() },
+    setup() {
+      const { handleSubmit } = useForm({});
+
+      const onSubmit = handleSubmit(submitHandler);
+
+      return {
+        onSubmit,
+        groupSchema,
+      };
+    },
+    template: `
+      <TGroup name="group" :schema="groupSchema">
+        <TInput name="first" />
+      </TGroup>
+
+      <TGroup name="other" >
+        <TInput name="second" />
+      </TGroup>
+      
+      <TInput name="third" />
+      
+      <button @click="onSubmit">Submit</button>
+    `,
+  });
+
+  await flush();
+  expect(submitHandler).not.toHaveBeenCalled();
+  await fireEvent.update(screen.getByTestId('first'), 'first');
+  await fireEvent.update(screen.getByTestId('second'), 'second');
+  await fireEvent.update(screen.getByTestId('third'), 'third');
+  await flush();
+  await screen.getByText('Submit').click();
+  await flush();
+  expect(submitHandler).toHaveBeenCalledOnce();
+  expect(submitHandler).toHaveBeenLastCalledWith({
+    group: { first: 'wow', second: 'how' },
+    other: { second: 'second' },
+    third: 'third',
+  });
+});
diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts
new file mode 100644
index 00000000..f4129289
--- /dev/null
+++ b/packages/core/src/useFormGroup/useFormGroup.ts
@@ -0,0 +1,206 @@
+import {
+  computed,
+  createBlock,
+  defineComponent,
+  Fragment,
+  inject,
+  InjectionKey,
+  openBlock,
+  provide,
+  Ref,
+  shallowRef,
+  toValue,
+  VNode,
+} from 'vue';
+import { useLabel } from '../a11y/useLabel';
+import { FieldTypePrefixes } from '../constants';
+import {
+  AriaLabelableProps,
+  AriaLabelProps,
+  FormObject,
+  GroupValidationResult,
+  Reactivify,
+  TypedSchema,
+  ValidationResult,
+} from '../types';
+import { isEqual, normalizeProps, useUniqId, warn, withRefCapture } from '../utils/common';
+import { FormKey } from '../useForm';
+import { useValidationProvider } from '../validation/useValidationProvider';
+import { FormValidationMode } from '../useForm/formContext';
+
+export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput> {
+  name: string;
+  label?: string;
+  schema?: TypedSchema<TInput, TOutput>;
+}
+
+interface GroupProps extends AriaLabelableProps {
+  id: string;
+  role?: 'group';
+}
+
+interface FormGroupContext<TOutput extends FormObject = FormObject> {
+  prefixPath: (path: string | undefined) => string | undefined;
+  onValidationDispatch(cb: (enqueue: (promise: Promise<ValidationResult>) => void) => void): void;
+  requestValidation(): Promise<GroupValidationResult<TOutput>>;
+  getValidationMode(): FormValidationMode;
+}
+
+export const FormGroupKey: InjectionKey<FormGroupContext> = Symbol('FormGroup');
+
+export function useFormGroup<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput>(
+  _props: Reactivify<FormGroupProps<TInput, TOutput>, 'schema'>,
+  elementRef?: Ref<HTMLElement>,
+) {
+  const id = useUniqId(FieldTypePrefixes.FormGroup);
+  const props = normalizeProps(_props, ['schema']);
+  const getPath = () => toValue(props.name);
+  const groupRef = elementRef || shallowRef<HTMLInputElement>();
+  const form = inject(FormKey, null);
+  const { validate, onValidationDispatch, defineValidationRequest } = useValidationProvider({
+    getValues,
+    getPath,
+    schema: props.schema,
+    type: 'GROUP',
+  });
+
+  const requestValidation = defineValidationRequest(({ errors }) => {
+    // Clears Errors in that path before proceeding.
+    form?.clearErrors(toValue(props.name));
+    for (const entry of errors) {
+      form?.setFieldErrors(prefixPath(entry.path) ?? '', entry.messages);
+    }
+  });
+
+  if (!form) {
+    warn('Form groups must have a parent form. Please make sure to call `useForm` at a parent component.');
+  }
+
+  const { labelProps, labelledByProps } = useLabel({
+    for: id,
+    label: props.label,
+    targetRef: groupRef,
+  });
+
+  const groupProps = computed<GroupProps>(() => {
+    const isFieldSet = groupRef.value?.tagName === 'FIELDSET';
+
+    return withRefCapture(
+      {
+        id,
+        ...(isFieldSet ? {} : labelledByProps.value),
+        role: isFieldSet ? undefined : 'group',
+      },
+      groupRef,
+      elementRef,
+    );
+  });
+
+  const FormGroup = createInlineFormGroupComponent({ groupProps, labelProps });
+
+  function getValues() {
+    return form?.getFieldValue(getPath()) ?? {};
+  }
+
+  function getErrors() {
+    const path = getPath();
+    const allErrors = form?.getErrors() || [];
+
+    return allErrors.filter(e => e.path.startsWith(path));
+  }
+
+  const isValid = computed(() => getErrors().length === 0);
+  const isTouched = computed(() => form?.isFieldTouched(getPath()) ?? false);
+  const isDirty = computed(() => {
+    const path = getPath();
+
+    return !isEqual(getValues(), form?.getFieldOriginalValue(path) ?? {});
+  });
+
+  function getError(name: string) {
+    return form?.getFieldErrors(ctx.prefixPath(name) ?? '')?.[0];
+  }
+
+  function displayError(name: string) {
+    const msg = getError(name);
+    const path = ctx.prefixPath(name) ?? '';
+
+    return form?.isFieldTouched(path) ? msg : undefined;
+  }
+
+  function prefixPath(path: string | undefined) {
+    return prefixGroupPath(getPath(), path);
+  }
+
+  const ctx: FormGroupContext = {
+    prefixPath,
+    onValidationDispatch,
+    requestValidation,
+    getValidationMode: () => (props.schema ? 'schema' : 'aggregate'),
+  };
+
+  // Whenever the form is validated, it is deferred to the form group to do that.
+  // Fields should not validate in response to their form triggering a validate and instead should follow the field group event
+  form?.onValidationDispatch(enqueue => {
+    enqueue(
+      validate().then(result => {
+        return {
+          ...result,
+          errors: result.errors.map(e => ({ path: prefixPath(e.path) ?? '', messages: e.messages })),
+        };
+      }),
+    );
+  });
+
+  provide(FormGroupKey, ctx);
+
+  return {
+    groupRef,
+    labelProps,
+    groupProps,
+    FormGroup,
+    isDirty,
+    isValid,
+    isTouched,
+    getErrors,
+    getValues,
+    getError,
+    displayError,
+    validate,
+  };
+}
+
+interface InlineComponentProps {
+  groupProps: GroupProps;
+  labelProps: AriaLabelProps;
+}
+
+function createInlineFormGroupComponent({ groupProps, labelProps }: Reactivify<InlineComponentProps>) {
+  const impl = defineComponent({
+    setup(_, { slots }) {
+      return () => (
+        openBlock(),
+        createBlock(Fragment),
+        slots.default?.({ groupProps: toValue(groupProps), labelProps: toValue(labelProps) })
+      );
+    },
+  });
+
+  return impl as typeof impl & {
+    new (): {
+      $slots: {
+        default: (arg: InlineComponentProps) => VNode[];
+      };
+    };
+  };
+}
+
+function prefixGroupPath(prefix: string | undefined, path: string | undefined) {
+  if (!path) {
+    return path;
+  }
+
+  prefix = prefix ? `${prefix}.` : '';
+
+  return `${prefix}${path}`;
+}
diff --git a/packages/core/src/useNumberField/index.ts b/packages/core/src/useNumberField/index.ts
index dd925368..d5249d38 100644
--- a/packages/core/src/useNumberField/index.ts
+++ b/packages/core/src/useNumberField/index.ts
@@ -21,9 +21,10 @@ import { useLabel } from '../a11y/useLabel';
 import { useNumberParser } from '../i18n/useNumberParser';
 import { useSpinButton } from '../useSpinButton';
 import { useLocale } from '../i18n/useLocale';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { useErrorDisplay } from '../form/useErrorDisplay';
+import { useErrorDisplay } from '../useFormField/useErrorDisplay';
+import { TypedSchema } from '../types';
 
 export interface NumberInputDOMAttributes {
   name?: string;
@@ -59,13 +60,15 @@ export interface NumberFieldProps {
   disabled?: boolean;
 
   formatOptions?: Intl.NumberFormatOptions;
+
+  schema?: TypedSchema<number>;
 }
 
 export function useNumberField(
-  _props: Reactivify<NumberFieldProps>,
+  _props: Reactivify<NumberFieldProps, 'schema'>,
   elementRef?: Ref<HTMLInputElement | HTMLTextAreaElement>,
 ) {
-  const props = normalizeProps(_props);
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.NumberField);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
   const { locale } = useLocale();
@@ -74,6 +77,7 @@ export function useNumberField(
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails } = useInputValidity({ inputRef, field });
diff --git a/packages/core/src/useRadio/useRadioGroup.ts b/packages/core/src/useRadio/useRadioGroup.ts
index bd89a3df..07456a7d 100644
--- a/packages/core/src/useRadio/useRadioGroup.ts
+++ b/packages/core/src/useRadio/useRadioGroup.ts
@@ -9,12 +9,13 @@ import {
   Direction,
   Reactivify,
   Arrayable,
+  TypedSchema,
 } from '../types';
 import { useUniqId, createDescribedByProps, getNextCycleArrIdx, normalizeProps, isEmpty } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { useErrorDisplay } from '../form/useErrorDisplay';
+import { useErrorDisplay } from '../useFormField/useErrorDisplay';
 
 export interface RadioGroupContext<TValue> {
   name: string;
@@ -49,6 +50,8 @@ export interface RadioGroupProps<TValue = string> {
   disabled?: boolean;
   readonly?: boolean;
   required?: boolean;
+
+  schema?: TypedSchema<TValue>;
 }
 
 interface RadioGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
@@ -74,8 +77,8 @@ function getOrientationArrows(dir: Direction | undefined) {
   return { prev: prevKeys, next: nextKeys };
 }
 
-export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProps<TValue>>) {
-  const props = normalizeProps(_props);
+export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProps<TValue>, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const groupId = useUniqId(FieldTypePrefixes.RadioButtonGroup);
   const { direction } = useLocale();
 
@@ -89,6 +92,7 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
     path: props.name,
     initialValue: toValue(props.modelValue) as TValue,
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails } = useInputValidity({ field });
diff --git a/packages/core/src/useSearchField/index.ts b/packages/core/src/useSearchField/index.ts
index 257210a3..4d43ae58 100644
--- a/packages/core/src/useSearchField/index.ts
+++ b/packages/core/src/useSearchField/index.ts
@@ -7,13 +7,14 @@ import {
   Numberish,
   Reactivify,
   TextInputBaseAttributes,
+  TypedSchema,
 } from '../types';
 import { createDescribedByProps, normalizeProps, propsToValues, useUniqId, withRefCapture } from '../utils/common';
 import { useInputValidity } from '../validation/useInputValidity';
 import { useLabel } from '../a11y/useLabel';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { useErrorDisplay } from '../form/useErrorDisplay';
+import { useErrorDisplay } from '../useFormField/useErrorDisplay';
 
 export interface SearchInputDOMAttributes extends TextInputBaseAttributes {
   type?: 'search';
@@ -44,17 +45,23 @@ export interface SearchFieldProps {
   readonly?: boolean;
   disabled?: boolean;
 
+  schema?: TypedSchema<string>;
+
   onSubmit?: (value: string) => void;
 }
 
-export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit'>, elementRef?: Ref<HTMLInputElement>) {
-  const props = normalizeProps(_props, ['onSubmit']);
+export function useSearchField(
+  _props: Reactivify<SearchFieldProps, 'onSubmit' | 'schema'>,
+  elementRef?: Ref<HTMLInputElement>,
+) {
+  const props = normalizeProps(_props, ['onSubmit', 'schema']);
   const inputId = useUniqId(FieldTypePrefixes.SearchField);
   const inputRef = elementRef || ref<HTMLInputElement>();
   const field = useFormField<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails, updateValidity } = useInputValidity({ inputRef, field });
diff --git a/packages/core/src/useSlider/slider.ts b/packages/core/src/useSlider/slider.ts
index 6845d18a..aeca76a9 100644
--- a/packages/core/src/useSlider/slider.ts
+++ b/packages/core/src/useSlider/slider.ts
@@ -1,10 +1,10 @@
 import { InjectionKey, computed, onBeforeUnmount, provide, ref, toValue } from 'vue';
 import { useLabel } from '../a11y/useLabel';
-import { AriaLabelableProps, Arrayable, Direction, Orientation, Reactivify } from '../types';
+import { AriaLabelableProps, Arrayable, Direction, Orientation, Reactivify, TypedSchema } from '../types';
 import { isNullOrUndefined, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { toNearestMultipleOf } from '../utils/math';
 import { useLocale } from '../i18n/useLocale';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 
 export interface SliderProps {
@@ -19,6 +19,8 @@ export interface SliderProps {
   step?: number;
 
   disabled?: boolean;
+
+  schema?: TypedSchema<number>;
 }
 
 export type Coordinate = { x: number; y: number };
@@ -94,8 +96,8 @@ export interface SliderContext {
 
 export const SliderInjectionKey: InjectionKey<SliderContext> = Symbol('Slider');
 
-export function useSlider(_props: Reactivify<SliderProps>) {
-  const props = normalizeProps(_props);
+export function useSlider(_props: Reactivify<SliderProps, 'schema'>) {
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.Slider);
   const trackRef = ref<HTMLElement>();
   const thumbs = ref<ThumbContext[]>([]);
@@ -105,6 +107,7 @@ export function useSlider(_props: Reactivify<SliderProps>) {
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { labelProps, labelledByProps } = useLabel({
diff --git a/packages/core/src/useSwitch/index.ts b/packages/core/src/useSwitch/index.ts
index 4804057b..b9f90ff5 100644
--- a/packages/core/src/useSwitch/index.ts
+++ b/packages/core/src/useSwitch/index.ts
@@ -1,8 +1,15 @@
 import { Ref, computed, shallowRef, toValue } from 'vue';
-import { AriaDescribableProps, AriaLabelableProps, InputBaseAttributes, InputEvents, Reactivify } from '../types';
+import {
+  AriaDescribableProps,
+  AriaLabelableProps,
+  InputBaseAttributes,
+  InputEvents,
+  Reactivify,
+  TypedSchema,
+} from '../types';
 import { isEqual, normalizeProps, useUniqId, withRefCapture } from '../utils/common';
 import { useLabel } from '../a11y/useLabel';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 
 export interface SwitchDOMProps extends InputBaseAttributes, AriaLabelableProps, AriaDescribableProps, InputEvents {
@@ -22,10 +29,12 @@ export type SwitchProps = {
 
   trueValue?: unknown;
   falseValue?: unknown;
+
+  schema?: TypedSchema<unknown>;
 };
 
-export function useSwitch(_props: Reactivify<SwitchProps>, elementRef?: Ref<HTMLInputElement>) {
-  const props = normalizeProps(_props);
+export function useSwitch(_props: Reactivify<SwitchProps, 'schema'>, elementRef?: Ref<HTMLInputElement>) {
+  const props = normalizeProps(_props, ['schema']);
   const id = useUniqId(FieldTypePrefixes.Switch);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
   const { labelProps, labelledByProps } = useLabel({
@@ -38,6 +47,7 @@ export function useSwitch(_props: Reactivify<SwitchProps>, elementRef?: Ref<HTML
     path: props.name,
     initialValue: toValue(props.modelValue) ?? toValue(props.falseValue) ?? false,
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   /**
diff --git a/packages/core/src/useTextField/index.ts b/packages/core/src/useTextField/index.ts
index 56163051..09a47fce 100644
--- a/packages/core/src/useTextField/index.ts
+++ b/packages/core/src/useTextField/index.ts
@@ -11,9 +11,10 @@ import {
 } from '../types/common';
 import { useInputValidity } from '../validation/useInputValidity';
 import { useLabel } from '../a11y/useLabel';
-import { useFormField } from '../form/useFormField';
+import { useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { useErrorDisplay } from '../form/useErrorDisplay';
+import { useErrorDisplay } from '../useFormField/useErrorDisplay';
+import { TypedSchema } from '../types';
 
 export type TextInputDOMType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
@@ -47,19 +48,22 @@ export interface TextFieldProps {
   required?: boolean;
   readonly?: boolean;
   disabled?: boolean;
+
+  schema?: TypedSchema<string>;
 }
 
 export function useTextField(
-  _props: Reactivify<TextFieldProps>,
+  _props: Reactivify<TextFieldProps, 'schema'>,
   elementRef?: Ref<HTMLInputElement | HTMLTextAreaElement>,
 ) {
-  const props = normalizeProps(_props);
+  const props = normalizeProps(_props, ['schema']);
   const inputId = useUniqId(FieldTypePrefixes.TextField);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
   const field = useFormField<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
+    schema: props.schema,
   });
 
   const { validityDetails } = useInputValidity({ inputRef, field });
diff --git a/packages/core/src/utils/common.ts b/packages/core/src/utils/common.ts
index 008f6bd7..f2224da4 100644
--- a/packages/core/src/utils/common.ts
+++ b/packages/core/src/utils/common.ts
@@ -89,7 +89,7 @@ export function normalizeProps<TProps extends Record<string, unknown>, Exclude e
         return [key, (...args: any[]) => (props[key] as any)(...args)];
       }
 
-      return [key, () => props[key]];
+      return [key, props[key]];
     }),
   ) as NormalizedProps<TProps, Exclude>;
 }
@@ -278,3 +278,9 @@ export function batchAsync<TFunction extends (...args: any) => Promise<any>, TRe
     return new Promise<TResult>(resolve => resolves.push(resolve));
   };
 }
+
+export function warn(message: string) {
+  if (__DEV__) {
+    console.warn(`[Formwerk]: ${message}`);
+  }
+}
diff --git a/packages/core/src/validation/useInputValidity.spec.ts b/packages/core/src/validation/useInputValidity.spec.ts
index 68443a60..6b401296 100644
--- a/packages/core/src/validation/useInputValidity.spec.ts
+++ b/packages/core/src/validation/useInputValidity.spec.ts
@@ -1,7 +1,7 @@
 import { nextTick, ref } from 'vue';
 import { useInputValidity } from './useInputValidity';
 import { fireEvent, render, screen } from '@testing-library/vue';
-import { FormField, useFormField } from '../form';
+import { FormField, useFormField } from '../useFormField';
 
 test('updates the validity state on blur events', async () => {
   const input = ref<HTMLInputElement>();
@@ -91,6 +91,7 @@ test('updates the input native validity with custom validity errors', async () =
     `,
   });
 
+  await nextTick();
   field.setErrors('Custom error');
   await nextTick();
   expect(screen.getByTestId('err').textContent).toBe('Custom error');
diff --git a/packages/core/src/validation/useInputValidity.ts b/packages/core/src/validation/useInputValidity.ts
index ecbff1de..dfd8cbab 100644
--- a/packages/core/src/validation/useInputValidity.ts
+++ b/packages/core/src/validation/useInputValidity.ts
@@ -1,7 +1,10 @@
 import { Ref, inject, nextTick, onMounted, shallowRef, watch } from 'vue';
 import { useEventListener } from '../helpers/useEventListener';
-import { FormField, FormKey } from '../form';
-import { Maybe } from '../types';
+import { FormKey } from '../useForm';
+import { Maybe, ValidationResult } from '../types';
+import { FormField } from '../useFormField';
+import { cloneDeep, normalizeArrayable } from '../utils/common';
+import { FormGroupKey } from '../useFormGroup';
 
 interface InputValidityOptions {
   inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement | undefined>;
@@ -11,23 +14,34 @@ interface InputValidityOptions {
 
 export function useInputValidity(opts: InputValidityOptions) {
   const form = inject(FormKey, null);
-  const { setErrors, errorMessage } = opts.field;
+  const formGroup = inject(FormGroupKey, null);
+  const { setErrors, errorMessage, schema, validate: validateField, getPath, getName, fieldValue } = opts.field;
   const validityDetails = shallowRef<ValidityState>();
-  const validationMode = form?.getValidationMode() ?? 'native';
+  const validationMode = (formGroup || form)?.getValidationMode() ?? 'aggregate';
   useMessageCustomValiditySync(errorMessage, opts.inputRef);
 
-  function updateWithNativeValidity() {
+  function validateNative(mutate?: boolean): ValidationResult {
     validityDetails.value = opts.inputRef?.value?.validity;
-    setErrors(opts.inputRef?.value?.validationMessage || []);
+    const messages = normalizeArrayable(opts.inputRef?.value?.validationMessage || ([] as string[])).filter(Boolean);
+    if (mutate) {
+      setErrors(messages);
+    }
+
+    return {
+      type: 'FIELD',
+      path: (formGroup ? getName() : getPath()) || '',
+      output: cloneDeep(fieldValue.value),
+      isValid: !messages.length,
+      errors: [{ messages, path: getPath() || '' }],
+    };
   }
 
   function _updateValidity() {
-    if (validationMode === 'native') {
-      updateWithNativeValidity();
-      return;
+    if (validationMode === 'aggregate') {
+      return schema ? validateField(true) : validateNative(true);
     }
 
-    form?.requestValidation();
+    (formGroup || form)?.requestValidation();
   }
 
   async function updateValidity() {
@@ -37,16 +51,30 @@ export function useInputValidity(opts: InputValidityOptions) {
 
   useEventListener(opts.inputRef, opts?.events || ['change', 'blur'], updateValidity);
 
-  if (validationMode === 'native') {
-    form?.onNativeValidationDispatch(updateWithNativeValidity);
-    useEventListener(opts.inputRef, opts?.events || ['invalid'], updateWithNativeValidity);
+  // It shouldn't mutate the field if the validation is sourced by the form.
+  // The form will handle the mutation later once it aggregates all the results.
+  (formGroup || form)?.onValidationDispatch(enqueue => {
+    if (schema) {
+      enqueue(validateField(false));
+      return;
+    }
+
+    if (validationMode === 'aggregate') {
+      enqueue(Promise.resolve(validateNative(false)));
+      return;
+    }
+  });
+
+  if (validationMode === 'aggregate') {
+    // It should self-mutate the field errors because this is fired by a native validation and not sourced by the form.
+    useEventListener(opts.inputRef, opts?.events || ['invalid'], () => validateNative(true));
   }
 
   /**
    * Validity is always updated on mount.
    */
   onMounted(() => {
-    nextTick(updateValidity);
+    nextTick(_updateValidity);
   });
 
   return {
diff --git a/packages/core/src/validation/useValidationProvider.ts b/packages/core/src/validation/useValidationProvider.ts
new file mode 100644
index 00000000..34efd99e
--- /dev/null
+++ b/packages/core/src/validation/useValidationProvider.ts
@@ -0,0 +1,130 @@
+import {
+  AnyValidationResult,
+  FormObject,
+  FormValidationResult,
+  GroupValidationResult,
+  TypedSchema,
+  ValidationResult,
+} from '../types';
+import { batchAsync, cloneDeep, withLatestCall } from '../utils/common';
+import { createEventDispatcher } from '../utils/events';
+import { SCHEMA_BATCH_MS } from '../constants';
+import { setInPath } from '../utils/path';
+
+type AggregatorResult<TOutput extends FormObject> = FormValidationResult<TOutput> | GroupValidationResult<TOutput>;
+
+interface ValidationProviderOptions<
+  TInput extends FormObject,
+  TOutput extends FormObject,
+  TType extends AggregatorResult<TOutput>['type'],
+> {
+  type: TType;
+  schema?: TypedSchema<TInput, TOutput>;
+  getValues: () => TInput;
+  getPath?: () => string;
+}
+
+export function useValidationProvider<
+  TInput extends FormObject,
+  TOutput extends FormObject,
+  TType extends AggregatorResult<TOutput>['type'],
+  TResult extends AggregatorResult<TOutput> & { type: TType },
+>({ schema, getValues, type, getPath }: ValidationProviderOptions<TInput, TOutput, TType>) {
+  const [dispatchValidate, onValidationDispatch] =
+    createEventDispatcher<(pending: Promise<ValidationResult>) => void>('validate');
+
+  /**
+   * Validates but tries to not mutate anything if possible.
+   */
+  async function validate(): Promise<TResult> {
+    const validationQueue: Promise<AnyValidationResult>[] = [];
+    const enqueue = (promise: Promise<AnyValidationResult>) => validationQueue.push(promise);
+    // This is meant to trigger a signal for all fields that can validate themselves to do so.
+    // Native validation is sync so no need to wait for pending validators.
+    // But field-level and group-level validations are async, so we need to wait for them.
+    await dispatchValidate(enqueue);
+    const results = await Promise.all(validationQueue);
+    const fieldErrors = results.flatMap(r => r.errors).filter(e => e.messages.length);
+
+    // If we are using native validation, then we don't stop the state mutation
+    // Because it already has happened, since validations are sourced from the fields.
+    if (!schema) {
+      return createValidationResult({
+        isValid: !fieldErrors.length,
+        errors: fieldErrors,
+        output: stitchOutput(getValues() as unknown as TOutput, results),
+      });
+    }
+
+    const { errors, output } = await schema.parse(getValues());
+    const allErrors = [...errors, ...fieldErrors];
+
+    return createValidationResult({
+      isValid: !allErrors.length,
+      errors: allErrors,
+      output: stitchOutput(output ?? (getValues() as unknown as TOutput), results),
+    });
+  }
+
+  function defineValidationRequest(mutator: (result: TResult) => void) {
+    const requestValidation = withLatestCall(batchAsync(validate, SCHEMA_BATCH_MS), result => {
+      mutator(result);
+
+      return result;
+    });
+
+    return requestValidation;
+  }
+
+  function createValidationResult(result: Omit<AggregatorResult<TOutput>, 'mode' | 'type'>): TResult {
+    const base = {
+      output: result.output,
+      errors: result.errors,
+      isValid: result.isValid,
+    };
+
+    if (type === 'FORM') {
+      return {
+        type,
+        mode: schema ? 'schema' : 'aggregate',
+        ...base,
+      } as TResult;
+    }
+
+    return {
+      type: 'GROUP',
+      path: getPath?.() || '',
+      mode: schema ? 'schema' : 'aggregate',
+      ...base,
+    } as TResult;
+  }
+
+  function stitchOutput(base: TOutput, results: (ValidationResult | GroupValidationResult)[]): TOutput {
+    const all = cloneDeep(base);
+    // Make sure we start with groups first since it may override individual fields
+    const sorted = [...results].sort((a, b) => {
+      if (a.type === b.type) {
+        return 0;
+      }
+
+      return a.type === 'FIELD' ? 1 : -1;
+    });
+
+    for (const result of sorted) {
+      // Pathless fields will be dropped
+      if (!result.path) {
+        continue;
+      }
+
+      setInPath(all, result.path, result.output);
+    }
+
+    return all;
+  }
+
+  return {
+    validate,
+    onValidationDispatch,
+    defineValidationRequest,
+  };
+}
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 16c30fee..3698f563 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,34 +1,47 @@
 <template>
   <div class="flex flex-col">
-    <InputText label="deep" name="some.deep.path" />
-    <InputText label="arr" name="some.array.0.path" />
+    <InputText label="Email" name="email" type="email" :schema="defineSchema(z.string().email())" />
+    <InputText label="Full Name" name="fullName" />
 
-    <span data-testid="e2">{{ getError('some.array.0.path') }}</span>
+    <FormGroup name="address" label="Shipping Address" :schema="groupSchema">
+      <InputText label="Address Line 1" name="street" />
 
-    <pre>{{ getErrors() }}</pre>
+      <div class="grid grid-cols-3 gap-4">
+        <InputText label="City" name="city" />
+        <InputText label="State" name="state" />
+        <InputText label="Zip" name="zip" />
+      </div>
+    </FormGroup>
+
+    {{ values }}
+
+    <button @click="onSubmit">Submit</button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import InputText from '@/components/InputText.vue';
+import FormGroup from '@/components/FormGroup.vue';
 import { useForm } from '@formwerk/core';
 import { defineSchema } from '@formwerk/schema-zod';
 import { z } from 'zod';
 
-const { getError, isValid, getErrors } = useForm({
-  schema: defineSchema(
-    z.object({
-      some: z.object({
-        deep: z.object({
-          path: z.string().min(1, 'REQUIRED'),
-        }),
-        array: z.array(
-          z.object({
-            path: z.string().min(1, 'REQUIRED'),
-          }),
-        ),
-      }),
-    }),
-  ),
+const groupSchema = defineSchema(
+  z.object({
+    street: z
+      .string()
+      .min(1)
+      .transform(v => `${v} St.`),
+    city: z.string().min(1),
+    state: z.string().min(1),
+
+    zip: z.preprocess(v => Number(v), z.number().lte(1000).gte(100)),
+  }),
+);
+
+const { getErrors, values, handleSubmit } = useForm({});
+
+const onSubmit = handleSubmit(values => {
+  console.log(values);
 });
 </script>
diff --git a/packages/playground/src/components/FormGroup.vue b/packages/playground/src/components/FormGroup.vue
new file mode 100644
index 00000000..fc2e9d37
--- /dev/null
+++ b/packages/playground/src/components/FormGroup.vue
@@ -0,0 +1,24 @@
+<template>
+  <fieldset v-bind="groupProps" class="p-2 border border-gray-400 rounded-lg">
+    <legend v-bind="labelProps">{{ label }}</legend>
+
+    <slot :display-error="displayError" :get-error="getError" />
+
+    <!--    <pre class="bg-gray-600 text-white text-xs p-2.5 rounded-lg">Errors: {{getErrors()}}-->
+    <!--    </pre>-->
+
+    <!--    <div>values: {{ getValues()}}</div>-->
+    <!--    <div>touched: {{ isTouched }}</div>-->
+    <!--    <div>dirty: {{ isDirty }}</div>-->
+    <div>valid: {{ isValid }}</div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { FormGroupProps, useFormGroup } from '@formwerk/core';
+
+const props = defineProps<FormGroupProps>();
+
+const { labelProps, groupProps, getErrors, getError, displayError, getValues, isValid, isDirty, isTouched } =
+  useFormGroup(props);
+</script>
diff --git a/packages/schema-yup/src/index.spec.ts b/packages/schema-yup/src/index.spec.ts
index 15167f65..4582960a 100644
--- a/packages/schema-yup/src/index.spec.ts
+++ b/packages/schema-yup/src/index.spec.ts
@@ -1,4 +1,4 @@
-import { type Component, nextTick } from 'vue';
+import { type Component } from 'vue';
 import { fireEvent, render, screen } from '@testing-library/vue';
 import { useForm, useTextField } from '@formwerk/core';
 import { defineSchema } from '.';
@@ -129,8 +129,8 @@ describe('schema-yup', () => {
     `,
     });
 
-    await nextTick();
     await fireEvent.click(screen.getByText('Submit'));
+    await flush();
     expect(handler).not.toHaveBeenCalled();
     await fireEvent.update(screen.getByTestId('test'), 'test');
     await fireEvent.click(screen.getByText('Submit'));
diff --git a/packages/schema-zod/src/index.spec.ts b/packages/schema-zod/src/index.spec.ts
index 948bd833..33da3ff4 100644
--- a/packages/schema-zod/src/index.spec.ts
+++ b/packages/schema-zod/src/index.spec.ts
@@ -1,4 +1,4 @@
-import { type Component, nextTick } from 'vue';
+import { type Component } from 'vue';
 import { fireEvent, render, screen } from '@testing-library/vue';
 import { useForm, useTextField } from '@formwerk/core';
 import { defineSchema } from '.';
@@ -77,8 +77,8 @@ describe('schema-zod', () => {
     `,
     });
 
-    await nextTick();
     await fireEvent.click(screen.getByText('Submit'));
+    await flush();
     expect(handler).not.toHaveBeenCalled();
     await fireEvent.update(screen.getByTestId('test'), 'test');
     await fireEvent.click(screen.getByText('Submit'));
diff --git a/tsconfig.json b/tsconfig.json
index 65f84432..2be2dc61 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,6 @@
     "types": ["vitest/globals"],
     "typeRoots": ["node_modules/@types", "node_modules"]
   },
-  "include": ["packages/*/src", "packages/*/tests", "commitlint.config.ts"],
+  "include": ["packages/*/src", "packages/*/tests", "commitlint.config.ts", "global.d.ts"],
   "exclude": ["packages/playground"]
 }