diff --git a/internal/testing/frontend/fe_unit_stubs.go b/internal/testing/frontend/fe_unit_stubs.go
index d52bb8767..7615fdf0a 100644
--- a/internal/testing/frontend/fe_unit_stubs.go
+++ b/internal/testing/frontend/fe_unit_stubs.go
@@ -96,8 +96,13 @@ func feUnitPathStubPath(p, joined, importer string, stubs feUnitStubPaths) (stri
 			return stubs.OPage, true
 		}
 		if strings.HasSuffix(p, ".vue") || strings.Contains(joined, ".vue") {
+			if strings.HasSuffix(p, "ChoyFormView.vue") || strings.HasSuffix(joined, "ChoyFormView.vue") {
+				return "", false
+			}
 			return stubs.ChildView, true
 		}
+	case strings.HasSuffix(p, "ChoyFormView.vue") || strings.HasSuffix(joined, "ChoyFormView.vue"):
+		return "", false
 	case strings.HasSuffix(p, "FormView.vue") || strings.HasSuffix(joined, "FormView.vue") ||
 		strings.HasSuffix(p, "ListView.vue") || strings.HasSuffix(joined, "ListView.vue") ||
 		strings.HasSuffix(p, "KanbanView.vue") || strings.HasSuffix(joined, "KanbanView.vue"):
@@ -126,7 +131,9 @@ func feUnitPathStubPath(p, joined, importer string, stubs feUnitStubPaths) (stri
 			return stubs.PageComposable, true
 		}
 	case strings.Contains(joined, "/auth/web/stores/auth") || (strings.Contains(p, "stores/auth") && !strings.Contains(importer, "/stores/auth/")):
-		fromProduct := stubProductChildren || strings.Contains(importer, "Login.vue")
+		fromProduct := stubProductChildren ||
+			strings.Contains(importer, "Login.vue") ||
+			strings.Contains(importer, "Register.vue")
 		barrel := strings.HasSuffix(p, "/stores/auth") ||
 			p == "../stores/auth" ||
 			p == "./stores/auth" ||
