diff --git a/packages/core/src/form/formContext.ts b/packages/core/src/form/formContext.ts
index ef176457..2f279423 100644
--- a/packages/core/src/form/formContext.ts
+++ b/packages/core/src/form/formContext.ts
@@ -1,6 +1,6 @@
-import { DisabledSchema, FormObject, Path, PathValue, TouchedSchema } from '../types';
-import { cloneDeep, merge } from '../utils/common';
-import { escapePath, getFromPath, isPathSet, setInPath, unsetPath as unsetInObject } from '../utils/path';
+import { Arrayable, DisabledSchema, FormObject, Path, PathValue, TouchedSchema, ValiditySchema } from '../types';
+import { cloneDeep, merge, normalizeArrayable } from '../utils/common';
+import { escapePath, findLeaf, getFromPath, isPathSet, setInPath, unsetPath as unsetInObject } from '../utils/path';
 import { FormSnapshot } from './formSnapshot';
 
 export interface FormContext<TForm extends FormObject = FormObject> {
@@ -18,6 +18,9 @@ export interface FormContext<TForm extends FormObject = FormObject> {
   setInitialValues: (newValues: Partial<TForm>, opts?: SetValueOptions) => void;
   setInitialTouched: (newTouched: Partial<TouchedSchema<TForm>>, opts?: SetValueOptions) => void;
   setFieldDisabled<TPath extends Path<TForm>>(path: TPath, value: boolean): void;
+  getFieldErrors<TPath extends Path<TForm>>(path: TPath): string[];
+  setFieldErrors<TPath extends Path<TForm>>(path: TPath, message: Arrayable<string>): void;
+  hasErrors: () => boolean;
   getValues: () => TForm;
   setValues: (newValues: Partial<TForm>, opts?: SetValueOptions) => void;
   revertValues: () => void;
@@ -33,6 +36,7 @@ export interface FormContextCreateOptions<TForm extends FormObject = FormObject>
   values: TForm;
   touched: TouchedSchema<TForm>;
   disabled: DisabledSchema<TForm>;
+  errors: ValiditySchema<TForm>;
   snapshots: {
     values: FormSnapshot<TForm>;
     touched: FormSnapshot<TouchedSchema<TForm>>;
@@ -43,6 +47,7 @@ export function createFormContext<TForm extends FormObject = FormObject>({
   id,
   values,
   disabled,
+  errors,
   touched,
   snapshots,
 }: FormContextCreateOptions<TForm>): FormContext<TForm> {
@@ -70,12 +75,14 @@ export function createFormContext<TForm extends FormObject = FormObject>({
     unsetInObject(values, path, true);
     unsetInObject(touched, path, true);
     unsetInObject(disabled, escapePath(path), true);
+    unsetInObject(errors, escapePath(path), true);
   }
 
   function unsetPath<TPath extends Path<TForm>>(path: TPath) {
     unsetInObject(values, path, false);
     unsetInObject(touched, path, false);
     unsetInObject(disabled, escapePath(path), false);
+    unsetInObject(errors, escapePath(path), false);
   }
 
   function getFieldInitialValue<TPath extends Path<TForm>>(path: TPath) {
@@ -94,6 +101,10 @@ export function createFormContext<TForm extends FormObject = FormObject>({
     setInPath(disabled, escapePath(path), value);
   }
 
+  function hasErrors() {
+    return !!findLeaf(errors, l => Array.isArray(l) && l.length > 0);
+  }
+
   function setInitialValues(newValues: Partial<TForm>, opts?: SetValueOptions) {
     if (opts?.mode === 'merge') {
       snapshots.values.initials.value = merge(cloneDeep(snapshots.values.initials.value), cloneDeep(newValues));
@@ -140,6 +151,14 @@ export function createFormContext<TForm extends FormObject = FormObject>({
     });
   }
 
+  function getFieldErrors<TPath extends Path<TForm>>(path: TPath) {
+    return [...(getFromPath<string[]>(errors, escapePath(path), []) || [])];
+  }
+
+  function setFieldErrors<TPath extends Path<TForm>>(path: TPath, message: Arrayable<string>) {
+    setInPath(errors, escapePath(path), message ? normalizeArrayable(message) : []);
+  }
+
   function setTouched(newTouched: Partial<TouchedSchema<TForm>>, opts?: SetValueOptions) {
     if (opts?.mode === 'merge') {
       merge(touched, newTouched);
@@ -182,5 +201,8 @@ export function createFormContext<TForm extends FormObject = FormObject>({
     setInitialTouched,
     getFieldOriginalValue,
     setFieldDisabled,
+    setFieldErrors,
+    getFieldErrors,
+    hasErrors,
   };
 }
diff --git a/packages/core/src/form/useErrorDisplay.spec.ts b/packages/core/src/form/useErrorDisplay.spec.ts
new file mode 100644
index 00000000..1a175186
--- /dev/null
+++ b/packages/core/src/form/useErrorDisplay.spec.ts
@@ -0,0 +1,39 @@
+import { renderSetup } from '@test-utils/index';
+import { useErrorDisplay } from './useErrorDisplay';
+import { useFormField } from './useFormField';
+
+test('displays field errors only if they are touched', async () => {
+  const { setErrors, isValid, errorMessage, displayError, setTouched } = await renderSetup(() => {
+    const field = useFormField({ initialValue: 'bar' });
+    const { displayError } = useErrorDisplay(field);
+
+    return { ...field, displayError };
+  });
+
+  expect(isValid.value).toBe(true);
+  expect(errorMessage.value).toBe('');
+  expect(displayError()).toBe('');
+
+  setErrors('error');
+  expect(errorMessage.value).toBe('error');
+  expect(displayError()).toBe('');
+  expect(isValid.value).toBe(false);
+
+  setTouched(true);
+  expect(displayError()).toBe('error');
+});
+
+test('controls display of custom messages as well', async () => {
+  const { isValid, displayError, setTouched } = await renderSetup(() => {
+    const field = useFormField({ initialValue: 'bar' });
+    const { displayError } = useErrorDisplay(field);
+
+    return { ...field, displayError };
+  });
+
+  expect(displayError('custom error')).toBe('');
+  expect(isValid.value).toBe(true);
+
+  setTouched(true);
+  expect(displayError('custom error')).toBe('custom error');
+});
diff --git a/packages/core/src/form/useErrorDisplay.ts b/packages/core/src/form/useErrorDisplay.ts
new file mode 100644
index 00000000..ce881c84
--- /dev/null
+++ b/packages/core/src/form/useErrorDisplay.ts
@@ -0,0 +1,11 @@
+import { FormField } from './useFormField';
+
+export function useErrorDisplay(field: FormField<any>) {
+  function displayError(msg?: string) {
+    const error = msg || field.errorMessage.value;
+
+    return field.isTouched.value ? error : '';
+  }
+
+  return { displayError };
+}
diff --git a/packages/core/src/form/useForm.spec.ts b/packages/core/src/form/useForm.spec.ts
index c34351e9..5291535e 100644
--- a/packages/core/src/form/useForm.spec.ts
+++ b/packages/core/src/form/useForm.spec.ts
@@ -1,7 +1,9 @@
 import { renderSetup } from '@test-utils/index';
 import { useForm } from './useForm';
 import { useFormField } from './useFormField';
-import { nextTick, ref } from 'vue';
+import { nextTick, Ref, ref } from 'vue';
+import { useInputValidity } from '../validation/useInputValidity';
+import { fireEvent, render, screen } from '@testing-library/vue';
 
 describe('form values', () => {
   test('it initializes form values', async () => {
@@ -309,3 +311,97 @@ describe('form dirty state', () => {
     expect(field.isDirty.value).toBe(false);
   });
 });
+
+describe('validation', () => {
+  function createInputComponent(inputRef: Ref<HTMLInputElement | undefined>) {
+    return {
+      setup: () => {
+        const field = useFormField({ path: 'test' });
+        useInputValidity({ inputRef, field });
+
+        return { input: inputRef, errorMessage: field.errorMessage };
+      },
+      template: `
+        <input ref="input" data-testid="input" required />
+        <span data-testid="err">{{ errorMessage }}</span>
+      `,
+    };
+  }
+
+  test('updates the form errors', async () => {
+    const input = ref<HTMLInputElement>();
+
+    await render({
+      components: { Child: createInputComponent(input) },
+      setup() {
+        const { getError } = useForm();
+
+        return { getError };
+      },
+      template: `
+      <form>
+        <Child />
+
+        <span data-testid="form-err">{{ getError('test') }}</span>
+      </form>
+    `,
+    });
+
+    await fireEvent.blur(screen.getByTestId('input'));
+    expect(screen.getByTestId('err').textContent).toBe('Constraints not satisfied');
+    expect(screen.getByTestId('form-err').textContent).toBe('Constraints not satisfied');
+  });
+
+  test('updates the form isValid', async () => {
+    const input = ref<HTMLInputElement>();
+
+    await render({
+      components: { Child: createInputComponent(input) },
+      setup() {
+        const { isValid } = useForm();
+
+        return { isValid };
+      },
+      template: `
+      <form>
+        <Child />
+
+        <span v-if="isValid">Form is valid</span>
+        <span v-else>Form is invalid</span>
+      </form>
+    `,
+    });
+
+    expect(screen.getByText('Form is valid')).toBeDefined();
+    await fireEvent.blur(screen.getByTestId('input'));
+    expect(screen.getByText('Form is invalid')).toBeDefined();
+  });
+
+  test('prevents submission if the form is not valid', async () => {
+    const input = ref<HTMLInputElement>();
+    const handler = vi.fn();
+
+    await render({
+      components: { Child: createInputComponent(input) },
+      setup() {
+        const { handleSubmit } = useForm();
+
+        return { onSubmit: handleSubmit(handler) };
+      },
+      template: `
+      <form @submit="onSubmit" novalidate>
+        <Child />
+
+        <button type="submit">Submit</button>
+      </form>
+    `,
+    });
+
+    await nextTick();
+    await fireEvent.click(screen.getByText('Submit'));
+    expect(handler).not.toHaveBeenCalled();
+    await fireEvent.change(screen.getByTestId('input'), { target: { value: 'test' } });
+    await fireEvent.click(screen.getByText('Submit'));
+    expect(handler).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/core/src/form/useForm.ts b/packages/core/src/form/useForm.ts
index b4fd16ec..06210ac5 100644
--- a/packages/core/src/form/useForm.ts
+++ b/packages/core/src/form/useForm.ts
@@ -1,6 +1,6 @@
 import { computed, InjectionKey, provide, reactive, readonly } from 'vue';
 import { cloneDeep, isEqual, useUniqId } from '../utils/common';
-import { FormObject, MaybeAsync, MaybeGetter, TouchedSchema, Path } from '../types';
+import { FormObject, MaybeAsync, MaybeGetter, TouchedSchema, DisabledSchema, ValiditySchema, Path } from '../types';
 import { createFormContext, FormContext } from './formContext';
 import { FormTransactionManager, useFormTransactions } from './useFormTransactions';
 import { useFormActions } from './useFormActions';
@@ -29,27 +29,33 @@ export function useForm<TForm extends FormObject = FormObject>(opts?: Partial<Fo
 
   const values = reactive(cloneDeep(valuesSnapshot.originals.value)) as TForm;
   const touched = reactive(cloneDeep(touchedSnapshot.originals.value)) as TouchedSchema<TForm>;
-  const disabled = {} as Partial<Record<Path<TForm>, boolean>>;
-
-  const isTouched = computed(() => {
-    return !!findLeaf(touched, l => l === true);
-  });
-
-  const isDirty = computed(() => {
-    return !isEqual(values, valuesSnapshot.originals.value);
-  });
+  const disabled = {} as DisabledSchema<TForm>;
+  const errors = reactive({}) as ValiditySchema<TForm>;
 
   const ctx = createFormContext({
     id: opts?.id || useUniqId('form'),
     values,
     touched,
     disabled,
+    errors,
     snapshots: {
       values: valuesSnapshot,
       touched: touchedSnapshot,
     },
   });
 
+  const isTouched = computed(() => {
+    return !!findLeaf(touched, l => l === true);
+  });
+
+  const isDirty = computed(() => {
+    return !isEqual(values, valuesSnapshot.originals.value);
+  });
+
+  const isValid = computed(() => {
+    return !ctx.hasErrors();
+  });
+
   function onAsyncInit(v: TForm) {
     ctx.setValues(v, { mode: 'merge' });
   }
@@ -57,6 +63,10 @@ export function useForm<TForm extends FormObject = FormObject>(opts?: Partial<Fo
   const transactionsManager = useFormTransactions(ctx);
   const { actions, onSubmitted, isSubmitting } = useFormActions(ctx, disabled);
 
+  function getError<TPath extends Path<TForm>>(path: TPath): string | undefined {
+    return ctx.getFieldErrors(path)[0];
+  }
+
   provide(FormKey, {
     ...ctx,
     ...transactionsManager,
@@ -69,11 +79,14 @@ export function useForm<TForm extends FormObject = FormObject>(opts?: Partial<Fo
     isSubmitting,
     isTouched,
     isDirty,
+    isValid,
     setFieldValue: ctx.setFieldValue,
     getFieldValue: ctx.getFieldValue,
     isFieldTouched: ctx.isFieldTouched,
     setFieldTouched: ctx.setFieldTouched,
+    setFieldErrors: ctx.setFieldErrors,
     setValues: ctx.setValues,
+    getError,
     ...actions,
   };
 }
diff --git a/packages/core/src/form/useFormActions.ts b/packages/core/src/form/useFormActions.ts
index f5d4d613..88aa0aa2 100644
--- a/packages/core/src/form/useFormActions.ts
+++ b/packages/core/src/form/useFormActions.ts
@@ -22,6 +22,14 @@ export function useFormActions<TForm extends FormObject = FormObject>(
       e.preventDefault();
       isSubmitting.value = true;
       await dispatchSubmit();
+
+      // Prevent submission if the form has errors
+      if (form.hasErrors()) {
+        isSubmitting.value = false;
+
+        return;
+      }
+
       // Clone the values to prevent mutation or reactive leaks
       const values = cloneDeep(form.getValues());
       const disabledPaths = Object.entries(disabled)
diff --git a/packages/core/src/form/useFormField.spec.ts b/packages/core/src/form/useFormField.spec.ts
index f4b9af98..aa808f22 100644
--- a/packages/core/src/form/useFormField.spec.ts
+++ b/packages/core/src/form/useFormField.spec.ts
@@ -99,3 +99,18 @@ test('formless fields maintain their own dirty state', async () => {
   setValue('bar');
   expect(isDirty.value).toBe(false);
 });
+
+test('formless fields maintain their own error state', async () => {
+  const { setErrors, isValid, errorMessage, errors } = await renderSetup(() => {
+    return useFormField({ initialValue: 'bar' });
+  });
+
+  expect(isValid.value).toBe(true);
+  expect(errorMessage.value).toBe('');
+  expect(errors.value).toEqual([]);
+  setErrors('error');
+
+  expect(isValid.value).toBe(false);
+  expect(errorMessage.value).toBe('error');
+  expect(errors.value).toEqual(['error']);
+});
diff --git a/packages/core/src/form/useFormField.ts b/packages/core/src/form/useFormField.ts
index 4e28c05e..52e79f6a 100644
--- a/packages/core/src/form/useFormField.ts
+++ b/packages/core/src/form/useFormField.ts
@@ -11,9 +11,9 @@ import {
   watch,
 } from 'vue';
 import { FormContextWithTransactions, FormKey } from './useForm';
-import { Getter } from '../types';
+import { Arrayable, Getter } from '../types';
 import { useSyncModel } from '../reactivity/useModelSync';
-import { cloneDeep, isEqual } from '../utils/common';
+import { cloneDeep, isEqual, normalizeArrayable } from '../utils/common';
 
 interface FormFieldOptions<TValue = unknown> {
   path: MaybeRefOrGetter<string | undefined> | undefined;
@@ -24,13 +24,24 @@ interface FormFieldOptions<TValue = unknown> {
   disabled: MaybeRefOrGetter<boolean | undefined>;
 }
 
-export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<TValue>>) {
+export type FormField<TValue> = {
+  fieldValue: Ref<TValue | undefined>;
+  isTouched: Ref<boolean>;
+  isDirty: Ref<boolean>;
+  isValid: Ref<boolean>;
+  errors: Ref<string[]>;
+  errorMessage: Ref<string>;
+  setValue: (value: TValue | undefined) => void;
+  setTouched: (touched: boolean) => void;
+  setErrors: (messages: Arrayable<string>) => void;
+};
+
+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 { isTouched, pathlessTouched, setTouched } = form
-    ? createFormTouchedRef(getPath, form)
-    : createTouchedRef(false);
+  const { isTouched, pathlessTouched, setTouched } = useFieldTouched(getPath, form);
+  const { errors, setErrors, isValid, errorMessage, pathlessValidity } = useFieldValidity(getPath, form);
 
   const isDirty = computed(() => {
     if (!form) {
@@ -53,12 +64,16 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     });
   }
 
-  const field = {
+  const field: FormField<TValue> = {
     fieldValue: readonly(fieldValue) as Ref<TValue | undefined>,
     isTouched: readonly(isTouched) as Ref<boolean>,
     isDirty,
+    isValid,
+    errors,
+    errorMessage,
     setValue,
     setTouched,
+    setErrors,
   };
 
   if (!form) {
@@ -109,6 +124,7 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
           value: cloneDeep(oldPath ? tf.getFieldValue(oldPath) : pathlessValue.value),
           touched: oldPath ? tf.isFieldTouched(oldPath) : pathlessTouched.value,
           disabled: toValue(opts?.disabled) ?? false,
+          errors: [...(oldPath ? tf.getFieldErrors(oldPath) : pathlessValidity.errors.value)],
         };
       });
     }
@@ -131,15 +147,31 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
   return field;
 }
 
+function useFieldValidity(getPath: Getter<string | undefined>, form?: FormContextWithTransactions | null) {
+  const validity = form ? createFormValidityRef(getPath, form) : createLocalValidity();
+  const errorMessage = computed(() => validity.errors.value[0] ?? '');
+  const isValid = computed(() => validity.errors.value.length === 0);
+
+  return {
+    ...validity,
+    isValid,
+    errorMessage,
+  };
+}
+
 function useFieldValue<TValue = unknown>(
   getPath: Getter<string | undefined>,
   form?: FormContextWithTransactions | null,
   initialValue?: TValue,
 ) {
-  return form ? createFormValueRef<TValue>(getPath, form, initialValue) : createValueRef<TValue>(initialValue);
+  return form ? createFormValueRef<TValue>(getPath, form, initialValue) : createLocalValueRef<TValue>(initialValue);
+}
+
+function useFieldTouched(getPath: Getter<string | undefined>, form?: FormContextWithTransactions | null) {
+  return form ? createFormTouchedRef(getPath, form) : createLocalTouchedRef(false);
 }
 
-function createTouchedRef(initialTouched?: boolean) {
+function createLocalTouchedRef(initialTouched?: boolean) {
   const isTouched = shallowRef(initialTouched ?? false);
 
   return {
@@ -156,7 +188,7 @@ function createFormTouchedRef(getPath: Getter<string | undefined>, form: FormCon
   const isTouched = computed(() => {
     const path = getPath();
 
-    return path ? form.isFieldTouched(path) : false;
+    return path ? form.isFieldTouched(path) : pathlessTouched.value;
   }) as Ref<boolean>;
 
   function setTouched(value: boolean) {
@@ -204,7 +236,7 @@ function createFormValueRef<TValue = unknown>(
   };
 }
 
-function createValueRef<TValue = unknown>(initialValue?: TValue) {
+function createLocalValueRef<TValue = unknown>(initialValue?: TValue) {
   const fieldValue = shallowRef(toValue(initialValue ?? undefined)) as Ref<TValue | undefined>;
 
   return {
@@ -233,12 +265,52 @@ function initFormPathIfNecessary(
 
   // If form does have a path set and the value is different from the initial value, set it.
   nextTick(() => {
-    form.transaction((_, { INIT_PATH }) => ({
+    form.transaction((tf, { INIT_PATH }) => ({
       kind: INIT_PATH,
       path,
       value: initialValue ?? form.getFieldInitialValue(path),
       touched: initialTouched,
       disabled,
+      errors: [...tf.getFieldErrors(path)],
     }));
   });
 }
+
+function createFormValidityRef(getPath: Getter<string | undefined>, form: FormContextWithTransactions) {
+  const pathlessValidity = createLocalValidity();
+  const errors = computed(() => {
+    const path = getPath();
+
+    return path ? form.getFieldErrors(path) : pathlessValidity.errors.value;
+  }) as Ref<string[]>;
+
+  function setErrors(messages: Arrayable<string>) {
+    pathlessValidity.setErrors(messages);
+    const path = getPath();
+    if (path) {
+      form.setFieldErrors(path, messages);
+    }
+  }
+
+  return {
+    pathlessValidity,
+    errors,
+    setErrors,
+  };
+}
+
+function createLocalValidity() {
+  const errors = shallowRef<string[]>([]);
+
+  const api = {
+    errors,
+    setErrors(messages: Arrayable<string>) {
+      errors.value = messages ? normalizeArrayable(messages) : [];
+    },
+  };
+
+  return {
+    pathlessValidity: api,
+    ...api,
+  };
+}
diff --git a/packages/core/src/form/useFormTransactions.ts b/packages/core/src/form/useFormTransactions.ts
index 8b50f7c7..8e94d465 100644
--- a/packages/core/src/form/useFormTransactions.ts
+++ b/packages/core/src/form/useFormTransactions.ts
@@ -8,6 +8,7 @@ interface SetPathStateTransaction<TForm extends FormObject> {
   value: PathValue<TForm, Path<TForm>>;
   touched: boolean;
   disabled: boolean;
+  errors: string[];
 }
 
 interface UnsetPathStateTransaction<TForm extends FormObject> {
@@ -26,6 +27,7 @@ interface InitializeFieldTransaction<TForm extends FormObject> {
   value: PathValue<TForm, Path<TForm>>;
   touched: boolean;
   disabled: boolean;
+  errors: string[];
 }
 
 export type FormTransaction<TForm extends FormObject> =
@@ -47,7 +49,10 @@ const TransactionKind = {
 export interface FormTransactionManager<TForm extends FormObject> {
   transaction(
     tr: (
-      formCtx: Pick<FormContext<TForm>, 'getValues' | 'getFieldValue' | 'isFieldSet' | 'isFieldTouched'>,
+      formCtx: Pick<
+        FormContext<TForm>,
+        'getValues' | 'getFieldValue' | 'isFieldSet' | 'isFieldTouched' | 'getFieldErrors'
+      >,
       codes: typeof TransactionKind,
     ) => FormTransaction<TForm> | null,
   ): void;
@@ -88,6 +93,7 @@ export function useFormTransactions<TForm extends FormObject>(form: FormContext<
         form.setFieldValue(tr.path, tr.value);
         form.setFieldTouched(tr.path, tr.touched);
         form.setFieldDisabled(tr.path, tr.disabled);
+        form.setFieldErrors(tr.path, tr.errors);
         continue;
       }
 
@@ -107,6 +113,7 @@ export function useFormTransactions<TForm extends FormObject>(form: FormContext<
         form.setFieldDisabled(tr.path, tr.disabled);
         form.setFieldTouched(tr.path, tr.touched);
         form.unsetInitialValue(tr.path);
+        form.setFieldErrors(tr.path, tr.errors);
         continue;
       }
     }
diff --git a/packages/core/src/types/forms.ts b/packages/core/src/types/forms.ts
index 80c2d488..0b7f8c8d 100644
--- a/packages/core/src/types/forms.ts
+++ b/packages/core/src/types/forms.ts
@@ -5,3 +5,5 @@ import { Path } from './paths';
 export type TouchedSchema<TForm extends FormObject> = Simplify<Schema<TForm, boolean>>;
 
 export type DisabledSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, boolean>>;
+
+export type ValiditySchema<TForm extends FormObject> = Partial<Record<Path<TForm>, string[]>>;
diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts
index 1c71c307..a7f279d9 100644
--- a/packages/core/src/useCheckbox/useCheckbox.ts
+++ b/packages/core/src/useCheckbox/useCheckbox.ts
@@ -100,7 +100,7 @@ export function useCheckbox<TValue = string>(
       return {
         ...baseHandlers,
         onInvalid() {
-          group?.setValidity(inputRef.value?.validationMessage ?? '');
+          group?.setErrors(inputRef.value?.validationMessage ?? '');
         },
       };
     }
@@ -137,7 +137,7 @@ export function useCheckbox<TValue = string>(
       focus();
       group?.toggleValue(getTrueValue(), force);
       nextTick(() => {
-        group?.setValidity(inputRef.value?.validationMessage ?? '');
+        group?.setErrors(inputRef.value?.validationMessage ?? '');
       });
 
       return true;
diff --git a/packages/core/src/useCheckbox/useCheckboxGroup.ts b/packages/core/src/useCheckbox/useCheckboxGroup.ts
index 08c2b3c6..6bd0906d 100644
--- a/packages/core/src/useCheckbox/useCheckboxGroup.ts
+++ b/packages/core/src/useCheckbox/useCheckboxGroup.ts
@@ -8,11 +8,13 @@ import {
   AriaValidatableProps,
   Direction,
   Reactivify,
+  Arrayable,
 } from '../types';
 import { useUniqId, createDescribedByProps, normalizeProps, isEqual } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
 import { useFormField } from '../form/useFormField';
 import { FieldTypePrefixes } from '../constants';
+import { useErrorDisplay } from '../form/useErrorDisplay';
 
 export type CheckboxGroupValue<TCheckbox> = TCheckbox[];
 
@@ -28,7 +30,7 @@ export interface CheckboxGroupContext<TCheckbox> {
   readonly modelValue: CheckboxGroupValue<TCheckbox> | undefined;
   readonly isTouched: boolean;
 
-  setValidity(message: string): void;
+  setErrors(message: Arrayable<string>): void;
   setValue(value: CheckboxGroupValue<TCheckbox>): void;
   hasValue(value: TCheckbox): boolean;
   toggleValue(value: TCheckbox, force?: boolean): void;
@@ -74,12 +76,14 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
     label: props.label,
   });
 
-  const { fieldValue, setValue, isTouched, setTouched } = useFormField({
+  const field = useFormField({
     path: props.name,
     initialValue: toValue(props.modelValue),
   });
 
-  const { setValidity, errorMessage } = useInputValidity();
+  const { displayError } = useErrorDisplay(field);
+  const { validityDetails } = useInputValidity({ field });
+  const { fieldValue, setValue, isTouched, setTouched, errorMessage } = field;
   const { describedBy, descriptionProps, errorMessageProps } = createDescribedByProps({
     inputId: groupId,
     errorMessage,
@@ -152,7 +156,7 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
     groupState,
     modelValue: fieldValue,
     isTouched,
-    setValidity,
+    setErrors: field.setErrors,
     setValue,
     useCheckboxRegistration,
     toggleValue,
@@ -171,5 +175,13 @@ export function useCheckboxGroup<TCheckbox>(_props: Reactivify<CheckboxGroupProp
     checkboxGroupProps,
     errorMessage,
     isTouched,
+    errors: field.errors,
+    isValid: field.isValid,
+    validityDetails,
+
+    setValue,
+    setTouched,
+    setErrors: field.setErrors,
+    displayError,
   };
 }
diff --git a/packages/core/src/useNumberField/index.ts b/packages/core/src/useNumberField/index.ts
index 699dbeaf..dd925368 100644
--- a/packages/core/src/useNumberField/index.ts
+++ b/packages/core/src/useNumberField/index.ts
@@ -23,6 +23,7 @@ import { useSpinButton } from '../useSpinButton';
 import { useLocale } from '../i18n/useLocale';
 import { useFormField } from '../form/useFormField';
 import { FieldTypePrefixes } from '../constants';
+import { useErrorDisplay } from '../form/useErrorDisplay';
 
 export interface NumberInputDOMAttributes {
   name?: string;
@@ -67,15 +68,17 @@ export function useNumberField(
   const props = normalizeProps(_props);
   const inputId = useUniqId(FieldTypePrefixes.NumberField);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
-  const { errorMessage, validityDetails, isInvalid } = useInputValidity(inputRef);
   const { locale } = useLocale();
   const parser = useNumberParser(() => toValue(props.locale) ?? locale.value, props.formatOptions);
-  const { fieldValue, setValue, setTouched, isTouched } = useFormField<number>({
+  const field = useFormField<number>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
   });
 
+  const { validityDetails } = useInputValidity({ inputRef, field });
+  const { displayError } = useErrorDisplay(field);
+  const { fieldValue, setValue, setTouched, isTouched, errorMessage } = field;
   const formattedText = computed<string>(() => {
     if (Number.isNaN(fieldValue.value) || isEmpty(fieldValue.value)) {
       return '';
@@ -191,11 +194,17 @@ export function useNumberField(
     errorMessageProps,
     descriptionProps,
     validityDetails,
-    isInvalid,
+    isValid: field.isValid,
     incrementButtonProps,
     decrementButtonProps,
     isTouched,
+    errors: field.errors,
+
+    setValue,
     increment,
     decrement,
+    setTouched,
+    setErrors: field.setErrors,
+    displayError,
   };
 }
diff --git a/packages/core/src/useRadio/useRadio.ts b/packages/core/src/useRadio/useRadio.ts
index ee00bcf7..f8536a5c 100644
--- a/packages/core/src/useRadio/useRadio.ts
+++ b/packages/core/src/useRadio/useRadio.ts
@@ -69,10 +69,10 @@ export function useRadio<TValue = string>(
       return {
         ...baseHandlers,
         onChange() {
-          group?.setValidity(inputRef.value?.validationMessage ?? '');
+          group?.setErrors(inputRef.value?.validationMessage ?? '');
         },
         onInvalid() {
-          group?.setValidity(inputRef.value?.validationMessage ?? '');
+          group?.setErrors(inputRef.value?.validationMessage ?? '');
         },
       };
     }
@@ -106,7 +106,7 @@ export function useRadio<TValue = string>(
       group?.setValue(toValue(props.value) as TValue);
       focus();
       nextTick(() => {
-        group?.setValidity(inputRef.value?.validationMessage ?? '');
+        group?.setErrors(inputRef.value?.validationMessage ?? '');
       });
 
       return true;
diff --git a/packages/core/src/useRadio/useRadioGroup.ts b/packages/core/src/useRadio/useRadioGroup.ts
index 0dd35330..bd89a3df 100644
--- a/packages/core/src/useRadio/useRadioGroup.ts
+++ b/packages/core/src/useRadio/useRadioGroup.ts
@@ -8,11 +8,13 @@ import {
   AriaValidatableProps,
   Direction,
   Reactivify,
+  Arrayable,
 } from '../types';
 import { useUniqId, createDescribedByProps, getNextCycleArrIdx, normalizeProps, isEmpty } from '../utils/common';
 import { useLocale } from '../i18n/useLocale';
 import { useFormField } from '../form/useFormField';
 import { FieldTypePrefixes } from '../constants';
+import { useErrorDisplay } from '../form/useErrorDisplay';
 
 export interface RadioGroupContext<TValue> {
   name: string;
@@ -21,7 +23,7 @@ export interface RadioGroupContext<TValue> {
   required: boolean;
 
   readonly modelValue: TValue | undefined;
-  setValidity(message: string): void;
+  setErrors(message: Arrayable<string>): void;
   setValue(value: TValue): void;
   setTouched(touched: boolean): void;
   useRadioRegistration(radio: RadioItemContext): { canReceiveFocus(): boolean };
@@ -83,13 +85,16 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
     label: props.label,
   });
 
-  const { fieldValue, setValue, isTouched, setTouched } = useFormField<TValue>({
+  const field = useFormField<TValue>({
     path: props.name,
     initialValue: toValue(props.modelValue) as TValue,
     disabled: props.disabled,
   });
 
-  const { setValidity, errorMessage } = useInputValidity();
+  const { validityDetails } = useInputValidity({ field });
+  const { displayError } = useErrorDisplay(field);
+  const { fieldValue, setValue, isTouched, setTouched, errorMessage, errors } = field;
+
   const { describedBy, descriptionProps, errorMessageProps } = createDescribedByProps({
     inputId: groupId,
     errorMessage,
@@ -184,7 +189,7 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
     readonly: computed(() => toValue(props.readonly) ?? false),
     required: computed(() => toValue(props.required) ?? false),
     modelValue: fieldValue,
-    setValidity,
+    setErrors: field.setErrors,
     setValue,
     setTouched,
     useRadioRegistration,
@@ -200,5 +205,12 @@ export function useRadioGroup<TValue = string>(_props: Reactivify<RadioGroupProp
     radioGroupProps,
     errorMessage,
     isTouched,
+    errors,
+    validityDetails,
+
+    setValue,
+    setTouched,
+    setErrors: field.setErrors,
+    displayError,
   };
 }
diff --git a/packages/core/src/useSearchField/index.ts b/packages/core/src/useSearchField/index.ts
index cd175c6c..257210a3 100644
--- a/packages/core/src/useSearchField/index.ts
+++ b/packages/core/src/useSearchField/index.ts
@@ -13,6 +13,7 @@ import { useInputValidity } from '../validation/useInputValidity';
 import { useLabel } from '../a11y/useLabel';
 import { useFormField } from '../form/useFormField';
 import { FieldTypePrefixes } from '../constants';
+import { useErrorDisplay } from '../form/useErrorDisplay';
 
 export interface SearchInputDOMAttributes extends TextInputBaseAttributes {
   type?: 'search';
@@ -50,14 +51,16 @@ export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit'>,
   const props = normalizeProps(_props, ['onSubmit']);
   const inputId = useUniqId(FieldTypePrefixes.SearchField);
   const inputRef = elementRef || ref<HTMLInputElement>();
-
-  const { errorMessage, updateValidity, validityDetails, isInvalid } = useInputValidity(inputRef);
-  const { fieldValue, setValue, isTouched, setTouched } = useFormField<string | undefined>({
+  const field = useFormField<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
   });
 
+  const { validityDetails, updateValidity } = useInputValidity({ inputRef, field });
+  const { displayError } = useErrorDisplay(field);
+  const { fieldValue, setValue, isTouched, setTouched, errorMessage, isValid, errors } = field;
+
   const { labelProps, labelledByProps } = useLabel({
     for: inputId,
     label: props.label,
@@ -102,7 +105,7 @@ export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit'>,
       if (e.key === 'Enter' && !inputRef.value?.form && props.onSubmit) {
         e.preventDefault();
         setTouched(true);
-        if (!isInvalid.value) {
+        if (isValid.value) {
           props.onSubmit(fieldValue.value || '');
         }
       }
@@ -138,7 +141,13 @@ export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit'>,
     descriptionProps,
     clearBtnProps,
     validityDetails,
-    isInvalid,
+    isValid,
     isTouched,
+    errors,
+
+    setErrors: field.setErrors,
+    setValue: field.setValue,
+    setTouched: field.setTouched,
+    displayError,
   };
 }
diff --git a/packages/core/src/useTextField/index.ts b/packages/core/src/useTextField/index.ts
index afcd5652..56163051 100644
--- a/packages/core/src/useTextField/index.ts
+++ b/packages/core/src/useTextField/index.ts
@@ -13,6 +13,7 @@ import { useInputValidity } from '../validation/useInputValidity';
 import { useLabel } from '../a11y/useLabel';
 import { useFormField } from '../form/useFormField';
 import { FieldTypePrefixes } from '../constants';
+import { useErrorDisplay } from '../form/useErrorDisplay';
 
 export type TextInputDOMType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
@@ -55,13 +56,15 @@ export function useTextField(
   const props = normalizeProps(_props);
   const inputId = useUniqId(FieldTypePrefixes.TextField);
   const inputRef = elementRef || shallowRef<HTMLInputElement>();
-  const { errorMessage, validityDetails, isInvalid } = useInputValidity(inputRef);
-  const { fieldValue, setValue, isTouched, setTouched } = useFormField<string | undefined>({
+  const field = useFormField<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue),
     disabled: props.disabled,
   });
 
+  const { validityDetails } = useInputValidity({ inputRef, field });
+  const { displayError } = useErrorDisplay(field);
+  const { fieldValue, setValue, isTouched, setTouched, errorMessage, isValid, errors, setErrors } = field;
   const { labelProps, labelledByProps } = useLabel({
     for: inputId,
     label: props.label,
@@ -114,7 +117,13 @@ export function useTextField(
     errorMessageProps,
     descriptionProps,
     validityDetails,
-    isInvalid,
     isTouched,
+    isValid,
+    errors,
+
+    setErrors,
+    setValue,
+    setTouched,
+    displayError,
   };
 }
diff --git a/packages/core/src/utils/common.ts b/packages/core/src/utils/common.ts
index 66ac50ec..529e8d77 100644
--- a/packages/core/src/utils/common.ts
+++ b/packages/core/src/utils/common.ts
@@ -129,7 +129,7 @@ export function isEmpty(value: unknown): value is null | undefined | '' {
 export const isSSR = typeof window === 'undefined';
 
 export function normalizeArrayable<T>(value: Arrayable<T>): T[] {
-  return Array.isArray(value) ? value : [value];
+  return Array.isArray(value) ? [...value] : [value];
 }
 
 export const isObject = (obj: unknown): obj is Record<string, unknown> =>
diff --git a/packages/core/src/validation/useInputValidity.spec.ts b/packages/core/src/validation/useInputValidity.spec.ts
index faf9abdd..68443a60 100644
--- a/packages/core/src/validation/useInputValidity.spec.ts
+++ b/packages/core/src/validation/useInputValidity.spec.ts
@@ -1,15 +1,17 @@
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useInputValidity } from './useInputValidity';
 import { fireEvent, render, screen } from '@testing-library/vue';
+import { FormField, useFormField } from '../form';
 
 test('updates the validity state on blur events', async () => {
   const input = ref<HTMLInputElement>();
 
   await render({
     setup: () => {
-      const { errorMessage } = useInputValidity(input);
+      const field = useFormField();
+      useInputValidity({ inputRef: input, field });
 
-      return { input, errorMessage };
+      return { input, errorMessage: field.errorMessage };
     },
     template: `
       <form>
@@ -28,9 +30,10 @@ test('updates the validity state on change events', async () => {
 
   await render({
     setup: () => {
-      const { errorMessage } = useInputValidity(input);
+      const field = useFormField();
+      useInputValidity({ inputRef: input, field });
 
-      return { input, errorMessage };
+      return { input, errorMessage: field.errorMessage };
     },
     template: `
       <form>
@@ -51,9 +54,10 @@ test('updates the validity on specified events', async () => {
 
   await render({
     setup: () => {
-      const { errorMessage } = useInputValidity(input, { events: ['input'] });
+      const field = useFormField();
+      useInputValidity({ inputRef: input, field, events: ['input'] });
 
-      return { input, errorMessage };
+      return { input, errorMessage: field.errorMessage };
     },
     template: `
       <form>
@@ -68,3 +72,27 @@ test('updates the validity on specified events', async () => {
   await fireEvent.input(screen.getByTestId('input'), { target: { value: 'test' } });
   expect(screen.getByTestId('err').textContent).toBe('');
 });
+
+test('updates the input native validity with custom validity errors', async () => {
+  const input = ref<HTMLInputElement>();
+  let field!: FormField<any>;
+  await render({
+    setup: () => {
+      field = useFormField();
+      useInputValidity({ inputRef: input, field, events: ['input'] });
+
+      return { input, errorMessage: field.errorMessage };
+    },
+    template: `
+      <form>
+        <input ref="input" data-testid="input" />
+        <span data-testid="err">{{ errorMessage }}</span>
+      </form>
+    `,
+  });
+
+  field.setErrors('Custom error');
+  await nextTick();
+  expect(screen.getByTestId('err').textContent).toBe('Custom error');
+  expect(input.value?.validationMessage).toBe('Custom error');
+});
diff --git a/packages/core/src/validation/useInputValidity.ts b/packages/core/src/validation/useInputValidity.ts
index 7cb590f6..1b708ae2 100644
--- a/packages/core/src/validation/useInputValidity.ts
+++ b/packages/core/src/validation/useInputValidity.ts
@@ -1,37 +1,51 @@
-import { Ref, computed, nextTick, ref, shallowRef } from 'vue';
+import { Ref, inject, nextTick, onMounted, shallowRef, watch } from 'vue';
 import { useEventListener } from '../helpers/useEventListener';
+import { FormField, FormKey } from '../form';
 
 interface InputValidityOptions {
+  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement | undefined>;
+  field: FormField<any>;
   events?: string[];
 }
 
-export function useInputValidity(
-  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement | undefined>,
-  opts?: InputValidityOptions,
-) {
-  const errorMessage = ref<string>();
+export function useInputValidity(opts: InputValidityOptions) {
+  const { setErrors, errorMessage } = opts.field;
   const validityDetails = shallowRef<ValidityState>();
-  const isInvalid = computed(() => !!errorMessage.value);
+  const form = inject(FormKey, null);
 
-  function setValidity(message: string) {
-    errorMessage.value = message;
-    inputRef?.value?.setCustomValidity(message);
-    validityDetails.value = inputRef?.value?.validity;
+  function updateValiditySync() {
+    validityDetails.value = opts.inputRef?.value?.validity;
+    // TODO: Only do that if native field/validation is enabled
+    setErrors(opts.inputRef?.value?.validationMessage || []);
   }
 
   async function updateValidity() {
     await nextTick();
-    errorMessage.value = inputRef?.value?.validationMessage;
-    validityDetails.value = inputRef?.value?.validity;
+    updateValiditySync();
   }
 
-  useEventListener(inputRef, opts?.events || ['invalid', 'change', 'blur'], updateValidity);
+  useEventListener(opts.inputRef, opts?.events || ['invalid', 'change', 'blur'], updateValidity);
+
+  form?.onSubmitted(updateValiditySync);
+
+  if (opts.inputRef) {
+    watch(errorMessage, msg => {
+      const inputMsg = opts.inputRef?.value?.validationMessage;
+      if (inputMsg !== msg) {
+        opts.inputRef?.value?.setCustomValidity(msg || '');
+      }
+    });
+  }
+
+  /**
+   * Validity is always updated on mount.
+   */
+  onMounted(() => {
+    nextTick(updateValidity);
+  });
 
   return {
-    errorMessage,
     validityDetails,
-    isInvalid,
-    setValidity,
     updateValidity,
   };
 }
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 32851d13..b221d205 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex gap-4 relative">
-    <form class="w-full">
+    <form class="w-full" @submit="onSubmit" novalidate>
       <div v-for="(field, idx) in fields" :key="field.id" class="flex items-center">
-        <InputText :name="`field[${idx}]`" :label="`Field ${idx}`" :disabled="values.field?.[idx] === 'hello'" />
+        <InputText :name="`field.${idx}`" :label="`Field ${idx}`" required />
 
         <button type="button" class="bg-red-500 rounded text-white p-2" @click="fields.splice(idx, 1)">X</button>
       </div>
@@ -11,7 +11,10 @@
       <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="swap">Swap</button>
       <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="reverse">Reverse</button>
 
+      {{ isValid }}
       <!-- <InputSearch name="search" label="Search" :min-length="10" @submit="onSearchSubmit" /> -->
+
+      <button type="submit" class="bg-blue-700 text-white rounded p-1">Submit</button>
     </form>
 
     <div class="w-1/3 relative">
@@ -25,7 +28,7 @@ import { ref } from 'vue';
 import InputText from '@/components/InputText.vue';
 import { useForm } from '@formwerk/core';
 
-const { values } = useForm({
+const { values, isValid, handleSubmit } = useForm({
   // initialValues: getInitials,
 });
 
@@ -43,4 +46,8 @@ function swap() {
 function reverse() {
   fields.value = [...fields.value].reverse();
 }
+
+const onSubmit = handleSubmit(values => {
+  console.log(values);
+});
 </script>
diff --git a/packages/playground/src/components/InputText.vue b/packages/playground/src/components/InputText.vue
index 453c4967..8697ec92 100644
--- a/packages/playground/src/components/InputText.vue
+++ b/packages/playground/src/components/InputText.vue
@@ -3,7 +3,7 @@ import { TextFieldProps, useTextField } from '@formwerk/core';
 
 const props = defineProps<TextFieldProps>();
 
-const { inputProps, labelProps, errorMessage, errorMessageProps, isTouched } = useTextField(props);
+const { inputProps, labelProps, errorMessageProps, isTouched, displayError } = useTextField(props);
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const { inputProps, labelProps, errorMessage, errorMessageProps, isTouched } = u
     <input v-bind="inputProps" />
 
     <span v-bind="errorMessageProps" class="error-message">
-      {{ errorMessage }}
+      {{ displayError() }}
     </span>
   </div>
 </template>