[ [UI.74] Components ] Sign In Form

Sign In Form

> Complete authentication forms with email/password and social providers.

Import

[ [0x5B] IMPORT ]

1import { SignInForm, SignUpForm } from "@/components/ui/sign-in-form"

Preview

[ [0x00] SIGN IN FORM ]

Don't have an account? Sign up

1<SignInForm
2  onSubmit={(data) => handleSignIn(data)}
3  forgotPasswordHref="/forgot-password"
4  signUpHref="/sign-up"
5/>

Variants

[ [0x00] SIGN IN FORM ]

Don't have an account? Sign up

1<SignInForm
2  onSubmit={(data) => handleSignIn(data)}
3/>

[ [0x00] SIGN UP FORM ]

Already have an account? Sign in

1<SignUpForm
2  onSubmit={(data) => handleSignUp(data)}
3  termsHref="/terms"
4  privacyHref="/privacy"
5/>

[ [0x00] WITH ERROR ]

[ERROR]: Invalid email or password

Don't have an account? Sign up

1<SignInForm
2  error="Invalid email or password"
3  onSubmit={handleSignIn}
4/>

[ [0x00] LOADING STATE ]

Don't have an account? Sign up

1<SignInForm isLoading />

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
onSubmit	`(data: SignInFormData) => void \| Promise<void>`	-	Form submission handler.
socialProviders	`SocialProvider[]`	`[GitHub, Google]`	Social auth providers to display.
forgotPasswordHref	`string`	`"/forgot-password"`	URL for forgot password link.
signUpHref	`string`	`"/sign-up"`	URL for sign up link.
showRememberMe	`boolean`	`true`	Show remember me checkbox.
defaultEmail	`string`	-	Pre-fill email field.
isLoading	`boolean`	`false`	Show loading state.
error	`string`	-	Error message to display.

Accessibility

[ [0x58] A11Y ]

Form inputs have associated labels with htmlFor
Error messages use terminal [ERROR] format
Loading states disable inputs and show spinner
Social auth buttons have provider names as labels
Keyboard navigation supported throughout
Focus visible rings for all interactive elements

Form Data Types

[ [0x62] SIGN IN DATA ]

interface SignInFormData {
  email: string;
  password: string;
  rememberMe: boolean;
}

[ [0x54] SIGN UP DATA ]

interface SignUpFormData {
  name: string;
  email: string;
  password: string;
  acceptTerms: boolean;
}

Social Providers

[ [0x6D] CUSTOM PROVIDERS ]

const providers: SocialProvider[] = [
  {
    id: 'github',
    name: 'GitHub',
    icon: <Github className="h-4 w-4" />,
    onClick: () => signIn('github'),
  },
  {
    id: 'google',
    name: 'Google',
    icon: <GoogleIcon />,
    onClick: () => signIn('google'),
  },
];

<SignInForm socialProviders={providers} />

Variants

[ [0x00] SIGN IN FORM ]

Don't have an account? Sign up

1<SignInForm
2  onSubmit={(data) => handleSignIn(data)}
3/>

[ [0x00] SIGN UP FORM ]

Already have an account? Sign in

1<SignUpForm
2  onSubmit={(data) => handleSignUp(data)}
3  termsHref="/terms"
4  privacyHref="/privacy"
5/>

[ [0x00] WITH ERROR ]

[ERROR]: Invalid email or password

Don't have an account? Sign up

1<SignInForm
2  error="Invalid email or password"
3  onSubmit={handleSignIn}
4/>

[ [0x00] LOADING STATE ]

Don't have an account? Sign up

1<SignInForm isLoading />

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
onSubmit	`(data: SignInFormData) => void \| Promise<void>`	-	Form submission handler.
socialProviders	`SocialProvider[]`	`[GitHub, Google]`	Social auth providers to display.
forgotPasswordHref	`string`	`"/forgot-password"`	URL for forgot password link.
signUpHref	`string`	`"/sign-up"`	URL for sign up link.
showRememberMe	`boolean`	`true`	Show remember me checkbox.
defaultEmail	`string`	-	Pre-fill email field.
isLoading	`boolean`	`false`	Show loading state.
error	`string`	-	Error message to display.

Social Providers

[ [0x6D] CUSTOM PROVIDERS ]

const providers: SocialProvider[] = [
  {
    id: 'github',
    name: 'GitHub',
    icon: <Github className="h-4 w-4" />,
    onClick: () => signIn('github'),
  },
  {
    id: 'google',
    name: 'Google',
    icon: <GoogleIcon />,
    onClick: () => signIn('google'),
  },
];

<SignInForm socialProviders={providers} />