diff --git a/frontend/src/lib/components/ui/email-input/EmailInput.svelte b/frontend/src/lib/components/ui/email-input/EmailInput.svelte
new file mode 100644
index 0000000..d82f907
--- /dev/null
+++ b/frontend/src/lib/components/ui/email-input/EmailInput.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { isValidEmail, normalizeEmail } from '$lib/utils/email';
+
+	interface Props {
+		value?: string;
+		error?: string;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+		id?: string;
+		onvaluechange?: (value: string) => void;
+		onerrorchange?: (error: string) => void;
+		onblur?: () => void;
+	}
+
+	let {
+		value = $bindable(''),
+		error = $bindable(''),
+		placeholder = 'email@example.com',
+		required = false,
+		disabled = false,
+		class: className = '',
+		id = 'email',
+		onvaluechange,
+		onerrorchange,
+		onblur
+	}: Props = $props();
+
+	let touched = $state(false);
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		onvaluechange?.(value);
+		if (touched) {
+			validate(value);
+		}
+	}
+
+	function handleBlur() {
+		touched = true;
+		const normalized = normalizeEmail(value);
+		if (normalized !== value) {
+			value = normalized;
+			onvaluechange?.(normalized);
+		}
+		validate(value);
+		onblur?.();
+	}
+
+	function validate(val: string) {
+		if (!val) {
+			if (required) {
+				error = 'Email is required';
+				onerrorchange?.(error);
+			} else {
+				error = '';
+				onerrorchange?.('');
+			}
+			return;
+		}
+		if (!isValidEmail(val)) {
+			error = 'Invalid email address';
+			onerrorchange?.(error);
+		} else {
+			error = '';
+			onerrorchange?.('');
+		}
+	}
+</script>
+
+<div class="space-y-1.5">
+	<Input
+		{id}
+		type="email"
+		inputmode="email"
+		autocomplete="email"
+		{placeholder}
+		{value}
+		oninput={handleInput}
+		onblur={handleBlur}
+		{disabled}
+		aria-invalid={!!error || undefined}
+		class={className}
+	/>
+	{#if error}
+		<p class="text-sm text-red-500">{error}</p>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/ui/email-input/index.ts b/frontend/src/lib/components/ui/email-input/index.ts
new file mode 100644
index 0000000..b787b1a
--- /dev/null
+++ b/frontend/src/lib/components/ui/email-input/index.ts
@@ -0,0 +1,3 @@
+import EmailInput from './EmailInput.svelte';
+
+export { EmailInput };
diff --git a/frontend/src/lib/utils/email.ts b/frontend/src/lib/utils/email.ts
new file mode 100644
index 0000000..22620cb
--- /dev/null
+++ b/frontend/src/lib/utils/email.ts
@@ -0,0 +1,27 @@
+/**
+ * Normalizes an email: trims whitespace and lowercases.
+ */
+export function normalizeEmail(value: string): string {
+	return value.trim().toLowerCase();
+}
+
+/**
+ * Validates an email address.
+ * Checks: non-empty, max 254 chars, passes a basic RFC-aware regex
+ * and a mailto: URI test via HTMLInputElement.
+ */
+export function isValidEmail(email: string): boolean {
+	const trimmed = email.trim();
+	if (!trimmed) return false;
+	if (trimmed.length > 254) return false;
+
+	// Basic structural regex — no RFC 5322 full validation, but catches obvious junk
+	if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(trimmed)) return false;
+
+	// Use the browser's built-in email validation via type=email
+	// (catches things like multiple @ signs)
+	const input = document.createElement('input');
+	input.type = 'email';
+	input.value = trimmed;
+	return input.checkValidity();
+}