diff --git a/internal/testing/frontend/host_bundle.go b/internal/testing/frontend/host_bundle.go
index f5b7e648b..d148223a2 100644
--- a/internal/testing/frontend/host_bundle.go
+++ b/internal/testing/frontend/host_bundle.go
@@ -187,6 +187,11 @@ func BuildFrontendVueHostBundle(opts VueHostBundleOptions) (*BundleResult, error
 				// or when web/web/components code is the importer (real child mounts).
 				build.OnResolve(api.OnResolveOptions{Filter: `(FormView|ListView|KanbanView)\.vue$`},
 					func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+						path := filepath.ToSlash(args.Path)
+						// Keep the kit FormView SFC so native submit and field rules run.
+						if strings.HasSuffix(path, "ChoyFormView.vue") {
+							return api.OnResolveResult{}, nil
+						}
 						importer := filepath.ToSlash(args.Importer)
 						if strings.Contains(importer, "/web/web/components/") ||
 							strings.HasSuffix(importer, ".test.ts") ||
diff --git a/internal/testing/frontend/host_bundle_coverage_test.go b/internal/testing/frontend/host_bundle_coverage_test.go
index a72faafb2..35c3c33dd 100644
--- a/internal/testing/frontend/host_bundle_coverage_test.go
+++ b/internal/testing/frontend/host_bundle_coverage_test.go
@@ -83,6 +83,10 @@ func TestFeUnitPackageAndPathStubMatchers(t *testing.T) {
 		{"./Page.vue", "/repo/modules/web/web/components/layout/Page.vue", "/repo/modules/web/web/components/layout/ChoyPageIoMenu.test.ts", "", false},
 		{"./OPage.vue", "/repo/modules/web/web/components/layout/OPage.vue", "/repo/modules/web/web/components/layout/ChoyPage.storeContext.mount.test.ts", "", false},
 		{"./PartnerFormView.vue", "/x/PartnerFormView.vue", page, "child", true},
+		{"@/web/web/components/view/ChoyFormView.vue", "/modules/web/web/components/view/ChoyFormView.vue", page, "", false},
+		{"@/web/web/components/view/ChoyFormView.vue", "/modules/web/web/components/view/ChoyFormView.vue", "", "", false},
+		{"./ChoyFormView.vue", "/tmp/ChoyFormView.vue", page, "", false},
+		{"./ChoyFormView.vue", "/tmp/ChoyFormView.vue", "/other.ts", "", false},
 		{"./PartnerListView.vue", "/x/PartnerListView.vue", page, "child", true},
 		{"./ModuleKanbanView.vue", "/x/ModuleKanbanView.vue", view, "child", true},
 		{"./PartnerFormView.vue", "/x/PartnerFormView.vue", "/other.ts", "", false},
@@ -101,6 +105,7 @@ func TestFeUnitPackageAndPathStubMatchers(t *testing.T) {
 		{"@/auth/web/stores/auth", "/modules/auth/web/stores/auth", page, "auth", true},
 		{"../stores/auth", "/modules/auth/web/stores/auth", page, "auth", true},
 		{"./stores/auth", "/modules/auth/web/stores/auth", "Login.vue", "auth", true},
+		{"./stores/auth", "/modules/auth/web/stores/auth", "Register.vue", "auth", true},
 		{"@/auth/web/stores/auth/index.ts", "/modules/auth/web/stores/auth/index.ts", page, "auth", true},
 		{"@/web/web/i18n", "/web/web/i18n/index", page, "i18n", true},
 		{"@/web/web/i18n", "/web/web/i18n/index", "/other.ts", "", false},
@@ -256,6 +261,10 @@ func TestBuildFrontendVueHostBundle_FEStubsAndExtras(t *testing.T) {
 	if err != nil || childSkip.Path != "" {
 		t.Fatalf("child view skip for web unit test: %#v err=%v", childSkip, err)
 	}
+	choyFormKeep, err := childViewCB(api.OnResolveArgs{Path: "./ChoyFormView.vue", Importer: "/modules/web/web/kit.ts"})
+	if err != nil || choyFormKeep.Path != "" {
+		t.Fatalf("child view skip for kit ChoyFormView: %#v err=%v", choyFormKeep, err)
+	}
 	var pathHit, pageFromPage, pageFromTest bool
 	for _, pathCB := range pathCBs {
 		pathRes, err := pathCB(api.OnResolveArgs{
diff --git a/internal/testing/frontend/testdata/stubs/auth_store.js b/internal/testing/frontend/testdata/stubs/auth_store.js
index 0a6c76d4e..f9d35c8b0 100644
--- a/internal/testing/frontend/testdata/stubs/auth_store.js
+++ b/internal/testing/frontend/testdata/stubs/auth_store.js
@@ -27,6 +27,9 @@ export const useAuthStore = defineStore('auth-fe-stub', function () {
       isAuthenticated.value = true;
       return Promise.resolve();
     },
+    register: function () {
+      return Promise.resolve({ UserId: 'usr_fe_stub' });
+    },
     loadUser: function () {
       return Promise.resolve(currentUser.value);
     },
diff --git a/modules/auth/web/pages/Login.mount.test.ts b/modules/auth/web/pages/Login.mount.test.ts
index 49dba7bf7..93fc877eb 100644
--- a/modules/auth/web/pages/Login.mount.test.ts
+++ b/modules/auth/web/pages/Login.mount.test.ts
@@ -25,36 +25,70 @@ async function mountLogin(opts?: {
   return { wrapper, replaces };
 }
 
+function fieldInput(wrapper: { find: (sel: string) => any }, selector: string) {
+  const root = wrapper.find(selector);
+  if (!root.exists()) return root;
+  const el = root.element as HTMLElement;
+  if (String(el.tagName || '').toLowerCase() === 'input') return root;
+  const inner = typeof el.querySelector === 'function' ? el.querySelector('input') : null;
+  if (inner) {
+    return {
+      exists: () => true,
+      element: inner,
+      trigger: async (type: string) => {
+        inner.dispatchEvent(new Event(type, { bubbles: true }));
+      },
+    };
+  }
+  return root;
+}
+
+async function fillField(wrapper: { find: (sel: string) => any }, selector: string, value: string) {
+  const input = fieldInput(wrapper, selector);
+  const el = input.element as HTMLInputElement;
+  el.value = value;
+  el.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+  el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  el.dispatchEvent(new Event('blur', { bubbles: true, cancelable: true }));
+  await flushPromises();
+}
+
+function submitForm(wrapper: { find: (sel: string) => any }) {
+  const form = wrapper.find('form');
+  (form.element as HTMLFormElement).dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+}
+
+async function afterSubmit() {
+  for (let i = 0; i < 8; i++) await flushPromises();
+}
+
 test('Login.vue mounts under choysumMount and runs script setup', async () => {
   const { wrapper } = await mountLogin();
-  expect(wrapper.find('.login-username').exists()).toBe(true);
-  expect(wrapper.find('.login-password').exists()).toBe(true);
+  expect(fieldInput(wrapper, '.login-username').exists()).toBe(true);
+  expect(fieldInput(wrapper, '.login-password').exists()).toBe(true);
   wrapper.unmount();
 });
 
 test('Login.vue: empty submit keeps the form and shows field errors', async () => {
-  const { wrapper } = await mountLogin();
+  const { wrapper, replaces } = await mountLogin();
   const form = wrapper.find('form');
   expect(form.exists()).toBe(true);
-  await form.trigger('submit');
-  await flushPromises();
-  expect(wrapper.text().includes('Enter username') || wrapper.find('.text-destructive').exists()).toBe(true);
+  submitForm(wrapper);
+  await afterSubmit();
+  expect(wrapper.text().includes('Enter username') || wrapper.find('.text-destructive').exists() || wrapper.find('.text-danger').exists()).toBe(true);
+  expect(replaces).toEqual([]);
   wrapper.unmount();
 });
 
-test('Login.vue: successful submit redirects via query.redirect', async () => {
+test('Login.vue: filled native submit does not show required field errors', async () => {
   const { wrapper, replaces } = await mountLogin({ query: { redirect: '/auth/tokens' } });
-  const user = wrapper.find('.login-username');
-  const pass = wrapper.find('.login-password');
-  expect(user.exists()).toBe(true);
-  expect(pass.exists()).toBe(true);
-  (user.element as HTMLInputElement).value = 'admin';
-  await user.trigger('input');
-  (pass.element as HTMLInputElement).value = 'secret';
-  await pass.trigger('input');
-  await wrapper.find('form').trigger('submit');
-  await flushPromises();
-  // Auth stub marks authenticated: success must clear errors and navigate.
+  expect(fieldInput(wrapper, '.login-username').exists()).toBe(true);
+  expect(fieldInput(wrapper, '.login-password').exists()).toBe(true);
+  await fillField(wrapper, '.login-username', 'admin');
+  await fillField(wrapper, '.login-password', 'secret');
+  submitForm(wrapper);
+  await afterSubmit();
+  expect(wrapper.text().includes('Enter username')).toBe(false);
   expect(wrapper.find('.login-error').exists()).toBe(false);
   expect(wrapper.find('.text-destructive').exists()).toBe(false);
   expect(replaces).toEqual(['/auth/tokens']);
diff --git a/modules/auth/web/pages/Login.vue b/modules/auth/web/pages/Login.vue
index b4e694166..797a964ef 100644
--- a/modules/auth/web/pages/Login.vue
+++ b/modules/auth/web/pages/Login.vue
@@ -11,7 +11,17 @@ SPDX-License-Identifier: Apache-2.0
         :description="_t('Enter your username and password to continue')"
         class="login-card w-full"
       >
-        <form class="flex flex-col gap-4" @submit.prevent="handleLogin">
+        <ChoyFormView
+          :store="formStore"
+          view-mode="create"
+          embedded
+          :show-header="false"
+          :show-actions="false"
+          :show-messages="false"
+          :resolve-record-id-from-route="false"
+          :initial-values="loginInitialValues"
+          :submit-handler="onLoginSubmit"
+        >
           <ChoyFieldGroup class="gap-4">
             <ChoyField v-if="error">
               <div
@@ -30,42 +40,45 @@ SPDX-License-Identifier: Apache-2.0
               </div>
             </ChoyField>
 
-            <ChoyField :data-invalid="fieldErrors.username ? true : undefined">
-              <ChoyFieldLabel for="login-username">{{ _t('Username') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="login-username"
-                v-model="form.username"
-                name="username"
-                type="text"
-                autocomplete="username"
-                :placeholder="_t('Enter username')"
-                class="login-username"
-                :aria-invalid="fieldErrors.username ? true : undefined"
-              />
-              <ChoyFieldError :errors="fieldErrors.username ? [fieldErrors.username] : []" />
-            </ChoyField>
-
-            <ChoyField :data-invalid="fieldErrors.password ? true : undefined">
-              <ChoyFieldLabel for="login-password">{{ _t('Password') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="login-password"
-                v-model="form.password"
-                name="password"
-                type="password"
-                autocomplete="current-password"
-                :placeholder="_t('Enter password')"
-                class="login-password"
-                :aria-invalid="fieldErrors.password ? true : undefined"
-              />
-              <ChoyFieldError :errors="fieldErrors.password ? [fieldErrors.password] : []" />
-            </ChoyField>
-
-            <ChoyField orientation="horizontal">
-              <ChoyCheckbox id="login-remember" v-model="form.rememberMe" class="login-options" />
-              <ChoyFieldLabel for="login-remember" class="font-normal">
-                {{ _t('Remember me') }}
-              </ChoyFieldLabel>
-            </ChoyField>
+            <div class="login-username">
+            <ChoyVarcharField
+              :store="formStore"
+              prop="Username"
+              :placeholder="_t('Enter username')"
+              autocomplete="username"
+              name="username"
+              id="login-username"
+              buffer-strategy="live"
+              :nullable="false"
+              :show-word-limit="false"
+              show-inline-error
+              :rules="usernameRules"
+            />
+            </div>
+            <div class="login-password">
+            <ChoyVarcharField
+              :store="formStore"
+              prop="Password"
+              type="password"
+              :placeholder="_t('Enter password')"
+              autocomplete="current-password"
+              name="password"
+              id="login-password"
+              buffer-strategy="live"
+              :nullable="false"
+              :show-word-limit="false"
+              show-inline-error
+              :rules="passwordRules"
+            />
+            </div>
+            <ChoyBooleanField
+              class="login-options"
+              :store="formStore"
+              prop="RememberMe"
+              widget="checkbox"
+              :label="_t('Remember me')"
+              buffer-strategy="live"
+            />
 
             <ChoyField>
               <ChoyButton type="submit" class="submit-button w-full" :disabled="loading">
@@ -79,14 +92,14 @@ SPDX-License-Identifier: Apache-2.0
               </ChoyFieldDescription>
             </ChoyField>
           </ChoyFieldGroup>
-        </form>
+        </ChoyFormView>
       </ChoyCard>
     </AuthPanel>
   </ChoyPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { X } from 'lucide-vue-next';
@@ -96,41 +109,44 @@ import {
   ChoyPage,
   ChoyCard,
   ChoyButton,
-  ChoyInput,
-  ChoyCheckbox,
   ChoyField,
   ChoyFieldDescription,
-  ChoyFieldError,
   ChoyFieldGroup,
-  ChoyFieldLabel,
+  ChoyFormView,
+  ChoyVarcharField,
+  ChoyBooleanField,
+  createLocalFormStore,
 } from '@/web';
 import { createTranslate } from '@/web/web/i18n';
 import { runLoginAuthReady } from './login_auth_ready';
-import { resolveLoginRedirect, runLoginSubmit } from './login_form';
+import { loginPasswordRules, loginUsernameRules, resolveLoginRedirect, runHandledAuthSubmit, runLoginSubmit } from './login_form';
 
 const { _t } = createTranslate('auth', { scope: 'web/pages/Login' });
 
-/**
- * Form model for the login page.
- */
-interface LoginFormData {
-  username: string;
-  password: string;
-  rememberMe: boolean;
-}
-
 const router = useRouter();
 const route = useRoute();
 const authStore = useAuthStore();
 const { loading, isAuthenticated } = storeToRefs(authStore);
 
-const form = reactive<LoginFormData>({
-  username: '',
-  password: '',
-  rememberMe: true,
+const loginInitialValues = {
+  Username: '',
+  Password: '',
+  RememberMe: true,
+};
+
+const formStore = createLocalFormStore({
+  fields: [
+    { name: 'Username', label: _t('Username'), type: 'varchar' },
+    { name: 'Password', label: _t('Password'), type: 'varchar' },
+    { name: 'RememberMe', label: _t('Remember me'), type: 'boolean' },
+  ],
+  initialValues: loginInitialValues,
+  storeId: 'auth.login',
 });
 
-const fieldErrors = reactive({ username: '', password: '' });
+const usernameRules = loginUsernameRules(_t);
+const passwordRules = loginPasswordRules(_t);
+
 const error = ref('');
 const showRegisterLink = computed(() => import.meta.env.CHOYSUM_ENABLE_REGISTRATION !== false);
 
@@ -141,6 +157,10 @@ function handleRedirect() {
   router.replace(resolveLoginRedirect(route.query.redirect?.toString()));
 }
 
+function setPageError(message: string) {
+  error.value = message;
+}
+
 onMounted(async () => {
   await runLoginAuthReady({
     ensureAuthReady: () => authStore.ensureAuthReady(),
@@ -150,23 +170,24 @@ onMounted(async () => {
   });
 });
 
-/**
- * Validate the form and start the login flow.
- */
-async function handleLogin() {
-  const ok = await runLoginSubmit({
-    loading: !!loading.value,
-    form,
-    fieldErrors,
-    t: _t,
-    loginFailedMessage: _t('Login failed. Please try again later.'),
-    login: (username, password, csrf, device, rememberMe) =>
-      authStore.login(username, password, csrf, device, rememberMe),
-    rememberMe: form.rememberMe,
-    setError: message => {
-      error.value = message;
-    },
+async function onLoginSubmit(ctx: { formData: Record<string, unknown> }) {
+  const fallback = _t('Login failed. Please try again later.');
+  const data = ctx.formData;
+  return runHandledAuthSubmit({
+    submit: () =>
+      runLoginSubmit({
+        loading: !!loading.value,
+        username: String(data.Username ?? ''),
+        password: String(data.Password ?? ''),
+        rememberMe: data.RememberMe === true,
+        loginFailedMessage: fallback,
+        login: (username, password, csrf, device, rememberMe) =>
+          authStore.login(username, password, csrf, device, rememberMe),
+        setError: setPageError,
+      }),
+    fallbackMessage: fallback,
+    setError: setPageError,
+    onSuccess: handleRedirect,
   });
-  if (ok) handleRedirect();
 }
 </script>
diff --git a/modules/auth/web/pages/Register.mount.test.ts b/modules/auth/web/pages/Register.mount.test.ts
new file mode 100644
index 000000000..195f1a860
--- /dev/null
+++ b/modules/auth/web/pages/Register.mount.test.ts
@@ -0,0 +1,133 @@
+// SPDX-FileCopyrightText: 2026-present Brian Wang <wangbuke@gmail.com>
+// SPDX-License-Identifier: Apache-2.0
+
+import { mount, flushPromises } from '@choysum/test-utils';
+import Register from './Register.vue';
+import { buildPageMountGlobal } from '@choysum/page-mount';
+
+async function mountRegister() {
+  const replaces: unknown[] = [];
+  const wrapper = mount(Register as any, {
+    global: buildPageMountGlobal({
+      route: { path: '/register', query: {} },
+      router: {
+        replace: (to: unknown) => {
+          replaces.push(to);
+          return Promise.resolve(to);
+        },
+      },
+    }),
+  });
+  await flushPromises();
+  return { wrapper, replaces };
+}
+
+function fieldInput(wrapper: { find: (sel: string) => any }, selector: string) {
+  const root = wrapper.find(selector);
+  if (!root.exists()) return root;
+  const el = root.element as HTMLElement;
+  if (String(el.tagName || '').toLowerCase() === 'input') return root;
+  const inner = typeof el.querySelector === 'function' ? el.querySelector('input') : null;
+  if (inner) {
+    return {
+      exists: () => true,
+      element: inner,
+      trigger: async (type: string) => {
+        inner.dispatchEvent(new Event(type, { bubbles: true }));
+      },
+    };
+  }
+  return root;
+}
+
+async function fillField(wrapper: { find: (sel: string) => any }, selector: string, value: string) {
+  const input = fieldInput(wrapper, selector);
+  const el = input.element as HTMLInputElement;
+  el.value = value;
+  el.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+  el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  el.dispatchEvent(new Event('blur', { bubbles: true, cancelable: true }));
+  await flushPromises();
+}
+
+function submitForm(wrapper: { find: (sel: string) => any }) {
+  const form = wrapper.find('form');
+  (form.element as HTMLFormElement).dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+}
+
+async function afterSubmit() {
+  for (let i = 0; i < 8; i++) await flushPromises();
+}
+
+function queryIn(wrapper: { find: (sel: string) => any }, rootSelector: string, tag: string): HTMLElement | null {
+  const root = wrapper.find(rootSelector);
+  if (!root.exists()) return null;
+  const el = root.element as HTMLElement;
+  return typeof el.querySelector === 'function' ? (el.querySelector(tag) as HTMLElement | null) : null;
+}
+
+function checkTerms(wrapper: { find: (sel: string) => any }) {
+  const terms = queryIn(wrapper, '[data-testid="register-terms"]', 'input') as HTMLInputElement | null;
+  expect(!!terms).toBe(true);
+  terms!.checked = true;
+  terms!.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+  terms!.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+}
+
+test('Register.vue mounts under choysumMount', async () => {
+  const { wrapper } = await mountRegister();
+  expect(fieldInput(wrapper, '.register-username').exists()).toBe(true);
+  expect(wrapper.find('[data-testid="register-terms"]').exists()).toBe(true);
+  wrapper.unmount();
+});
+
+test('Register.vue: empty submit shows inline errors and does not register', async () => {
+  const { wrapper, replaces } = await mountRegister();
+  submitForm(wrapper);
+  await afterSubmit();
+  expect(wrapper.text().includes('Enter username')).toBe(true);
+  expect(replaces).toEqual([]);
+  wrapper.unmount();
+});
+
+test('Register.vue: confirm mismatch does not register', async () => {
+  const { wrapper, replaces } = await mountRegister();
+  await fillField(wrapper, '.register-username', 'alice');
+  await fillField(wrapper, '.register-email', 'alice@example.com');
+  await fillField(wrapper, '.register-password', 'secret1');
+  await fillField(wrapper, '.register-confirm', 'other99');
+  checkTerms(wrapper);
+  submitForm(wrapper);
+  await afterSubmit();
+  expect(wrapper.text().includes('Passwords do not match')).toBe(true);
+  expect(replaces).toEqual([]);
+  wrapper.unmount();
+});
+
+test('Register.vue: unchecked terms keeps submit disabled and does not register', async () => {
+  const { wrapper, replaces } = await mountRegister();
+  await fillField(wrapper, '.register-username', 'alice');
+  await fillField(wrapper, '.register-email', 'alice@example.com');
+  await fillField(wrapper, '.register-password', 'secret1');
+  await fillField(wrapper, '.register-confirm', 'secret1');
+  const submit = queryIn(wrapper, '.register-card', 'button') as HTMLButtonElement | null;
+  expect(!!submit).toBe(true);
+  expect(submit!.disabled).toBe(true);
+  expect(replaces).toEqual([]);
+  wrapper.unmount();
+});
+
+test('Register.vue: valid submit registers and redirects', async () => {
+  const { wrapper, replaces } = await mountRegister();
+  await fillField(wrapper, '.register-username', 'alice');
+  await fillField(wrapper, '.register-email', 'alice@example.com');
+  await fillField(wrapper, '.register-password', 'secret1');
+  await fillField(wrapper, '.register-confirm', 'secret1');
+  checkTerms(wrapper);
+  await flushPromises();
+  submitForm(wrapper);
+  await afterSubmit();
+  expect(wrapper.text().includes('Passwords do not match')).toBe(false);
+  expect(replaces).toEqual(['/']);
+  wrapper.unmount();
+});
diff --git a/modules/auth/web/pages/Register.vue b/modules/auth/web/pages/Register.vue
index f270bc11e..dbaec2b29 100644
--- a/modules/auth/web/pages/Register.vue
+++ b/modules/auth/web/pages/Register.vue
@@ -11,158 +11,185 @@ SPDX-License-Identifier: Apache-2.0
         :description="_t('Fill in the fields below to register')"
         class="register-card w-full"
       >
-        <form class="flex flex-col gap-4" @submit.prevent="handleRegister">
-          <ChoyFieldGroup class="gap-4">
-            <ChoyField v-if="error">
-              <div
-                class="flex items-center justify-between gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive"
-                role="alert"
-              >
-                <span class="min-w-0 leading-5">{{ error }}</span>
-                <button
-                  type="button"
-                  class="inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 text-destructive/70 appearance-none shadow-none outline-none hover:bg-destructive/15 hover:text-destructive focus-visible:ring-2 focus-visible:ring-destructive/40"
-                  :aria-label="_t('Close')"
-                  @click="error = ''"
+        <ChoyFormView
+          :store="formStore"
+          view-mode="create"
+          embedded
+          :show-header="false"
+          :show-actions="false"
+          :show-messages="false"
+          :resolve-record-id-from-route="false"
+          :initial-values="registerInitialValues"
+          :submit-handler="onRegisterSubmit"
+        >
+          <template #default="{ formData }">
+            <ChoyFieldGroup class="gap-4">
+              <ChoyField v-if="error">
+                <div
+                  class="flex items-center justify-between gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+                  role="alert"
                 >
-                  <X class="size-3.5" />
-                </button>
-              </div>
-            </ChoyField>
-
-            <ChoyField :data-invalid="fieldErrors.username ? true : undefined">
-              <ChoyFieldLabel for="register-username">{{ _t('Username') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="register-username"
-                v-model="form.username"
-                name="username"
-                type="text"
-                autocomplete="username"
+                  <span class="min-w-0 leading-5">{{ error }}</span>
+                  <button
+                    type="button"
+                    class="inline-flex size-6 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 text-destructive/70 appearance-none shadow-none outline-none hover:bg-destructive/15 hover:text-destructive focus-visible:ring-2 focus-visible:ring-destructive/40"
+                    :aria-label="_t('Close')"
+                    @click="error = ''"
+                  >
+                    <X class="size-3.5" />
+                  </button>
+                </div>
+              </ChoyField>
+
+              <div class="register-username">
+              <ChoyVarcharField
+                :store="formStore"
+                prop="Username"
                 :placeholder="_t('Enter username')"
-                :aria-invalid="fieldErrors.username ? true : undefined"
-                @blur="validateUsernameField"
+                autocomplete="username"
+                name="username"
+                id="register-username"
+                buffer-strategy="live"
+                :nullable="false"
+                :show-word-limit="false"
+                show-inline-error
+                :rules="usernameRules"
               />
-              <ChoyFieldError :errors="fieldErrors.username ? [fieldErrors.username] : []" />
-            </ChoyField>
-
-            <ChoyField :data-invalid="fieldErrors.email ? true : undefined">
-              <ChoyFieldLabel for="register-email">{{ _t('Email') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="register-email"
-                v-model="form.email"
-                name="email"
+              </div>
+              <div class="register-email">
+              <ChoyVarcharField
+                :store="formStore"
+                prop="Email"
                 type="email"
-                autocomplete="email"
                 :placeholder="_t('Enter email address')"
-                :aria-invalid="fieldErrors.email ? true : undefined"
-                @blur="validateEmailField"
+                autocomplete="email"
+                name="email"
+                id="register-email"
+                buffer-strategy="live"
+                :nullable="false"
+                :show-word-limit="false"
+                show-inline-error
+                :rules="emailRules"
               />
-              <ChoyFieldError :errors="fieldErrors.email ? [fieldErrors.email] : []" />
-            </ChoyField>
-
-            <ChoyField :data-invalid="fieldErrors.password ? true : undefined">
-              <ChoyFieldLabel for="register-password">{{ _t('Password') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="register-password"
-                v-model="form.password"
-                name="password"
+              </div>
+              <div class="register-password">
+              <ChoyVarcharField
+                :store="formStore"
+                prop="Password"
                 type="password"
-                autocomplete="new-password"
                 :placeholder="_t('Enter password')"
-                :aria-invalid="fieldErrors.password ? true : undefined"
-                @blur="validatePasswordField"
+                autocomplete="new-password"
+                name="password"
+                id="register-password"
+                buffer-strategy="live"
+                :nullable="false"
+                :show-word-limit="false"
+                show-inline-error
+                :rules="passwordRules"
               />
-              <ChoyFieldError :errors="fieldErrors.password ? [fieldErrors.password] : []" />
-            </ChoyField>
-
-            <ChoyField :data-invalid="fieldErrors.confirmPassword ? true : undefined">
-              <ChoyFieldLabel for="register-confirm">{{ _t('Confirm Password') }}</ChoyFieldLabel>
-              <ChoyInput
-                id="register-confirm"
-                v-model="form.confirmPassword"
-                name="confirmPassword"
+              </div>
+              <div class="register-confirm">
+              <ChoyVarcharField
+                :store="formStore"
+                prop="ConfirmPassword"
                 type="password"
-                autocomplete="new-password"
                 :placeholder="_t('Re-enter password')"
-                :aria-invalid="fieldErrors.confirmPassword ? true : undefined"
-                @blur="validateConfirmPasswordField"
+                autocomplete="new-password"
+                name="confirmPassword"
+                id="register-confirm"
+                buffer-strategy="live"
+                :nullable="false"
+                :show-word-limit="false"
+                show-inline-error
+                :rules="registerConfirmPasswordRules(_t, () => formData.Password)"
               />
-              <ChoyFieldError :errors="fieldErrors.confirmPassword ? [fieldErrors.confirmPassword] : []" />
-            </ChoyField>
+              </div>
 
-            <ChoyField orientation="horizontal" data-testid="register-terms">
-              <ChoyCheckbox
-                id="register-terms"
-                v-model="form.agreeTerms"
-                @update:model-value="validateAgreeTermsField"
-              />
-              <ChoyFieldLabel for="register-terms" class="font-normal">
-                {{ _t('I have read and agree to') }}
-                <a
-                  href="#"
-                  target="_blank"
-                  class="text-primary underline-offset-4 hover:underline"
-                  @click.stop
-                >
-                  {{ _t('Terms of Service') }}
-                </a>
-                {{ _t('and') }}
-                <a
-                  href="#"
-                  target="_blank"
-                  class="text-primary underline-offset-4 hover:underline"
-                  @click.stop
-                >
-                  {{ _t('Privacy Policy') }}
-                </a>
-              </ChoyFieldLabel>
-            </ChoyField>
-            <ChoyFieldError :errors="fieldErrors.agreeTerms ? [fieldErrors.agreeTerms] : []" />
+              <div class="flex items-start gap-2" data-testid="register-terms">
+                <ChoyBooleanField
+                  :store="formStore"
+                  prop="AgreeTerms"
+                  widget="checkbox"
+                  :label="''"
+                  render-mode="inline"
+                  buffer-strategy="live"
+                  show-inline-error
+                  :rules="agreeTermsRules"
+                />
+                <label for="fld-AgreeTerms" class="mt-1 text-sm leading-5">
+                  {{ _t('I have read and agree to') }}
+                  <a
+                    href="#"
+                    target="_blank"
+                    class="text-primary underline-offset-4 hover:underline"
+                    @click.stop
+                  >
+                    {{ _t('Terms of Service') }}
+                  </a>
+                  {{ _t('and') }}
+                  <a
+                    href="#"
+                    target="_blank"
+                    class="text-primary underline-offset-4 hover:underline"
+                    @click.stop
+                  >
+                    {{ _t('Privacy Policy') }}
+                  </a>
+                </label>
+              </div>
 
-            <ChoyField>
-              <ChoyButton
-                type="submit"
-                class="submit-button w-full"
-                :disabled="loading || !form.agreeTerms"
-              >
-                {{ _t('Create Account') }}
-              </ChoyButton>
-              <ChoyFieldDescription class="text-center">
-                {{ _t('Already have an account?') }}
-                <router-link to="/login" class="text-primary hover:underline">{{
-                  _t('Log in now')
-                }}</router-link>
-              </ChoyFieldDescription>
-            </ChoyField>
-          </ChoyFieldGroup>
-        </form>
+              <ChoyField>
+                <ChoyButton
+                  type="submit"
+                  class="submit-button w-full"
+                  :disabled="loading || !formData.AgreeTerms"
+                >
+                  {{ _t('Create Account') }}
+                </ChoyButton>
+                <ChoyFieldDescription class="text-center">
+                  {{ _t('Already have an account?') }}
+                  <router-link to="/login" class="text-primary hover:underline">{{
+                    _t('Log in now')
+                  }}</router-link>
+                </ChoyFieldDescription>
+              </ChoyField>
+            </ChoyFieldGroup>
+          </template>
+        </ChoyFormView>
       </ChoyCard>
     </AuthPanel>
   </ChoyPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { X } from 'lucide-vue-next';
 import { useAuthStore } from '../stores/auth';
-import { ChoysumError } from '../error';
 import AuthPanel from '../components/AuthPanel.vue';
 import {
   ChoyPage,
   ChoyCard,
   ChoyButton,
-  ChoyInput,
-  ChoyCheckbox,
   ChoyField,
   ChoyFieldDescription,
-  ChoyFieldError,
   ChoyFieldGroup,
-  ChoyFieldLabel,
+  ChoyFormView,
+  ChoyVarcharField,
+  ChoyBooleanField,
+  createLocalFormStore,
 } from '@/web';
 import { createTranslate } from '@/web/web/i18n';
-import { resolveLoginRedirect } from './login_form';
+import { resolveLoginRedirect, runHandledAuthSubmit } from './login_form';
+import {
+  registerAgreeTermsRules,
+  registerConfirmPasswordRules,
+  registerEmailRules,
+  registerPasswordRules,
+  registerUsernameRules,
+  runRegisterSubmit,
+} from './register_form';
 
 const { _t } = createTranslate('auth', { scope: 'web/pages/Register' });
 
@@ -171,126 +198,57 @@ const route = useRoute();
 const authStore = useAuthStore();
 const { loading } = storeToRefs(authStore);
 
-const form = reactive({
-  username: '',
-  email: '',
-  password: '',
-  confirmPassword: '',
-  fullName: '',
-  agreeTerms: false,
+const registerInitialValues = {
+  Username: '',
+  Email: '',
+  Password: '',
+  ConfirmPassword: '',
+  AgreeTerms: false,
+};
+
+const formStore = createLocalFormStore({
+  fields: [
+    { name: 'Username', label: _t('Username'), type: 'varchar' },
+    { name: 'Email', label: _t('Email'), type: 'varchar' },
+    { name: 'Password', label: _t('Password'), type: 'varchar' },
+    { name: 'ConfirmPassword', label: _t('Confirm Password'), type: 'varchar' },
+    { name: 'AgreeTerms', label: _t('I have read and agree to'), type: 'boolean' },
+  ],
+  initialValues: registerInitialValues,
+  storeId: 'auth.register',
 });
 
-const fieldErrors = reactive({
-  username: '',
-  email: '',
-  password: '',
-  confirmPassword: '',
-  agreeTerms: '',
-});
+const usernameRules = registerUsernameRules(_t);
+const emailRules = registerEmailRules(_t);
+const passwordRules = registerPasswordRules(_t);
+const agreeTermsRules = registerAgreeTermsRules(_t);
 
 const error = ref('');
 
-function validateUsernameField(): boolean {
-  const value = form.username;
-  if (!value) {
-    fieldErrors.username = _t('Enter username');
-    return false;
-  }
-  if (value.length < 3) {
-    fieldErrors.username = _t('Username must be at least 3 characters');
-    return false;
-  }
-  if (!/^[a-zA-Z0-9_\-\.]+$/.test(value)) {
-    fieldErrors.username = _t('Username can only contain letters, numbers, underscores, hyphens, and dots');
-    return false;
-  }
-  fieldErrors.username = '';
-  return true;
-}
-
-function validateEmailField(): boolean {
-  const value = form.email;
-  if (!value) {
-    fieldErrors.email = _t('Enter email address');
-    return false;
-  }
-  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) {
-    fieldErrors.email = _t('Enter a valid email address');
-    return false;
-  }
-  fieldErrors.email = '';
-  return true;
-}
-
-function validatePasswordField(): boolean {
-  const value = form.password;
-  if (!value) {
-    fieldErrors.password = _t('Enter password');
-    return false;
-  }
-  if (value.length < 6) {
-    fieldErrors.password = _t('Password must be at least 6 characters');
-    return false;
-  }
-  fieldErrors.password = '';
-  if (form.confirmPassword) {
-    validateConfirmPasswordField();
-  }
-  return true;
-}
-
-function validateConfirmPasswordField(): boolean {
-  const value = form.confirmPassword;
-  if (!value) {
-    fieldErrors.confirmPassword = _t('Re-enter password');
-    return false;
-  }
-  if (value !== form.password) {
-    fieldErrors.confirmPassword = _t('Passwords do not match');
-    return false;
-  }
-  fieldErrors.confirmPassword = '';
-  return true;
-}
-
-function validateAgreeTermsField(): boolean {
-  if (!form.agreeTerms) {
-    fieldErrors.agreeTerms = _t('You must agree to the Terms of Service and Privacy Policy');
-    return false;
-  }
-  fieldErrors.agreeTerms = '';
-  return true;
+function setPageError(message: string) {
+  error.value = message;
 }
 
-function validateForm(): boolean {
-  const results = [
-    validateUsernameField(),
-    validateEmailField(),
-    validatePasswordField(),
-    validateConfirmPasswordField(),
-    validateAgreeTermsField(),
-  ];
-  return results.every(Boolean);
-}
-
-/**
- * Validate the registration form and create a new user session.
- */
-async function handleRegister() {
-  if (loading.value || !validateForm()) return;
-
-  try {
-    error.value = '';
-    await authStore.register(form.username, form.email, form.password, form.fullName ? { fullName: form.fullName } : {});
-    await authStore.login(form.username, form.password);
-    router.replace(resolveLoginRedirect(route.query.redirect?.toString()));
-  } catch (err) {
-    if (err instanceof ChoysumError) {
-      error.value = err.message;
-    } else {
-      error.value = _t('Registration failed. Please try again later.');
-      console.error('Registration flow failed:', err);
-    }
-  }
+async function onRegisterSubmit(ctx: { formData: Record<string, unknown> }) {
+  const data = ctx.formData;
+  const registerFn = authStore.register.bind(authStore);
+  const loginFn = authStore.login.bind(authStore);
+  return runHandledAuthSubmit({
+    submit: () =>
+      runRegisterSubmit({
+        loading: !!loading.value,
+        username: String(data.Username ?? ''),
+        email: String(data.Email ?? ''),
+        password: String(data.Password ?? ''),
+        registerFailedMessage: _t('Registration failed. Please try again later.'),
+        loginFailedMessage: _t('Your account was created, but signing in failed. Please log in.'),
+        register: (username, email, password) => registerFn(username, email, password),
+        login: (username, password) => loginFn(username, password),
+        setError: setPageError,
+      }),
+    fallbackMessage: _t('Registration failed. Please try again later.'),
+    setError: setPageError,
+    onSuccess: () => router.replace(resolveLoginRedirect(route.query.redirect?.toString())),
+  });
 }
 </script>
diff --git a/modules/auth/web/pages/login_form.test.ts b/modules/auth/web/pages/login_form.test.ts
index af7ef0174..f8c11c3cf 100644
--- a/modules/auth/web/pages/login_form.test.ts
+++ b/modules/auth/web/pages/login_form.test.ts
@@ -10,6 +10,7 @@ import {
   resolveLoginRedirect,
   resolveLoginRedirectOrigin,
   runLoginSubmit,
+  runHandledAuthSubmit,
   validateLoginForm,
   type LoginFieldErrors,
   type LoginFormFields,
@@ -180,14 +181,13 @@ test('runLoginSubmit: skips while loading', async () => {
   let calls = 0;
   const ok = await runLoginSubmit({
     loading: true,
-    form: { username: 'a', password: 'b' },
-    fieldErrors: emptyErrors(),
-    t,
+    username: 'a',
+    password: 'b',
+    rememberMe: true,
     loginFailedMessage: 'Login failed. Please try again later.',
     login: async () => {
       calls += 1;
     },
-    rememberMe: true,
     setError: () => undefined,
   });
   expect(ok).toBe(false);
@@ -199,14 +199,13 @@ test('runLoginSubmit: skips invalid form', async () => {
   const errors: string[] = [];
   const ok = await runLoginSubmit({
     loading: false,
-    form: { username: '', password: '' },
-    fieldErrors: emptyErrors(),
-    t,
+    username: '',
+    password: '',
+    rememberMe: true,
     loginFailedMessage: 'Login failed. Please try again later.',
     login: async () => {
       calls += 1;
     },
-    rememberMe: true,
     setError: m => errors.push(m),
   });
   expect(ok).toBe(false);
@@ -220,14 +219,13 @@ test('runLoginSubmit: returns true on success and trims username', async () => {
   const seen: string[] = [];
   const ok = await runLoginSubmit({
     loading: false,
-    form: { username: '  admin  ', password: 'secret' },
-    fieldErrors: emptyErrors(),
-    t,
+    username: '  admin  ',
+    password: 'secret',
+    rememberMe: false,
     loginFailedMessage: 'Login failed. Please try again later.',
     login: async (username, password) => {
       seen.push(username, password);
     },
-    rememberMe: false,
     setError: m => errors.push(m),
   });
   expect(ok).toBe(true);
@@ -239,16 +237,70 @@ test('runLoginSubmit: maps failures to setError', async () => {
   const errors: string[] = [];
   const ok = await runLoginSubmit({
     loading: false,
-    form: { username: 'admin', password: 'secret' },
-    fieldErrors: emptyErrors(),
-    t,
+    username: 'admin',
+    password: 'secret',
+    rememberMe: true,
     loginFailedMessage: 'Login failed. Please try again later.',
     login: async () => {
       throw new ChoysumError({ domain: 'auth', code: 'INVALID_CREDENTIALS', message: 'nope' });
     },
-    rememberMe: true,
     setError: m => errors.push(m),
   });
   expect(ok).toBe(false);
   expect(errors).toEqual(['', 'nope']);
 });
+
+test('runHandledAuthSubmit: redirects after success and skips on failure', async () => {
+  let redirected = 0;
+  const errors: string[] = [];
+  const ok = await runHandledAuthSubmit({
+    submit: async () => true,
+    fallbackMessage: 'fallback',
+    setError: m => errors.push(m),
+    onSuccess: () => {
+      redirected += 1;
+    },
+  });
+  expect(ok).toEqual({ handled: true, skipSuccessMessage: true });
+  expect(redirected).toBe(1);
+  const failed = await runHandledAuthSubmit({
+    submit: async () => false,
+    fallbackMessage: 'fallback',
+    setError: m => errors.push(m),
+    onSuccess: () => {
+      redirected += 1;
+    },
+  });
+  expect(failed).toEqual({ handled: true, skipSuccessMessage: true });
+  expect(redirected).toBe(1);
+  expect(errors).toEqual([]);
+});
+
+test('runHandledAuthSubmit: maps thrown Error and unknown values', async () => {
+  const errors: string[] = [];
+  let redirected = 0;
+  const fromError = await runHandledAuthSubmit({
+    submit: async () => {
+      throw new Error('nope');
+    },
+    fallbackMessage: 'fallback',
+    setError: m => errors.push(m),
+    onSuccess: () => {
+      redirected += 1;
+    },
+  });
+  const fromUnknown = await runHandledAuthSubmit({
+    submit: async () => {
+      throw 'boom';
+    },
+    fallbackMessage: 'fallback',
+    setError: m => errors.push(m),
+    onSuccess: () => {
+      redirected += 1;
+    },
+  });
+  expect(fromError).toEqual({ handled: true, skipSuccessMessage: true });
+  expect(fromUnknown).toEqual({ handled: true, skipSuccessMessage: true });
+  expect(errors).toEqual(['nope', 'fallback']);
+  expect(redirected).toBe(0);
+});
diff --git a/modules/auth/web/pages/login_form.ts b/modules/auth/web/pages/login_form.ts
index 8343a9700..8e72d57d0 100644
--- a/modules/auth/web/pages/login_form.ts
+++ b/modules/auth/web/pages/login_form.ts
@@ -121,6 +121,34 @@ export function normalizeLoginRedirectOrigin(
   }
 }
 
+export type LoginClientRule = {
+  required?: boolean;
+  message?: string;
+  validator?: (rule: unknown, value: unknown, cb: (error?: Error) => void) => void;
+};
+
+/**
+ * Username RuleItem: empty or whitespace-only is invalid (matches historical trim).
+ */
+export function loginUsernameRules(t: (msg: string) => string): LoginClientRule[] {
+  return [
+    {
+      validator: (_rule: unknown, value: unknown, cb: (error?: Error) => void) => {
+        if (!String(value ?? '').trim()) {
+          cb(new Error(t('Enter username')));
+          return;
+        }
+        cb();
+      },
+    },
+  ];
+}
+
+/** Password RuleItem: empty / null is invalid; whitespace-only is allowed. */
+export function loginPasswordRules(t: (msg: string) => string): LoginClientRule[] {
+  return [{ required: true, message: t('Enter password') }];
+}
+
 /**
  * Validate required login fields and write field-level error messages.
  */
@@ -157,29 +185,51 @@ export function formatLoginError(err: unknown, fallback: string): string {
 
 /**
  * Run the login store call and return whether redirect should follow.
- * Returns false when validation fails or a submit is already in flight.
+ * Field-level required checks belong on FormView Field rules; this only
+ * skips in-flight submits and empty credentials as a last guard.
  */
 export async function runLoginSubmit(opts: {
   loading: boolean;
-  form: LoginFormFields;
-  fieldErrors: LoginFieldErrors;
-  t: (msg: string) => string;
+  username: string;
+  password: string;
+  rememberMe: boolean;
   loginFailedMessage: string;
   login: (username: string, password: string, csrf: string, device: string, rememberMe: boolean) => Promise<void>;
-  rememberMe: boolean;
   setError: (message: string) => void;
 }): Promise<boolean> {
   if (opts.loading) return false;
-  // Clear any previous server error before re-validating so stale alerts
+  // Clear any previous server error before a new attempt so stale alerts
   // never sit next to freshly surfaced field errors.
   opts.setError('');
-  if (!validateLoginForm(opts.form, opts.fieldErrors, opts.t)) return false;
+  if (!String(opts.username ?? '').trim() || !opts.password) return false;
   try {
     // Trim username only; password whitespace can be intentional.
-    await opts.login(opts.form.username.trim(), opts.form.password, '', '', opts.rememberMe);
+    await opts.login(String(opts.username).trim(), opts.password, '', '', opts.rememberMe);
     return true;
   } catch (err) {
     opts.setError(formatLoginError(err, opts.loginFailedMessage));
     return false;
   }
 }
+
+/**
+ * Run an auth page submit handler and always mark it handled.
+ * Redirect/navigation stays outside the submit try so a rejected
+ * router.replace is not reported as a credential failure.
+ */
+export async function runHandledAuthSubmit(opts: {
+  submit: () => Promise<boolean>;
+  fallbackMessage: string;
+  setError: (message: string) => void;
+  onSuccess: () => void;
+}): Promise<{ handled: true; skipSuccessMessage: true }> {
+  let ok = false;
+  try {
+    ok = await opts.submit();
+  } catch (err) {
+    opts.setError(err instanceof Error ? err.message : opts.fallbackMessage);
+    return { handled: true, skipSuccessMessage: true };
+  }
+  if (ok) opts.onSuccess();
+  return { handled: true, skipSuccessMessage: true };
+}
diff --git a/modules/auth/web/pages/register_form.test.ts b/modules/auth/web/pages/register_form.test.ts
new file mode 100644
index 000000000..774fb7790
--- /dev/null
+++ b/modules/auth/web/pages/register_form.test.ts
@@ -0,0 +1,235 @@
+// SPDX-FileCopyrightText: 2026-present Brian Wang <wangbuke@gmail.com>
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChoysumError } from '../error';
+import {
+  registerAgreeTermsError,
+  registerConfirmPasswordError,
+  registerEmailError,
+  registerPasswordError,
+  registerUsernameError,
+  runRegisterSubmit,
+  validateRegisterForm,
+} from './register_form';
+
+const t = (msg: string) => msg;
+
+const loginFailedMessage = 'Your account was created, but signing in failed. Please log in.';
+
+test('registerUsernameError: required, length, and charset', () => {
+  expect(registerUsernameError('', t)).toBe('Enter username');
+  expect(registerUsernameError('ab', t)).toBe('Username must be at least 3 characters');
+  expect(registerUsernameError('bad name', t)).toBe(
+    'Username can only contain letters, numbers, underscores, hyphens, and dots',
+  );
+  expect(registerUsernameError('ok_user-1.x', t)).toBe('');
+});
+
+test('registerEmailError: required and format', () => {
+  expect(registerEmailError('', t)).toBe('Enter email address');
+  expect(registerEmailError('not-an-email', t)).toBe('Enter a valid email address');
+  expect(registerEmailError('user@example.com', t)).toBe('');
+});
+
+test('registerPasswordError: required and min length', () => {
+  expect(registerPasswordError('', t)).toBe('Enter password');
+  expect(registerPasswordError('12345', t)).toBe('Password must be at least 6 characters');
+  expect(registerPasswordError('123456', t)).toBe('');
+});
+
+test('registerConfirmPasswordError: required and match', () => {
+  expect(registerConfirmPasswordError('', 'secret', t)).toBe('Re-enter password');
+  expect(registerConfirmPasswordError('other', 'secret', t)).toBe('Passwords do not match');
+  expect(registerConfirmPasswordError('secret', 'secret', t)).toBe('');
+});
+
+test('registerAgreeTermsError: must be true', () => {
+  expect(registerAgreeTermsError(false, t)).toBe(
+    'You must agree to the Terms of Service and Privacy Policy',
+  );
+  expect(registerAgreeTermsError(true, t)).toBe('');
+});
+
+test('validateRegisterForm: collects all field errors', () => {
+  const errors = validateRegisterForm(
+    { username: '', email: '', password: '', confirmPassword: '', agreeTerms: false },
+    t,
+  );
+  expect(errors.length).toBe(5);
+  expect(
+    validateRegisterForm(
+      {
+        username: 'alice',
+        email: 'alice@example.com',
+        password: 'secret1',
+        confirmPassword: 'secret1',
+        agreeTerms: true,
+      },
+      t,
+    ),
+  ).toEqual([]);
+});
+
+test('runRegisterSubmit: skips while loading', async () => {
+  let calls = 0;
+  const ok = await runRegisterSubmit({
+    loading: true,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => {
+      calls += 1;
+    },
+    login: async () => {
+      calls += 1;
+    },
+    setError: () => undefined,
+  });
+  expect(ok).toBe(false);
+  expect(calls).toBe(0);
+});
+
+test('runRegisterSubmit: skips empty credentials', async () => {
+  let calls = 0;
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: '  ',
+    email: '',
+    password: '',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => {
+      calls += 1;
+    },
+    login: async () => {
+      calls += 1;
+    },
+    setError: () => undefined,
+  });
+  expect(ok).toBe(false);
+  expect(calls).toBe(0);
+});
+
+test('runRegisterSubmit: register then login on success', async () => {
+  const seen: string[] = [];
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async (username, email, password) => {
+      seen.push('reg', username, email, password);
+    },
+    login: async (username, password) => {
+      seen.push('login', username, password);
+    },
+    setError: () => undefined,
+  });
+  expect(ok).toBe(true);
+  expect(seen).toEqual(['reg', 'alice', 'a@b.co', 'secret1', 'login', 'alice', 'secret1']);
+});
+
+test('runRegisterSubmit: trims username and email', async () => {
+  const seen: string[] = [];
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: '  alice  ',
+    email: '  a@b.co  ',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async (username, email, password) => {
+      seen.push('reg', username, email, password);
+    },
+    login: async (username, password) => {
+      seen.push('login', username, password);
+    },
+    setError: () => undefined,
+  });
+  expect(ok).toBe(true);
+  expect(seen).toEqual(['reg', 'alice', 'a@b.co', 'secret1', 'login', 'alice', 'secret1']);
+});
+
+test('runRegisterSubmit: maps ChoysumError to setError', async () => {
+  const errors: string[] = [];
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => {
+      throw new ChoysumError({ domain: 'auth', code: 'REGISTRATION_FAILED', message: 'taken' });
+    },
+    login: async () => undefined,
+    setError: m => errors.push(m),
+  });
+  expect(ok).toBe(false);
+  expect(errors).toEqual(['', 'taken']);
+});
+
+test('runRegisterSubmit: unknown errors use fallback', async () => {
+  const errors: string[] = [];
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => {
+      throw new Error('boom');
+    },
+    login: async () => undefined,
+    setError: m => errors.push(m),
+  });
+  expect(ok).toBe(false);
+  expect(errors).toEqual(['', 'Registration failed. Please try again later.']);
+});
+
+test('runRegisterSubmit: login ChoysumError after register uses loginFailedMessage', async () => {
+  const errors: string[] = [];
+  let registered = false;
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => {
+      registered = true;
+    },
+    login: async () => {
+      throw new ChoysumError({ domain: 'auth', code: 'INVALID_CREDENTIALS', message: 'nope' });
+    },
+    setError: m => errors.push(m),
+  });
+  expect(registered).toBe(true);
+  expect(ok).toBe(false);
+  expect(errors).toEqual(['', 'nope']);
+});
+
+test('runRegisterSubmit: login unknown error after register uses loginFailedMessage', async () => {
+  const errors: string[] = [];
+  const ok = await runRegisterSubmit({
+    loading: false,
+    username: 'alice',
+    email: 'a@b.co',
+    password: 'secret1',
+    registerFailedMessage: 'Registration failed. Please try again later.',
+    loginFailedMessage,
+    register: async () => undefined,
+    login: async () => {
+      throw new Error('boom');
+    },
+    setError: m => errors.push(m),
+  });
+  expect(ok).toBe(false);
+  expect(errors).toEqual(['', loginFailedMessage]);
+});
diff --git a/modules/auth/web/pages/register_form.ts b/modules/auth/web/pages/register_form.ts
new file mode 100644
index 000000000..782b923b3
--- /dev/null
+++ b/modules/auth/web/pages/register_form.ts
@@ -0,0 +1,151 @@
+// SPDX-FileCopyrightText: 2026-present Brian Wang <wangbuke@gmail.com>
+// SPDX-License-Identifier: Apache-2.0
+
+import { ChoysumError } from '../error';
+import { formatLoginError } from './login_form';
+
+export type RegisterClientRule = {
+  required?: boolean;
+  message?: string;
+  validator?: (rule: unknown, value: unknown, cb: (error?: Error) => void) => void;
+};
+
+export type RegisterFormFields = {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  agreeTerms: boolean;
+};
+
+function ruleFromError(check: (value: unknown) => string): RegisterClientRule {
+  return {
+    validator: (_rule: unknown, value: unknown, cb: (error?: Error) => void) => {
+      const message = check(value);
+      if (message) {
+        cb(new Error(message));
+        return;
+      }
+      cb();
+    },
+  };
+}
+
+export function registerUsernameError(value: unknown, t: (msg: string) => string): string {
+  const raw = String(value ?? '');
+  if (!raw) return t('Enter username');
+  if (raw.length < 3) return t('Username must be at least 3 characters');
+  if (!/^[a-zA-Z0-9_\-\.]+$/.test(raw)) {
+    return t('Username can only contain letters, numbers, underscores, hyphens, and dots');
+  }
+  return '';
+}
+
+export function registerEmailError(value: unknown, t: (msg: string) => string): string {
+  const raw = String(value ?? '');
+  if (!raw) return t('Enter email address');
+  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(raw)) {
+    return t('Enter a valid email address');
+  }
+  return '';
+}
+
+export function registerPasswordError(value: unknown, t: (msg: string) => string): string {
+  const raw = String(value ?? '');
+  if (!raw) return t('Enter password');
+  if (raw.length < 6) return t('Password must be at least 6 characters');
+  return '';
+}
+
+export function registerConfirmPasswordError(
+  value: unknown,
+  password: unknown,
+  t: (msg: string) => string,
+): string {
+  const raw = String(value ?? '');
+  if (!raw) return t('Re-enter password');
+  if (raw !== String(password ?? '')) return t('Passwords do not match');
+  return '';
+}
+
+export function registerAgreeTermsError(value: unknown, t: (msg: string) => string): string {
+  if (value !== true) {
+    return t('You must agree to the Terms of Service and Privacy Policy');
+  }
+  return '';
+}
+
+export function registerUsernameRules(t: (msg: string) => string): RegisterClientRule[] {
+  return [ruleFromError(value => registerUsernameError(value, t))];
+}
+
+export function registerEmailRules(t: (msg: string) => string): RegisterClientRule[] {
+  return [ruleFromError(value => registerEmailError(value, t))];
+}
+
+export function registerPasswordRules(t: (msg: string) => string): RegisterClientRule[] {
+  return [ruleFromError(value => registerPasswordError(value, t))];
+}
+
+export function registerConfirmPasswordRules(
+  t: (msg: string) => string,
+  getPassword: () => unknown,
+): RegisterClientRule[] {
+  return [ruleFromError(value => registerConfirmPasswordError(value, getPassword(), t))];
+}
+
+export function registerAgreeTermsRules(t: (msg: string) => string): RegisterClientRule[] {
+  return [ruleFromError(value => registerAgreeTermsError(value, t))];
+}
+
+export function validateRegisterForm(form: RegisterFormFields, t: (msg: string) => string): string[] {
+  return [
+    registerUsernameError(form.username, t),
+    registerEmailError(form.email, t),
+    registerPasswordError(form.password, t),
+    registerConfirmPasswordError(form.confirmPassword, form.password, t),
+    registerAgreeTermsError(form.agreeTerms, t),
+  ].filter(Boolean);
+}
+
+/**
+ * Create the account then log in. Field rules run in FormView before this;
+ * empty credentials are a last guard if submit bypasses those rules.
+ */
+export async function runRegisterSubmit(opts: {
+  loading: boolean;
+  username: string;
+  email: string;
+  password: string;
+  registerFailedMessage: string;
+  loginFailedMessage: string;
+  register: (username: string, email: string, password: string) => Promise<unknown>;
+  login: (username: string, password: string) => Promise<unknown>;
+  setError: (message: string) => void;
+}): Promise<boolean> {
+  if (opts.loading) return false;
+  opts.setError('');
+  const username = String(opts.username ?? '').trim();
+  const email = String(opts.email ?? '').trim();
+  if (!username || !email || !opts.password) {
+    return false;
+  }
+  try {
+    await opts.register(username, email, opts.password);
+  } catch (err) {
+    if (err instanceof ChoysumError) {
+      opts.setError(err.message || opts.registerFailedMessage);
+    } else {
+      console.error('Registration flow failed:', err);
+      opts.setError(opts.registerFailedMessage);
+    }
+    return false;
+  }
+  try {
+    await opts.login(username, opts.password);
+    return true;
+  } catch (err) {
+    opts.setError(formatLoginError(err, opts.loginFailedMessage));
+    return false;
+  }
+}
diff --git a/modules/web/web/components/field/FieldBase.test.ts b/modules/web/web/components/field/FieldBase.test.ts
index 7248eeb97..50d865375 100644
--- a/modules/web/web/components/field/FieldBase.test.ts
+++ b/modules/web/web/components/field/FieldBase.test.ts
@@ -184,6 +184,8 @@ describe('FieldBase label and help', () => {
       renderMode: 'form',
     });
     expect(m.q('.choy-field-base__label-text')?.textContent).toContain('Access Token ID');
+    expect(String(m.q('.choy-field-base__label-text')?.tagName || '').toLowerCase()).toBe('label');
+    expect(m.q('.choy-field-base__label-text')?.getAttribute('for')).toBe('fld-AccessTokenId');
     m.unmount();
   });
 
diff --git a/modules/web/web/components/field/FieldBase.vue b/modules/web/web/components/field/FieldBase.vue
index 51747c550..1762079d0 100644
--- a/modules/web/web/components/field/FieldBase.vue
+++ b/modules/web/web/components/field/FieldBase.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: Apache-2.0
     v-bind="formItemProps"
   >
     <div class="choy-field-base__label mb-1 inline-flex max-w-full items-center gap-1 text-xs font-medium text-muted-foreground">
-      <span class="choy-field-base__label-text min-w-0">{{ resolvedLabel }}</span>
+      <label class="choy-field-base__label-text min-w-0" :for="inputIdForm || undefined">{{ resolvedLabel }}</label>
       <button
         v-if="effectiveHelp"
         type="button"
diff --git a/modules/web/web/components/view/ChoyFormView.vue b/modules/web/web/components/view/ChoyFormView.vue
index 797a6ee02..673079f60 100644
--- a/modules/web/web/components/view/ChoyFormView.vue
+++ b/modules/web/web/components/view/ChoyFormView.vue
@@ -93,6 +93,7 @@ SPDX-License-Identifier: Apache-2.0
     <!-- Always render the form; busy state is local (no Element Plus v-loading). -->
     <div
       class="form-view__content relative py-3"
+      data-anchor="choy.form-view"
       :class="{ 'form-view__content--busy pointer-events-none opacity-65': formBusy }"
       :aria-busy="formBusy || undefined"
     >