saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography

Login

Modern authentication form with email/password login and SSO options for Google and Apple.

Welcome back

Sign in to your account to continue

Or continue with email
Don't have an account?

Features

  • Email and password authentication — With validation
  • Single Sign-On (SSO) — With Google and Apple
  • Password visibility toggle — For better UX
  • Remember me checkbox — For persistent sessions
  • Forgot password and sign up links — Navigation helpers
  • Loading states — For async operations
  • Responsive design — For all screen sizes
  • Fully accessible — With proper ARIA labels

API Reference

PropTypeDefaultDescription
onSubmit(email: string, password: string) => void-Callback when email/password form is submitted
onGoogleSignIn() => void-Callback when Google SSO button is clicked
onAppleSignIn() => void-Callback when Apple SSO button is clicked
onForgotPassword() => void-Callback when forgot password link is clicked
onSignUp() => void-Callback when sign up link is clicked

Usage Guidelines

This login component follows modern authentication UX best practices for 2025. It prioritizes user convenience while maintaining security standards.

SSO First: Social sign-on options are presented prominently at the top since they offer the fastest path to authentication for most users.

Password Management: The password field includes a visibility toggle to help users verify their input, reducing login errors and frustration.

Clear Actions: All interactive elements are clearly labeled with their purpose, and loading states provide feedback during async operations.

Accessibility: The component uses semantic HTML, proper ARIA labels, and keyboard navigation support for full accessibility compliance.

Components Used

buttoninputlabelseparatorcheckbox