Sign-in forms

Centered sign-in shell with email + password, remember-me, optional social logins, and an optional sign-up footer.

Preview

Sign in to your account

Or continue with

React preview

LiveView (HEEx)

alias DesignSystem.UI.SignInForms

<SignInForms.sign_in_form
  id="sign-in"
  action={~p"/users/log_in"}
  method="post"
  forgot_href={~p"/users/reset_password"}
>
  <:logo>
    <img src={~p"/images/logo.svg"} alt="Your Company" class="h-10 w-auto" />
  </:logo>
  <:social_logins>
    <SignInForms.social_login_button href="/auth/google" label="Google">
      <:icon><GoogleSvg /></:icon>
    </SignInForms.social_login_button>
  </:social_logins>
  <:footer>
    Not a member?
    <.link navigate={~p"/users/register"} class="font-semibold text-indigo-600">
      Sign up
    </.link>
  </:footer>
</SignInForms.sign_in_form>

React (JSX)

import { SignInForm, SocialLoginButton } from "../ui/index.mjs"

<SignInForm
  action="/users/log_in"
  method="post"
  forgotHref="/users/reset_password"
  logo={<img src="/images/logo.svg" alt="Your Company" className="h-10 w-auto" />}
  socialLogins={
    <SocialLoginButton href="/auth/google" label="Google" icon={<GoogleSvg />} />
  }
  footer={
    <>
      Not a member?{" "}
      <a href="/users/register" className="font-semibold text-indigo-600">
        Sign up
      </a>
    </>
  }
/>