Skip to content
meridian

login form

authentication form templates showing login, registration, and password reset patterns.

login

sign in

enter your credentials to continue

registration

create account

enter your details to get started

validation states

validation example

showing error states

please enter a valid email address

password must be at least 8 characters

code

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});


  const handleSubmit = (e) => {
    e.preventDefault();
    // validation logic
  };


  return (
    <Card style={{ maxWidth: '380px' }}>
      <CardHeader>
        <CardTitle>sign in</CardTitle>
        <CardDescription>enter your credentials</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit}>
          <div>
            <Label htmlFor="email">email</Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              invalid={!!errors.email}
            />
            {errors.email && (
              <Text size="xs" style={{ color: 'var(--color-danger)' }}>
                {errors.email}
              </Text>
            )}
          </div>
          <div>
            <Label htmlFor="password">password</Label>
            <Input
              id="password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              invalid={!!errors.password}
            />
          </div>
          <div>
            <Checkbox id="remember" />
            <Label htmlFor="remember">remember me</Label>
          </div>
        </form>
      </CardContent>
      <CardFooter>
        <Button intent="primary" type="submit">sign in</Button>
      </CardFooter>
    </Card>
  );
}