LoginCard
stableAuthentication form with email/password, SSO providers, password strength, and branding slot
import { LoginCard } from "@nodus/design-system/patterns"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmit | (creds: {email, password}) => void | — | Form submit handler |
error | string | — | Error message |
brandSlot | ReactNode | — | Branding element (logo) |
ssoProviders | SSOProvider[] | — | SSO provider buttons |
onSSO | (provider: SSOProvider) => void | — | SSO provider click handler |
showStrength | boolean | false | Show password meter |
loading | boolean | false | Submitting/loading state |
title | string | "Sign in" | Card heading text |
forgotPasswordHref | string | — | Forgot password link URL |
onSubmitType
(creds: {email, password}) => voidDefault —Form submit handler
errorType
stringDefault —Error message
brandSlotType
ReactNodeDefault —Branding element (logo)
ssoProvidersType
SSOProvider[]Default —SSO provider buttons
onSSOType
(provider: SSOProvider) => voidDefault —SSO provider click handler
showStrengthType
booleanDefault falseShow password meter
loadingType
booleanDefault falseSubmitting/loading state
titleType
stringDefault "Sign in"Card heading text
forgotPasswordHrefType
stringDefault —Forgot password link URL
Design Rationale
This component was designed to express:
Explore Related
MFAInput→
Six/eight-digit OTP code entry with auto-advance, paste support, countdown timer, and resend action
PasswordStrength→
Password complexity meter with four-segment bar and requirement checklist
SessionTimeoutDialog→
Session expiry warning dialog with countdown timer, progress bar, and extend/logout actions
Was this helpful?