Login Page

Login Page

The login page allows a user to gain access to an application by entering their username and password or by authenticating using a social media login. For additional login methods, see:

Usage scenarios related to the login page include:

  • A user navigates to an application and is presented with a login page as a way to gain access to the application. There are two possible results:
    • Authentication is successful and the user is directed to the application landing page.
    • Authentication fails and the user remains on the login page. If authentication fails, the screen should show an informational or error message about the failure.
  • A user is automatically logged out due to inactivity. In this event, they will be returned to the login page, which will display an informational message explaining what happened. Once the user logs in again, they should be taken back to the page they were previously on before being timed out. Thirty minutes is the suggested duration before a session timeout, but this is subject to change based on your product’s security requirements.
  • A user has forgotten their username and/or password. A link is available to begin the process to reset this information. Once the user clicks on one of these links, the contents of the login page is replaced with fields specific to recovering their username and/or password. There are a number of different ways the user could recover their password. This pattern does not dictate which methods an application should follow. Some options include:
    • The user could provide their e-mail and be sent a temporary password or a link to reset their password.
    • The user could answer a security question.
    • The user could get a message explaining that they have to contact a specific person.

Basic Login Page

This is a general layout of a common login screen. A user can input the username and the password together to log in.

Image of basic login page

Social Login

Social login will allow a user to sign in with their social networks or IdPs accounts.

Please refer to branding guidelines when using logos for social login page. The following are examples of some of the more frequently used but you may use others as your needs require.

Image of social login

Login Page

Jump to Login Pages, Login Pages | Responsive State, Error Messages, or Notifications

Login Pages

Basic Login Page

Image of basic login page

  1. Logotype: The product logo is placed at the top.
  2. Description (optional): Description of the website can be placed here.
  3. Title: The title is located at the top of the login card. “Your Account” can be replaced by the product name or any other term that makes sense for your application.
  4. Language Selector (optional): The language selector is located in the top right of the login card.
  5. Required Fields: Username and password are the required fields while additional fields are optional. Some applications may require additional fields such as a specific server or geo-location. When additional fields are required, they should be ordered on a case-by-case basis and placed directly below the password field. The login card will expand to accommodate the additional fields. Try to limit the total number of fields to less than five. Also, you may use progressive disclosure if the field value have dependency on the previous relevant field.
  6. Checkbox (optional): A checkbox is located under the required (and any additional) fields, and is labeled based on the needs of the application. Checkbox labels should use sentence style capitalization according to the Terminology and Wording Style Guide.
  7. Help Link (optional): A help link should take users to a page where they can recover their password.
  8. Login Button: The button should be labeled “Log In”. See “Common Terms and Words” on the Terminology and Wording Style Guide for more information.
  9. Sign up (optional): The page will jump to the sign up flow after clicking the “Sign up” link.
  10. Links (optional): You may add any additional links to pages where the user can get more information or help.

Social Login

Image of social login

  1. Social Media Buttons: When the number of buttons is four or less, display all buttons in one column. Otherwise, use a two-column layout. All the buttons should be listed in the order of their mostly likely usage, that is, the most frequently used items should show at or near the top of the list.
  2. More Link: When there are more than 8 buttons, a “More” link will show below the button grid. Clicking this link will expand the grid and the link will change to “Less” to allow the user to collapse the grid.

Image of social login

Login Pages | Responsive State

This section describes how the login pages should look on small screens.

Image of responsive state

  1. When the screen gets smaller, the help link will automatically move to the next line if there isn’t enough space for the checkbox and the help link to be placed in the same line.
  2. In the responsive state, all the social media buttons stack in a single column.

Error Messages

User input can be validated on the client or on the server. With client-side validation, error message will be presented before the form is submitted. It could happen when a text field gains focus, loses focus, or when user clicks the action button (without calling backend authenticator). With server-side validation, error message will only be presented when the page is reloaded with the data user submitted.

Jump to Client-side Errors or Server-side Errors

Client-side Errors

In most cases, client-side validations are performed as inline validations for each field. Some common conditions are as follows.

Field(s) is empty

Image of empty fields

  1. When to Show: When the user clicks the action button (Log In/Next), the errors must be corrected before the form can be submitted, and an error message will be displayed below any empty field.
  2. When to Hide: When the user fills the empty field, the error message will disappear when the field loses focus.
  3. Recommended Message:
    • When the username field is empty, we recommend to show “Enter your email or phone or username”. Email/phone/username can be restricted to specific types according to the target application.
    • When the password field is empty, we recommend to show “Enter your password” if a password is needed.

Invalid Characters

