Split
A two column sign in page: the form with a home mark on the start side, a full height photo on the end side from the large breakpoint. The photo dims and turns gray in dark mode.
Dependencies
Interaction Type
Every field has a visible label and the right autocomplete, so password managers fill it. The password toggle is a 44px button with aria-pressed and a label for each state; its eye icons crossfade instead of cutting. Errors set aria-invalid and are announced as an alert. All controls are 44px tall with the accent focus ring.
Props
Options you can pass to customize this component.
imageSrcPhoto on the end side from the large breakpoint. Without it the panel is a quiet surface.
imageAltAlt text of the photo. Defaults to empty, since the photo is decorative.
markLogo above the heading. Pass null to hide it.
titlePage heading. Defaults to "Welcome back".
descriptionLine under the heading.
onSubmitCalled with the email and password when the form is submitted.
onProviderCalled with the provider id when a sign in button is pressed.
providersSign in providers. Defaults to Google and Apple. Pass [] to hide them.
errorError under the fields. Sets aria-invalid on both inputs, links them with aria-describedby and is announced as an alert.
forgotHrefWhere the forgot password link points.
signupHrefWhere the create account link points.
emailLabel, passwordLabel, submitLabelVisible labels, all overridable for localization.
showPasswordLabel, hidePasswordLabelAccessible names of the password toggle in each state.
Installation
How to use
<LoginSplit imageSrc="/images/login.jpg" onSubmit={handleSignIn} />Source Code
Click the code icon in the top-right corner to view the source code.
License & Usage
- •Free for personal and commercial use
- •No attribution required
- •Cannot be resold as a standalone product
- •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.Welcome back
Sign in to keep building with Nexvyn UI.
New to Nexvyn UI? Create an account
