Auth

Login

A centered login card with email, password, remember-me checkbox, and forgot-password link. Includes inline field validation. Optionally renders a split-panel layout with a custom left side.

Sign in

Welcome back — sign in to continue.

Don't have an account? Sign up

import { Login } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add login-block

Import

import.tsx

import { LoginBlock } from "@aetherstack/blocks"

Usage

import { LoginBlock } from "@aetherstack/blocks"

export default function LoginPage() {
  return (
    <LoginBlock
      appName="Acme"
      tagline="Welcome back — sign in to continue."
      onSubmit={async ({ email, password }) => {
        await signIn(email, password)
      }}
      signUpHref="/signup"
      forgotPasswordHref="/forgot-password"
    />
  )
}

Props

Prop	Type	Default	Description
appName	string	"Aether UI"	Product name displayed above the form.
tagline	string	—	Short tagline displayed below the app name.
onSubmit	(values: { email, password, remember }) => void	—	Called with validated form data on submit.
signUpHref	string	"/signup"	URL for the sign-up link.
forgotPasswordHref	string	"/forgot-password"	URL for the forgot-password link.
panel	ReactNode	—	Optional content to show in the left panel of a split-screen layout.
className	string	—	Additional classes on the root wrapper.

* Required

Accessibility

→All form fields are labelled via visible labels and htmlFor/id associations.
→Inline validation errors are rendered adjacent to each field with role="alert" to announce changes.
→The remember-me checkbox uses the Checkbox primitive which has proper aria-checked state.