Image of invalid characters

  1. When to Show: When user clicks the action button (Log in/Next), the login form can’t be submitted and error message will show (below the username field) if there are invalid characters in username.
  2. When to Hide: After user modified the field, the error message will disappear when the field loses focus.
  3. Recommended Message:
    • What characters are invalid determined by the username type: email address, phone number or custom username.
    • If the username can only be email address/phone number, we recommend to show “Enter a valid email address/phone number” when there are invalid characters.
    • If the username can also be customized, when there are invalid characters, show “Invalid characters”.

Caps lock is on

Image of caps lock

  1. When to Show: When the password field gets focus as well as caps lock is on, an error message will show up to warn users to avoid making mistake.
  2. When to Hide: Once the caps lock turns off, the warning message should disappear.
  3. Recommended Message: “Caps lock is currently on. This may cause you to type an incorrect password.”

Server-side Errors

When users submit the form, the entire page is reloaded if there are validation errors. At the same time, the password field should be cleared due to the security reason. Error messages can appear as inline errors for each field or as inline notifications. Inline Notifications are displayed below the application name and above the input fields. If there are multiple messages, each message appears on its own line, and the area adjusts as needed to fit these messages.

Account doesn’t exist/password is wrong

If the user input a wrong account name which do not exist or if the user input a wrong password, we provide two solutions to show error messages:

  1. Directly tell the user that the account doesn’t exist or the password is wrong. Although this approach is useful and clear for user, it’s not recommended if protecting identity of valid users is important. Image of account or password errors
    • When username is wrong (doesn’t exist), we recommend to show “The account does not exist. Try again or sign up”. The “sign up” should be a link to help users creating a new account much easier. It will only be available for applications that support self-registration.
    • When password is wrong, we recommend to show “Incorrect password, try again.” If the user inputs an old password (they may have changed the password recently), we can show an error message alerting them that the password has changed instead of stating “the password is wrong” only. Image of old password error
  2. For security reasons, just tell user that the username and the password don’t match. Image of account or password errors

Other Examples of Error Messages

Image of other error messages


Except for error messages, notifications can also be warning messages. A warning message can be triggered by system level events or triggered if the user is timed out of the application. The user can dismiss the notification by clicking on the close icon.

Image of notifications

PatternFly Core Example

Usage Notes

Disclaimer: Only classes that may be missed are highlighted.

Selector .login-pf
Applied to body
Required Yes
Summary Adds background image and styling
Selector .login-pf-page
Applied to page wrapper
Required Yes
Summary Adds overall styling
Selector .login-pf-page-accounts
Applied to .login-pf-page on page wrapper
Required No
Summary for login page with multiple account login options
Selector .login-pf-social-link-more
Applied to any li used in the ul.login-pf-social
Required No
Summary hides li in a expandable container.
Selector .login-pf-social-double-col
Applied to used with login-pf-social
Required No
Summary Adds second column of list items

View full page example

Reference Markup

<html class="login-pf">
<div class="login-pf-page">

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
        <header class="login-pf-page-header">
          <img class="login-pf-brand" src="/assets/img/Logo_Horizontal_Reversed.svg" alt=" logo" />
            This is placeholder text, only. Use this area to place any information or introductory message about your application that may be relevant for users.
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
            <div class="card-pf">
              <header class="login-pf-header">
                <select class="selectpicker">
                <h1>Log In to Your Account</h1>
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control  input-lg" id="exampleInputEmail1" placeholder="Email address">
                <div class="form-group">
                  <label class="sr-only"  for="exampleInputPassword1">Password
                  <input type="password" class="form-control input-lg" id="exampleInputPassword1" placeholder="Password">
                <div class="form-group login-pf-settings">
                      <label class="checkbox-label">
                        <input type="checkbox"> Keep me logged in for 30 days
                      <a href="#">Forgot password?</a>
                <button type="submit" class="btn btn-primary btn-block btn-lg">Log In</button>
              <p class="login-pf-signup">Need an account?<a href="#">Sign up</a></p>
            </div><!-- card -->
            <footer class="login-pf-page-footer">
              <ul class="login-pf-page-footer-links list-unstyled">
                <li><a class="login-pf-page-footer-link" href="#">Terms of Use</a></li>
                <li><a class="login-pf-page-footer-link" href="#">Help</a></li>
                <li><a class="login-pf-page-footer-link" href="#">Privacy Policy</a></li>
          </div><!-- col -->
        </div><!-- row -->
      </div><!-- col -->
    </div><!-- row -->
  </div><!-- container -->
</div><!-- login-pf-page -->