Library/pages/Login

Login

page

Auth screen with login and forgot-password flows. Centered form with gradient submit button, error/loading states, remember-me, and a trust indicator below the form.

Added in 0.6.1

Live Preview

ThemeDefault Light

Device

Desktop

Props

Prop	Type	Description	Required
onLogin	(creds: { username, password, rememberMe }) => Promise<void>	Submit handler. Throw to surface an error.	yes
welcomeTitle	string	Login form title. Defaults to "Welcome back".	yes
welcomeSubtitle	string	Subtitle below the login title	yes
forgotTitle	string	Forgot-password title. Defaults to "Forgot password?".	yes
forgotSubtitle	string	Subtitle on the forgot-password screen	yes
trustIndicator	string \| false	Shield-icon trust line below the form. Pass false to hide.	yes
rememberMeDefault	boolean	Initial value of the Remember Me checkbox	yes
onForgotPassword	(info: { email }) => Promise<void>	Forgot-password handler. Omit to hide the link.	yes
screen	"login" \| "forgot"	Externally controlled screen (otherwise managed internally)	yes
onScreenChange	(next) => void	Fires when the screen toggles	yes

Usage

import { Login } from '@qsp-life/particle';

<Login
  onLogin={async ({ username, password, rememberMe }) => {
    // throw new Error("Invalid credentials") to surface error state
  }}
  onForgotPassword={async ({ email }) => {
    // call your reset-password API
  }}
/>

Import

import { Login } from '@qsp-life/particle';