diff --git a/components/o3-form/src/css/components/error-summary.css b/components/o3-form/src/css/components/error-summary.css
index 9828e1cb6b..5b060711f9 100644
--- a/components/o3-form/src/css/components/error-summary.css
+++ b/components/o3-form/src/css/components/error-summary.css
@@ -28,7 +28,7 @@
 		}
 	}
 
-	.o3-forms__error-summary__list {
+	.o3-form__error-summary__list {
 		list-style-type: none;
 		padding-left: 0;
 		margin-top: 0;
diff --git a/components/o3-form/src/js/validation.js b/components/o3-form/src/js/validation.js
new file mode 100644
index 0000000000..5ce25b5c51
--- /dev/null
+++ b/components/o3-form/src/js/validation.js
@@ -0,0 +1,465 @@
+/**
+ * Options to configure validation behaviour.
+ *
+ * @typedef {Object} O3ValidationOptions
+ * @property {boolean} [useBrowserReport=false] When true, call `form.reportValidity()` after an invalid submit (do not combine with `preventSubmit=true`).
+ * @property {boolean} [errorSummary=true] Whether to create/update an error summary element.
+ * @property {Object.<string,string>} [customMessages] Map of field id or name to a custom error message override.
+ * @property {boolean} [preventSubmit=true] Prevent form submission while invalid.
+ * @property {boolean} [focusFirstInvalid=true] Focus the first invalid control (or summary heading) after validation.
+ * @property {(formEl: HTMLFormElement) => Promise<FieldError[]>} [asyncValidate] Optional future hook for asynchronous validation. (Reserved; currently ignored.)
+ */
+
+/**
+ * FieldError represents a single invalid field.
+ * Mirrors exported TS FieldError type.
+ *
+ * @typedef {Object} FieldError
+ * @property {string} id Element id (may be blank if missing; summary links omitted if so).
+ * @property {string} fieldName Human friendly label text.
+ * @property {string} message Validation message.
+ * @property {('native'|'custom')} [source] Origin of message (native browser vs custom override).
+ */
+
+const SUMMARY_CLASS = 'o3-form__error-summary';
+const ERROR_INPUT_CLASS = 'o3-form-text-input--error';
+const FORM_FEEDBACK_ERROR_CLASS = 'o3-form-feedback__error';
+const FORM_FIELD_CLASS = 'o3-form-field';
+
+/** Maintain internal state per form element */
+const formState = new WeakMap();
+
+/**
+ * Initialise validation on a form element or selector.
+ *
+ * @param {string|HTMLFormElement} formOrSelector A form element or a selector resolving to one.
+ * @param {O3ValidationOptions} [options] Validation configuration overrides.
+ * @returns {HTMLFormElement|null} The initialised form element.
+ */
+function initO3FormValidation(formOrSelector, options = {}) {
+	const formElement =
+		formOrSelector instanceof HTMLFormElement
+			? formOrSelector
+			: document.querySelector(formOrSelector);
+
+	if (!formElement || !(formElement instanceof HTMLFormElement)) {
+		throw new Error(
+			'initO3FormValidation must be passed a form element or selector resolving to a form.'
+		);
+	}
+	const validationOptions = Object.assign(
+		{
+			useBrowserReport: false,
+			errorSummary: true,
+			customMessages: undefined,
+			preventSubmit: true,
+			focusFirstInvalid: true,
+		},
+		options
+	);
+
+	if (validationOptions.useBrowserReport && validationOptions.preventSubmit) {
+		throw new Error('Cannot enable both useBrowserReport and preventSubmit.');
+	}
+
+	if (formState.has(formElement)) return formElement; // already initialised
+
+	const state = {validationOptions, isSubmitAttempted: false, elementsPreviouslyFocussed: []}; // future: may hold cached lastErrors etc.
+	formState.set(formElement, state);
+
+	const progressiveHandler = event => {
+		const current = formState.get(formElement);
+		if (!current) return;
+		const errors = collectInvalidFields(event.currentTarget, validationOptions);
+
+		const focussedErrors = current.isSubmitAttempted ? errors : errors.filter((error) => current.elementsPreviouslyFocussed.includes(error.id));
+
+		applyInlineFeedback(formElement, focussedErrors);
+	};
+
+	formElement.addEventListener(
+		'invalid',
+		event => {
+			// suppress native tooltip when using custom summary
+			const current = formState.get(formElement);
+			if (!current) return;
+			if (current.isSubmitAttempted) {
+				const errors = collectInvalidFields(formElement, validationOptions);
+				applyInlineFeedback(formElement, errors);
+				createErrorSummary(formElement, errors, validationOptions);
+				if (current.validationOptions.errorSummary) {
+					event.preventDefault();
+				}
+				current.isSubmitAttempted = false;
+			}
+		},
+		true
+	);
+
+	formElement.addEventListener('submit', (event) => {
+		const current = formState.get(formElement);
+		current.isSubmitAttempted = true;
+
+		const ok = validateAndReRender(formElement, validationOptions);
+
+		if (!ok && validationOptions.preventSubmit) event.preventDefault();
+	});
+
+	formElement.addEventListener('pointerdown', event => {
+		const current = formState.get(formElement);
+		const target = event.target.closest('button[type="submit"], input[type="submit"]');
+
+		const isSubmit =
+			target instanceof HTMLButtonElement
+				? target.type === 'submit'
+				: target instanceof HTMLInputElement && target.type === 'submit';
+
+		if (!isSubmit) return;
+
+		if (!current) return;
+		const {validationOptions} = current;
+		current.isSubmitAttempted = true;
+
+		for (const fieldElement of formElement.elements) {
+			current.elementsPreviouslyFocussed.push(fieldElement.id);
+		}
+
+		const ok = validateAndReRender(formElement, validationOptions);
+
+		if (!ok && validationOptions.preventSubmit) event.preventDefault();
+	}, true);
+
+	formElement.addEventListener('input', progressiveHandler, true);
+	formElement.addEventListener('blur', progressiveHandler, true);
+
+	const fieldElements = Array.from(formElement.elements);
+
+	for (const fieldElement of fieldElements) {
+		if (!isFormFieldElement(fieldElement)) continue;
+
+		fieldElement.addEventListener('focusin', () => {
+			const current = formState.get(formElement);
+			current.elementsPreviouslyFocussed.push(fieldElement.id);
+		});
+	}
+
+	return formElement;
+}
+
+/**
+ * Collect invalid fields using the Constraint Validation API.
+ *
+ * @param {HTMLFormElement} formElement The form to scan for invalid controls.
+ * @param {O3ValidationOptions} validationOptions Validation configuration.
+ * @returns {FieldError[]} An array of field error objects.
+ */
+function collectInvalidFields(formElement, validationOptions) {
+	const elements = Array.from(formElement.elements);
+	/** @type {FieldError[]} */
+	const errors = [];
+
+	for (const fieldElement of elements) {
+		if (!isFormFieldElement(fieldElement))
+			continue;
+
+		if (fieldElement.checkValidity()) continue;
+
+		/** @type string */
+		let message = fieldElement.validationMessage;
+		let source = 'native';
+
+		// Custom message precedence: explicit option map -> data attributes
+		const idOrName = fieldElement.id || fieldElement.name;
+
+		if (
+			idOrName &&
+			validationOptions.customMessages &&
+			validationOptions.customMessages[idOrName]
+		) {
+			message = validationOptions.customMessages[idOrName];
+			source = 'custom';
+		} else {
+			// Data attribute overrides (e.g. data-o3-form-message-required)
+			const validity = fieldElement.validity;
+
+			const dataKey = validity.valueMissing
+				? 'required'
+				: validity.typeMismatch
+					? 'type'
+					: validity.patternMismatch
+						? 'pattern'
+						: validity.tooShort
+							? 'too-short'
+							: validity.tooLong
+								? 'too-long'
+								: validity.rangeUnderflow
+									? 'range-underflow'
+									: validity.rangeOverflow
+										? 'range-overflow'
+										: validity.stepMismatch
+											? 'step'
+											: validity.badInput
+												? 'bad-input'
+												: null;
+
+			if (dataKey) {
+				const attr = fieldElement.getAttribute(
+					`data-o3-form-message-${dataKey}`
+				);
+
+				if (attr) {
+					message = attr;
+					source = 'custom';
+				}
+			}
+		}
+
+		errors.push({
+			id: fieldElement.id,
+			fieldName: deriveFieldName(fieldElement),
+			message,
+			source,
+		});
+	}
+	return errors;
+}
+
+/**
+ * Apply or remove inline error classes on affected form controls.
+ *
+ * @param {HTMLFormElement} formElement The form element hosting the controls.
+ * @param {FieldError[]} errors Current list of errors to reflect.
+ */
+function applyInlineFeedback(formElement, errors) {
+	const elements = Array.from(formElement.elements)
+
+	for (const fieldElement of elements) {
+		if (!(fieldElement instanceof HTMLElement)) continue;
+
+		const [error] = errors.filter((error) => error.id === fieldElement.id);
+
+		if (!error) {
+			fieldElement.closest(`.${FORM_FIELD_CLASS}`)?.querySelector(`.${FORM_FEEDBACK_ERROR_CLASS}`)?.remove();
+			fieldElement.classList.remove(ERROR_INPUT_CLASS);
+		} else {
+			if (fieldElement.classList.contains('o3-form-text-input') && !fieldElement.classList.contains(ERROR_INPUT_CLASS)) {
+				fieldElement.classList.add(ERROR_INPUT_CLASS);
+			}
+
+			const parentElement = fieldElement.parentElement;
+			const formFieldElement = fieldElement.closest(`.${FORM_FIELD_CLASS}`);
+
+			if (parentElement && formFieldElement && !parentElement.querySelector(`.${FORM_FEEDBACK_ERROR_CLASS}`)) {
+				const errorMessageContainer = createFeedbackElement(error);
+				formFieldElement.appendChild(errorMessageContainer);
+			}
+		}
+	}
+}
+
+function isCSSEscapeExist() {
+	return typeof CSS !== 'undefined' && typeof CSS.escape === 'function';
+}
+
+/**
+ * Validates form is valid and conditionally displays an error summary
+ * @param {HTMLFormElement} formElement
+ * @param {O3ValidationOptions} validationOptions
+ * @returns boolean
+ */
+function validateAndReRender(formElement, validationOptions) {
+	const invalid = !formElement.checkValidity();
+
+	if (invalid) {
+		const errors = collectInvalidFields(formElement, validationOptions);
+
+		applyInlineFeedback(formElement, errors);
+		createErrorSummary(formElement, errors, validationOptions);
+
+		if (errors.length && validationOptions.focusFirstInvalid) {
+			const firstErrorId = errors[0].id;
+			let target;
+
+			if(firstErrorId) {
+				if(isCSSEscapeExist()) {
+					target = formElement.querySelector(`#${CSS.escape(firstErrorId)}`);
+				} else {
+					const safeId = String(firstErrorId)
+						.replace(/\\/g, '\\\\')
+						.replace(/"/g, '\\"');
+					target = formElement.querySelector(`[id="${safeId}"]`);
+				}
+			}
+		}
+	} else {
+		document.querySelector(`.${SUMMARY_CLASS}`)?.remove();
+	}
+
+	return !invalid;
+}
+
+/**
+ * Creates feedback element
+ *
+ * @param {FieldError} error The error to create a feedback element for.
+ * @returns {HTMLElement} A field error if invalid, otherwise null.
+ */
+function createFeedbackElement(error) {
+	const errorMessageContainer = document.createElement('div');
+	errorMessageContainer.classList.add('o3-form-feedback', FORM_FEEDBACK_ERROR_CLASS);
+
+	const errorMessage = document.createElement('span');
+	errorMessage.classList.add(`${FORM_FEEDBACK_ERROR_CLASS}-message`);
+	errorMessage.innerText = error.message;
+	errorMessageContainer.appendChild(errorMessage);
+
+	return errorMessageContainer;
+}
+
+/**
+ * Render or update the error summary element for the form.
+ *
+ * @param {HTMLFormElement} formElement The form to render a summary for.
+ * @param {FieldError[]} errors Errors to list; if empty the summary is removed.
+ * @param {O3ValidationOptions} validationOptions Validation configuration.
+ */
+function createErrorSummary(formElement, errors, validationOptions) {
+	if (!validationOptions.errorSummary) return;
+
+	let summary = formElement.querySelector(`.${SUMMARY_CLASS}`);
+
+	if (!errors.length) {
+		if (summary) summary.remove();
+		return;
+	}
+
+	if (!summary) {
+		summary = document.createElement('div');
+		summary.className = SUMMARY_CLASS;
+		summary.setAttribute('role', 'alert');
+		summary.setAttribute('aria-live', 'polite');
+		formElement.insertBefore(summary, formElement.firstChild);
+	}
+	summary.innerHTML = '';
+
+	const icon = document.createElement('span');
+	icon.className = `${SUMMARY_CLASS}-icon`;
+
+	const headingWrapper = document.createElement('div');
+	headingWrapper.className = `${SUMMARY_CLASS}__heading`;
+	headingWrapper.setAttribute('aria-labelledby', 'error-summary-title');
+
+	const heading = document.createElement('span');
+	heading.id = 'error-summary-title';
+	heading.className = 'o3-typography-heading5';
+	heading.textContent = 'Please correct these errors and try again.';
+
+	const list = document.createElement('ul');
+	list.className = `${SUMMARY_CLASS}__list o3-typography-body-small`;
+
+	for (const error of errors) {
+		const listItem = document.createElement('li');
+
+		if (error.id) {
+			const link = document.createElement('a');
+			link.className = 'o3-typography-link';
+			link.href = `#${encodeURIComponent(error.id)}`;
+			link.textContent = error.fieldName;
+			listItem.appendChild(link);
+
+			const messageSpan = document.createElement('span');
+			messageSpan.textContent = `: ${error.message}`;
+
+			listItem.appendChild(messageSpan);
+		} else {
+			listItem.textContent = `${error.fieldName}: ${error.message}`;
+		}
+		list.appendChild(listItem);
+	}
+	headingWrapper.appendChild(heading);
+	headingWrapper.appendChild(list);
+
+	summary.appendChild(icon);
+	summary.appendChild(headingWrapper);
+
+	if (validationOptions.focusFirstInvalid) {
+		heading.focus?.();
+	}
+}
+
+/**
+ * Derive a human-readable field name from its associated `<label>` or fallback attributes.
+ *
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} element The form control to derive a label for.
+ * @returns {string} A human friendly name for the field.
+ */
+function deriveFieldName(element) {
+	if (!element) return 'Field';
+
+	if (element.id) {
+		const escapeId = isCSSEscapeExist() ? CSS.escape(element.id) : element.id.replace(/\\/g, '\\\\"').replace(/"/g, '\\"');
+
+		const label = element.form?.querySelector(`label[for="${escapeId}"]`);
+
+		if (label && label.textContent) return label.textContent.trim();
+	}
+
+	return element.getAttribute('name') || element.id || 'Field';
+}
+
+/**
+ * Check if a given HTMLElement is a valid form field element.
+ *
+ * @param fieldElement {HTMLElement}
+ * @returns {boolean}
+ */
+function isFormFieldElement(fieldElement) {
+	return fieldElement instanceof HTMLInputElement ||
+		fieldElement instanceof HTMLSelectElement ||
+		fieldElement instanceof HTMLTextAreaElement;
+}
+
+/**
+ * Set a custom message for a field; clears any previous message when falsy.
+ *
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} element The field element to annotate.
+ * @param {string} message The custom message (empty string clears).
+ */
+function setCustomMessage(element, message) {
+	if (!element) return;
+	element.setCustomValidity(message || '');
+}
+
+/**
+ * Destroy validation instance: remove listeners and summary.
+ *
+ * @param {string|HTMLFormElement} formOrSelector A form element or a selector resolving to one.
+ */
+function destroyO3FormValidation(formOrSelector) {
+	const formElement =
+		formOrSelector instanceof HTMLFormElement
+			? formOrSelector
+			: document.querySelector(formOrSelector);
+
+	if (!formElement || !(formElement instanceof HTMLFormElement)) return;
+
+	const state = formState.get(formElement);
+
+	if (!state) return;
+
+	// clone without listeners (simpler than tracking each bound handler)
+	const clone = formElement.cloneNode(true);
+	formElement.parentNode?.replaceChild(clone, formElement);
+
+	const summary = clone.querySelector(`.${SUMMARY_CLASS}`);
+	summary?.remove();
+	formState.delete(clone); // new clone not initialised
+}
+
+export {
+	collectInvalidFields,
+	destroyO3FormValidation,
+	initO3FormValidation,
+	setCustomMessage,
+	createErrorSummary as showErrorSummary,
+};
diff --git a/components/o3-form/src/tsx/fieldComponents/Form.tsx b/components/o3-form/src/tsx/fieldComponents/Form.tsx
index 0d08f24166..cf9c0df417 100644
--- a/components/o3-form/src/tsx/fieldComponents/Form.tsx
+++ b/components/o3-form/src/tsx/fieldComponents/Form.tsx
@@ -1,5 +1,6 @@
-export const Form = ({children}: {
+export const Form = ({id, children}: {
+	id?: string,
 	children: React.JSX.Element | React.JSX.Element[];
 }) => {
-	return <form className="o3-form">{children}</form>;
+	return <form id={id} className="o3-form" >{children}</form>;
 };
diff --git a/components/o3-form/src/types/validation.d.ts b/components/o3-form/src/types/validation.d.ts
new file mode 100644
index 0000000000..7c5199d841
--- /dev/null
+++ b/components/o3-form/src/types/validation.d.ts
@@ -0,0 +1,53 @@
+declare module '@financial-times/o3-form/validation' {
+	export type FieldError = {
+		id: string;
+		fieldName: string;
+		message: string;
+		source?: 'native' | 'custom';
+	};
+
+	export type O3ValidationOptions = {
+		useBrowserReport?: boolean;
+		errorSummary?: boolean;
+		customMessages?: Record<string, string>;
+		preventSubmit?: boolean;
+		focusFirstInvalid?: boolean;
+		asyncValidate?: (formEl: HTMLFormElement) => Promise<FieldError[]>; // reserved for future
+	};
+
+	/** Initialise validation on a form element or selector. */
+	export function initO3FormValidation(
+		formOrSelector: string | HTMLFormElement,
+		options?: O3ValidationOptions
+	): HTMLFormElement | null;
+
+	/** Tear down validation listeners and remove summary if present. */
+	export function destroyO3FormValidation(
+		formOrSelector: string | HTMLFormElement
+	): void;
+
+	/** Collect current invalid fields for a form element. */
+	export function collectInvalidFields(
+		formEl: HTMLFormElement,
+		opts: O3ValidationOptions
+	): FieldError[];
+
+	/** Show or update an error summary section. */
+	export function showErrorSummary(
+		formEl: HTMLFormElement,
+		errors: FieldError[],
+		opts: O3ValidationOptions
+	): void;
+
+	/** Set a custom validity message for a given field. */
+	export function setCustomMessage(
+		inputEl: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+		message: string
+	): void;
+
+	/** Revalidate a single field and return its error or null. */
+	export function revalidateField(
+		inputEl: HTMLElement,
+		opts: O3ValidationOptions
+	): FieldError | null;
+}
diff --git a/components/o3-form/stories/FormValidationHtml.tsx b/components/o3-form/stories/FormValidationHtml.tsx
new file mode 100644
index 0000000000..771cbbfcc0
--- /dev/null
+++ b/components/o3-form/stories/FormValidationHtml.tsx
@@ -0,0 +1,70 @@
+export const FormValidationHtml = () => {
+	return (
+		<form id="demo-form" className='o3-form'>
+			<div className="o3-form-field" data-testid="first-input">
+				<label
+					className="o3-form-field__label"
+					htmlFor="o3-form-text-input-_9004070302523871"
+				>
+					First name
+				</label>
+				<span
+					className="o3-form-input__description"
+					id="o3-form-description_41273237907367455"
+				>
+          				The name you are referred to by
+        			</span>
+				<input
+					id="o3-form-text-input-_9004070302523871"
+					className="o3-form o3-form-text-input"
+					required
+					aria-required="true"
+					type="text"
+				/>
+			</div>
+			<div className="o3-form-field" data-testid="second-input">
+				<label
+					className="o3-form-field__label"
+					htmlFor="o3-form-text-input-_3017971228893219"
+				>
+					Last name
+				</label>
+				<span
+					className="o3-form-input__description"
+					id="o3-form-description_9230638484727663"
+				>
+          				Your family name
+        			</span>
+				<input
+					id="o3-form-text-input-_3017971228893219"
+					className="o3-form o3-form-text-input"
+					required
+					aria-required="true"
+					type="text"
+				/>
+			</div>
+			<div className="o3-form-field" data-testid="third-input">
+				<label
+					className="o3-form-field__label"
+					htmlFor="o3-form-text-input-_9285747170073946"
+				>
+					CVV code
+				</label>
+				<span
+					className="o3-form-input__description"
+					id="o3-form-description_03257263157199375"
+				>
+          				We're definitely not stealing your data
+        			</span>
+				<input
+					id="o3-form-text-input-_9285747170073946"
+					className="o3-form o3-form-text-input"
+					required
+					aria-required="true"
+					type="text"
+				/>
+			</div>
+			<input data-testid="submit-button" className="o3-button o3-button--primary" type="submit" value="Submit" style={{'marginTop': '12px'}}/>
+		</form>
+	)
+}
diff --git a/components/o3-form/stories/formValidation.stories.tsx b/components/o3-form/stories/formValidation.stories.tsx
new file mode 100644
index 0000000000..c8b53ec832
--- /dev/null
+++ b/components/o3-form/stories/formValidation.stories.tsx
@@ -0,0 +1,65 @@
+import type {Meta} from '@storybook/react';
+import links from '@financial-times/o3-figma-sb-links';
+
+import {Form as FormTsx} from '../src/tsx';
+
+import '../src/css/brands/core.css';
+import '../src/css/brands/professional.css';
+import '../src/css/brands/internal.css';
+import '../src/css/brands/whitelabel.css';
+import '../src/css/brands/sustainable-views.css';
+import {initO3FormValidation} from "../src/js/validation";
+import {FormValidationHtml} from "./FormValidationHtml";
+
+const meta: Meta<typeof FormTsx> = {
+	title: 'o3-form',
+	component: FormTsx,
+	tags: [
+		'experimental',
+		'core',
+		'professional',
+		'internal',
+		'whitelabel',
+		'sustainable-views',
+	],
+	decorators: [
+		Story => (
+			<div data-o3-brand="core" className="o3-grid">
+				<div
+					style={{gridColumn: `content-start / content-end`}}>
+					<Story/>
+				</div>
+			</div>
+		),
+	],
+	parameters: {
+		backgrounds: {disable: true},
+	},
+} as Meta;
+
+export const FormValidation = {
+	parameters: {
+		design: {
+			type: 'figma',
+			url: links['whitelabel-o3-form--text-input'].figma,
+		},
+	},
+	render: args => {
+		return <FormValidationHtml/>;
+	},
+	play: async ({canvasElement}) => {
+		const form = canvasElement.querySelector(
+			'#demo-form'
+		) as HTMLFormElement | null;
+
+		if (form) {
+			initO3FormValidation(form);
+		}
+
+		form?.addEventListener('submit', (event) => {
+			event.preventDefault();
+		});
+	},
+};
+
+export default meta;
diff --git a/components/o3-form/stories/formValidation.test.stories.tsx b/components/o3-form/stories/formValidation.test.stories.tsx
new file mode 100644
index 0000000000..a39059b393
--- /dev/null
+++ b/components/o3-form/stories/formValidation.test.stories.tsx
@@ -0,0 +1,198 @@
+import type {Meta} from '@storybook/react';
+import {expect, userEvent, within} from '@storybook/test';
+import links from '@financial-times/o3-figma-sb-links';
+
+import {Form as FormTsx} from '../src/tsx';
+
+import '../src/css/brands/core.css';
+import '../src/css/brands/professional.css';
+import '../src/css/brands/internal.css';
+import '../src/css/brands/whitelabel.css';
+import '../src/css/brands/sustainable-views.css';
+import {initO3FormValidation} from "../src/js/validation";
+import {FormValidationHtml} from "./FormValidationHtml";
+
+const meta: Meta<typeof FormTsx> = {
+	title: 'Tests/o3-form',
+	component: FormTsx,
+	tags: [
+		'experimental',
+		'core',
+		'professional',
+		'internal',
+		'whitelabel',
+		'sustainable-views',
+	],
+	decorators: [
+		Story => (
+			<div data-o3-brand="core" className="o3-grid">
+				<div
+					style={{gridColumn: `content-start / content-end`}}>
+					<Story/>
+				</div>
+			</div>
+		),
+	],
+	parameters: {
+		backgrounds: {disable: true},
+	},
+} as Meta;
+
+export const FormValidationDisplaysElementErrorSummary = {
+	parameters: {
+		design: {
+			type: 'figma',
+			url: links['whitelabel-o3-form--text-input'].figma,
+		},
+	},
+	render: args => {
+		return <FormValidationHtml/>;
+	},
+	play: async ({canvasElement}) => {
+		const canvas = within(canvasElement);
+		const form = canvasElement.querySelector(
+			'#demo-form'
+		) as HTMLFormElement | null;
+
+		if (form) {
+			initO3FormValidation(form);
+		}
+
+		const firstInput = within(canvas.getByTestId('first-input'));
+		const firstInputElement = firstInput.getByRole('textbox');
+
+		const secondInput = within(canvas.getByTestId('second-input'));
+		const secondInputElement = secondInput.getByRole('textbox');
+
+		const thirdInput = within(canvas.getByTestId('third-input'));
+		const thirdInputElement = thirdInput.getByRole('textbox');
+
+		// When clicking through the form.
+		await userEvent.click(firstInputElement);
+		await userEvent.click(secondInputElement);
+		await userEvent.click(thirdInputElement);
+
+		// It should highlight the first input field as invalid
+		expect(firstInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(firstInputElement.classList).toContain('o3-form-text-input--error');
+
+		// It should highlight the second input field as invalid
+		expect(secondInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(secondInputElement.classList).toContain('o3-form-text-input--error');
+
+		// It should not highlight the third input field as invalid
+		expect(thirdInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).not.toBeInTheDocument();
+		expect(thirdInputElement.classList).not.toContain('o3-form-text-input--error');
+
+		// When correcting an error
+		await userEvent.click(firstInputElement);
+		await userEvent.type(firstInputElement, 'My resolving text');
+
+		// It should not highlight the first input field as invalid
+		expect(firstInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).not.toBeInTheDocument();
+		expect(firstInputElement.classList).not.toContain('o3-form-text-input--error');
+	},
+};
+
+export const FormValidationDisplaysErrorSummary = {
+	parameters: {
+		design: {
+			type: 'figma',
+			url: links['whitelabel-o3-form--text-input'].figma,
+		},
+	},
+	render: args => {
+		return <FormValidationHtml/>;
+	},
+	play: async ({canvasElement}) => {
+		const canvas = within(canvasElement);
+		const form = canvasElement.querySelector(
+			'#demo-form'
+		) as HTMLFormElement | null;
+
+		if (form) {
+			form.addEventListener('submit', (event) => {
+				event.preventDefault();
+			});
+			initO3FormValidation(form);
+		} else {
+			return false;
+		}
+
+		// When submitting an empty form
+		const submitButton = canvas.getByTestId('submit-button');
+		await userEvent.click(submitButton);
+
+		const errorSummary = canvasElement.querySelector('.o3-form__error-summary');
+		// It should render an error summary
+		expect(errorSummary).toBeInTheDocument();
+
+
+		// It should list all erroring fields with a reason
+		const summaryWithin = within(errorSummary);
+
+		await summaryWithin.findByText(getErrorSummaryLineItemText('First name'));
+		await summaryWithin.findByText(getErrorSummaryLineItemText('Last name'));
+		await summaryWithin.findByText(getErrorSummaryLineItemText('CVV code'));
+
+		const firstInput = within(canvas.getByTestId('first-input'));
+		const firstInputElement = firstInput.getByRole('textbox');
+
+		const secondInput = within(canvas.getByTestId('second-input'));
+		const secondInputElement = secondInput.getByRole('textbox');
+
+		const thirdInput = within(canvas.getByTestId('third-input'));
+		const thirdInputElement = thirdInput.getByRole('textbox');
+
+		// It should highlight the first input field as invalid
+		expect(firstInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(firstInputElement.classList).toContain('o3-form-text-input--error');
+
+		// It should highlight the second input field as invalid
+		expect(secondInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(secondInputElement.classList).toContain('o3-form-text-input--error');
+
+		// It should not highlight the third input field as invalid
+		expect(thirdInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(thirdInputElement.classList).toContain('o3-form-text-input--error');
+
+		// When resolving one field
+		await userEvent.type(firstInputElement, 'My resolving text');
+		await userEvent.click(submitButton);
+
+		// It should list only erroring fields with a reason
+		expect(canvas.queryByText(getErrorSummaryLineItemText('First name'))).not.toBeInTheDocument();
+		expect(canvas.queryByText(getErrorSummaryLineItemText('Last name'))).toBeInTheDocument();
+		expect(canvas.queryByText(getErrorSummaryLineItemText('CVV code'))).toBeInTheDocument();
+
+		// It should not highlight the first input field as invalid
+		expect(firstInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).not.toBeInTheDocument();
+		expect(firstInputElement.classList).not.toContain('o3-form-text-input--error');
+
+		// It should highlight the second input field as invalid
+		expect(secondInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(secondInputElement.classList).toContain('o3-form-text-input--error');
+
+		// It should not highlight the third input field as invalid
+		expect(thirdInput.queryByText(getInlineErrorText(), {selector: ".o3-form-feedback__error-message"})).toBeInTheDocument();
+		expect(thirdInputElement.classList).toContain('o3-form-text-input--error');
+
+		// When resolving all other fields.
+		await userEvent.type(secondInputElement, 'My resolving text');
+		await userEvent.type(thirdInputElement, 'My resolving text');
+		await userEvent.click(submitButton);
+
+		// It should not display the error summary
+		expect(canvasElement.querySelector('.o3-form__error-summary')).not.toBeInTheDocument();
+	},
+};
+
+const getErrorSummaryLineItemText = (expectedText: string) => (_: string, element: HTMLElement) => {
+	return element.textContent === `${expectedText}: Please fill out this field.` || element.textContent === `${expectedText}: Please fill in this field.`;
+}
+
+const getInlineErrorText = () => (_: string, element: HTMLElement) => {
+	return element.textContent === `Please fill out this field.` || element.textContent === `Please fill in this field.`;
+}
+
+export default meta;