diff --git a/panel/lab/components/login/login-code/index.php b/panel/lab/components/login/login-code/index.php
new file mode 100644
index 0000000000..939f9c01da
--- /dev/null
+++ b/panel/lab/components/login/login-code/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-login-code'
+];
diff --git a/panel/lab/components/login/login-code/index.vue b/panel/lab/components/login/login-code/index.vue
new file mode 100644
index 0000000000..a9581334a8
--- /dev/null
+++ b/panel/lab/components/login/login-code/index.vue
@@ -0,0 +1,15 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-login-code />
+		</k-lab-example>
+		<k-lab-example label="Prefilled">
+			<k-login-code value="123456" />
+		</k-lab-example>
+		<k-lab-example label="Pending info">
+			<k-login-code
+				:pending="{ email: 'homer@simpson.com', challenge: 'totp' }"
+			/>
+		</k-lab-example>
+	</k-lab-examples>
+</template>
diff --git a/panel/lab/components/login/login/index.php b/panel/lab/components/login/login/index.php
new file mode 100644
index 0000000000..681fdf8c82
--- /dev/null
+++ b/panel/lab/components/login/login/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-login'
+];
diff --git a/panel/lab/components/login/login/index.vue b/panel/lab/components/login/login/index.vue
new file mode 100644
index 0000000000..7b201b4df2
--- /dev/null
+++ b/panel/lab/components/login/login/index.vue
@@ -0,0 +1,26 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-login />
+		</k-lab-example>
+		<k-lab-example label="With password">
+			<k-login :methods="['password']" />
+		</k-lab-example>
+		<k-lab-example label="Prefilled">
+			<k-login
+				:methods="['password']"
+				:value="{
+					email: 'homer@simpson.com',
+					password: 'password1',
+					remember: true
+				}"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Toggle between login methods">
+			<k-login :methods="['password', 'code']" />
+		</k-lab-example>
+		<k-lab-example label="Password reset">
+			<k-login :methods="['password', 'password-reset']" />
+		</k-lab-example>
+	</k-lab-examples>
+</template>
diff --git a/panel/src/components/Forms/Login.vue b/panel/src/components/Forms/Login.vue
index 27b2535048..7539690151 100644
--- a/panel/src/components/Forms/Login.vue
+++ b/panel/src/components/Forms/Login.vue
@@ -5,7 +5,7 @@
 				v-if="canToggle === true"
 				class="k-login-toggler"
 				type="button"
-				@click="toggleForm"
+				@click="toggle"
 			>
 				{{ toggleText }}
 			</button>
@@ -19,14 +19,15 @@
 			/>
 		</div>
 
-		<div class="k-login-buttons">
-			<span v-if="isResetForm === false" class="k-login-checkbox">
-				<k-checkbox-input
-					:value="user.remember"
-					:label="$t('login.remember')"
-					@input="user.remember = $event"
-				/>
-			</span>
+		<footer class="k-login-buttons">
+			<k-checkbox-input
+				v-if="isResetForm === false"
+				:label="$t('login.remember')"
+				:checked="user.remember"
+				:value="user.remember"
+				@input="user.remember = $event"
+			/>
+
 			<k-button
 				class="k-login-button"
 				icon="check"
@@ -35,10 +36,9 @@
 				type="submit"
 				variant="filled"
 			>
-				{{ $t("login" + (isResetForm ? ".reset" : "")) }}
-				<template v-if="isLoading"> … </template>
+				{{ submitText }}
 			</k-button>
-		</div>
+		</footer>
 	</form>
 </template>
 
@@ -48,12 +48,18 @@ export const props = {
 		/**
 		 * List of available login method names
 		 */
-		methods: Array,
+		methods: {
+			type: Array,
+			default: () => []
+		},
 		/**
 		 * Values to prefill the inputs
-		 * @value { email: String, password: String }
+		 * @value { email: String, password: String, remember: Boolean }
 		 */
-		value: Object
+		value: {
+			type: Object,
+			default: () => ({})
+		}
 	}
 };
 
