This version of Clarity is no longer supported. We recommend that you update to the latest version of Clarity.
The login page is a predefined form for applications that require authentication.

Use Clarity’s login form by extending the .login classname on form and wrapping it in a container extending the .login-wrapper class.

.title, .subtitle and .trademark

Extend the .title and .subtitle class on labels indicating the product title and subtitle. If your product title has the trademark symbol, make sure to wrap the trademark symbol in a span with the .trademark class on it.


Extend the .username class on the username input field.


Extend the .password class on the password input field.

.error, .active

This wrapper contains a validation message. Extend the .active class with .error to display the validation message.


<div class="login-wrapper">
    <form class="login">
        <label class="title">
            <h3 class="welcome">Welcome to</h3>
            Company Product Name
            <h5 class="hint">Use your Company ID to sign in or create one now</h5>
        <div class="login-group">
            <div class="auth-source select">
                <select id="login-auth-source-1">
                    <option>Local Users</option>
            <input class="username" type="text" id="login_username" placeholder="Username">
            <input class="password" type="password" id="login_password" placeholder="Password">
            <div class="checkbox">
                <input type="checkbox" id="rememberme">
                <label for="rememberme">
                    Remember me
            <div class="error active">
                Invalid user name or password
            <button type="submit" class="btn btn-primary">NEXT</button>
            <a href="javascript://" class="signup">Sign up for a Company ID</a>


This component provides a complete login experience.

To customize the login page, remove the elements you don’t need, per your use case. For example, your app may require fewer fields.


Validation occurs on submit. If the user enters an incorrect user name or password, a validation message appears below the password field.

For security reasons, Clarity does not call out whether the error occurred in the user name or password field. The validation message text should indicate this situation; for example, “The user name or password is incorrect.”


The layout adapts to different screen sizes at 768px and 544px.