@@ -62,22 +68,36 @@ export default {
 	emits: ["error"],
 	data() {
 		return {
-			currentForm: null,
+			mode: null,
 			isLoading: false,
 			user: {
-				email: this.value.email ?? "",
-				password: this.value.password ?? "",
-				remember: false
+				email: "",
+				password: "",
+				remember: false,
+				...this.value
 			}
 		};
 	},
 	computed: {
+		alternateMode() {
+			if (this.form === "email-password") {
+				return "email";
+			}
+
+			return "email-password";
+		},
 		canToggle() {
+			if (this.codeMode === null) {
+				return false;
+			}
+
+			if (this.methods.includes("password") === false) {
+				return false;
+			}
+
 			return (
-				this.codeMode !== null &&
-				this.methods.includes("password") === true &&
-				(this.methods.includes("password-reset") === true ||
-					this.methods.includes("code") === true)
+				this.methods.includes("password-reset") === true ||
+				this.methods.includes("code") === true
 			);
 		},
 		codeMode() {
@@ -90,7 +110,7 @@ export default {
 			return null;
 		},
 		fields() {
-			let fields = {
+			const fields = {
 				email: {
 					autofocus: true,
 					label: this.$t("email"),
@@ -114,8 +134,8 @@ export default {
 			return fields;
 		},
 		form() {
-			if (this.currentForm) {
-				return this.currentForm;
+			if (this.mode) {
+				return this.mode;
 			}
 
 			if (this.methods[0] === "password") {
@@ -127,28 +147,30 @@ export default {
 		isResetForm() {
 			return this.codeMode === "password-reset" && this.form === "email";
 		},
+		submitText() {
+			const suffix = this.isLoading ? " …" : "";
+
+			if (this.isResetForm) {
+				return this.$t("login.reset") + suffix;
+			}
+
+			return this.$t("login") + suffix;
+		},
 		toggleText() {
 			return this.$t(
-				"login.toggleText." + this.codeMode + "." + this.formOpposite(this.form)
+				"login.toggleText." + this.codeMode + "." + this.alternateMode
 			);
 		}
 	},
 	methods: {
-		formOpposite(input) {
-			if (input === "email-password") {
-				return "email";
-			} else {
-				return "email-password";
-			}
-		},
 		async login() {
 			this.$emit("error", null);
 			this.isLoading = true;
 
 			// clear field data that is not needed for login
-			let user = Object.assign({}, this.user);
+			const user = { ...this.user };
 
-			if (this.currentForm === "email") {
+			if (this.mode === "email") {
 				user.password = null;
 			}
 
@@ -173,10 +195,35 @@ export default {
 				this.isLoading = false;
 			}
 		},
-		toggleForm() {
-			this.currentForm = this.formOpposite(this.form);
+		toggle() {
+			this.mode = this.alternateMode;
 			this.$refs.fieldset.focus("email");
 		}
 	}
 };
 </script>
+
+<style>
+.k-login-form {
+	position: relative;
+}
+
+.k-login-form label abbr {
+	visibility: hidden;
+}
+
+.k-login-toggler {
+	position: absolute;
+	top: -2px;
+	inset-inline-end: calc(var(--spacing-2) * -1);
+	color: var(--link-color);
+	text-decoration: underline;
+	text-decoration-color: var(--link-color);
+	text-underline-offset: 1px;
+	height: var(--height-xs);
+	line-height: 1;
+	padding-inline: var(--spacing-2);
+	border-radius: var(--rounded);
+	z-index: 1;
+}
+</style>
diff --git a/panel/src/components/Forms/LoginCode.vue b/panel/src/components/Forms/LoginCode.vue
index 642dcf9b2d..bd9addd7d3 100644
--- a/panel/src/components/Forms/LoginCode.vue
+++ b/panel/src/components/Forms/LoginCode.vue
@@ -1,6 +1,6 @@
 <template>
 	<form class="k-login-form k-login-code-form" @submit.prevent="login">
-		<k-user-info :user="pending.email" />
+		<k-user-info v-if="pending.email" :user="pending.email" />
 
 		<k-text-field
 			:autofocus="true"
@@ -17,15 +17,15 @@
 			@input="code = $event"
 		/>
 
-		<div class="k-login-buttons">
+		<footer class="k-login-buttons">
 			<k-button
 				class="k-login-button k-login-back-button"
 				icon="angle-left"
+				link="/logout"
 				size="lg"
 				variant="filled"
-				@click="back"
 			>
-				{{ $t("back") }} <template v-if="isLoadingBack"> … </template>
+				{{ $t("back") }}
 			</k-button>
 
 			<k-button
@@ -36,10 +36,9 @@
 				theme="positive"
 				variant="filled"
 			>
-				{{ $t("login" + (mode === "password-reset" ? ".reset" : "")) }}
-				<template v-if="isLoadingLogin"> … </template>
+				{{ submitText }}
 			</k-button>
-		</div>
+		</footer>
 	</form>
 </template>
 
@@ -49,12 +48,18 @@ export const props = {
 		/**
 		 * List of available login method names
 		 */
-		methods: Array,
+		methods: {
+			type: Array,
+			default: () => []
+		},
 		/**
 		 * Pending login data (user email, challenge type)
 		 * @value { email: String, challenge: String }
 		 */
-		pending: Object,
+		pending: {
+			type: Object,
+			default: () => ({ challenge: "email" })
+		},
 		/**
 		 * Code value to prefill the input
 		 */
@@ -68,27 +73,29 @@ export default {
 	data() {
 		return {
 			code: this.value ?? "",
-			isLoadingBack: false,
-			isLoadingLogin: false
+			isLoading: false
 		};
 	},
 	computed: {
 		mode() {
-			if (this.methods.includes("password-reset") === true) {
-				return "password-reset";
+			return this.methods.includes("password-reset")
+				? "password-reset"
+				: "login";
+		},
+		submitText() {
+			const suffix = this.isLoading ? " …" : "";
+
+			if (this.mode === "password-reset") {
+				return this.$t("login.reset") + suffix;
 			}
 
-			return "login";
+			return this.$t("login") + suffix;
 		}
 	},
 	methods: {
-		async back() {
-			this.isLoadingBack = true;
-			this.$go("/logout");
-		},
 		async login() {
 			this.$emit("error", null);
-			this.isLoadingLogin = true;
+			this.isLoading = true;
 
 			try {
 				await this.$api.auth.verifyCode(this.code);
@@ -106,7 +113,7 @@ export default {
 			} catch (error) {
 				this.$emit("error", error);
 			} finally {
-				this.isLoadingLogin = false;
+				this.isLoading = false;
 			}
 		}
 	}
diff --git a/panel/src/components/Views/Login/LoginView.vue b/panel/src/components/Views/Login/LoginView.vue
index 4552b4d817..4118caa96b 100644
--- a/panel/src/components/Views/Login/LoginView.vue
+++ b/panel/src/components/Views/Login/LoginView.vue
@@ -1,7 +1,9 @@
 <template>
-	<k-panel-outside :class="viewClass">
+	<k-panel-outside
+		:class="form === 'code' ? 'k-login-code-view' : 'k-login-view'"
+	>
 		<!-- <div> as single child for grid layout -->
-		<div class="k-dialog k-login-dialog">
+		<div class="k-dialog k-login k-login-dialog">
 			<h1 class="sr-only">
 				{{ $t("login") }}
 			</h1>
@@ -16,7 +18,12 @@
 					v-bind="{ methods, pending, value: value.code }"
 					@error="onError"
 				/>
-				<k-login-plugin v-else v-bind="{ methods, value }" @error="onError" />
+				<component
+					:is="component"
+					v-else
+					v-bind="{ methods, value }"
+					@error="onError"
+				/>
 			</k-dialog-body>
 		</div>
 	</k-panel-outside>
@@ -24,14 +31,14 @@
 
 <script>
 import { props as LoginCodeProps } from "@/components/Forms/LoginCode.vue";
-import LoginForm, { props as LoginProps } from "@/components/Forms/Login.vue";
+import { props as LoginProps } from "@/components/Forms/Login.vue";
 
 /**
  * @internal
  */
 export default {
 	components: {
-		"k-login-plugin": window.panel.plugins.login ?? LoginForm
+		"k-login-plugin": window.panel.plugins.login
 	},
 	mixins: [LoginCodeProps, LoginProps],
 	props: {
@@ -53,19 +60,11 @@ export default {
 		};
 	},
 	computed: {
-		form() {
-			if (this.pending.email) {
-				return "code";
-			}
-
-			return "login";
+		component() {
+			return window.panel.plugins.login ? "k-login-plugin" : "k-login";
 		},
-		viewClass() {
-			if (this.form === "code") {
-				return "k-login-code-view";
-			}
-
-			return "k-login-view";
+		form() {
+			return this.pending.email ? "code" : "login";
 		}
 	},
 	mounted() {
@@ -92,33 +91,11 @@ export default {
 </script>
 
 <style>
-.k-login-dialog {
+.k-login {
 	--dialog-color-back: var(--color-white);
 	--dialog-shadow: var(--shadow);
-	container-type: inline-size;
-}
-
-.k-login-fields {
-	position: relative;
-}
 
-.k-login-toggler {
-	position: absolute;
-	top: -2px;
-	inset-inline-end: calc(var(--spacing-2) * -1);
-	z-index: 1;
-	color: var(--link-color);
-	padding-inline: var(--spacing-2);
-	text-decoration: underline;
-	text-decoration-color: var(--link-color);
-	text-underline-offset: 1px;
-	height: var(--height-xs);
-	line-height: 1;
-	border-radius: var(--rounded);
-}
-
-.k-login-form label abbr {
-	visibility: hidden;
+	container-type: inline-size;
 }
 
 .k-login-buttons {