webdevpuneet.com

Related Snippets

57 in Mobile Screens category
52–57 of 57

Mobile Onboarding Screens

Mobile Login Screen

Mobile Lock Screen

Story Progress Bars

Swipe to Delete List

Vertical Story-Style Slider

Mobile Login Screen — Free App Sign In UI Snippet

Mobile Login Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsSVGAuthenticationMobile UI

Copy & paste

Source Code

<div class="mls-phone">
  <div class="mls-screen">
    <div class="mls-status"><span>9:41</span><span class="mls-batt"><i></i></span></div>
    <div class="mls-body">
      <div class="mls-brand"><div class="mls-logo"></div><span>Northwind</span></div>
      <h1 class="mls-title">Welcome back</h1>
      <p class="mls-sub">Sign in to continue to your account</p>
      <form id="mlsForm" novalidate>
        <label class="mls-field">
          <span>Email</span>
          <input type="email" id="mlsEmail" value="" placeholder="[email protected]" autocomplete="off">
          <em class="mls-err" id="mlsEmailErr"></em>
        </label>
        <label class="mls-field">
          <span>Password</span>
          <div class="mls-pw">
            <input type="password" id="mlsPw" placeholder="••••••••" autocomplete="off">
            <button type="button" class="mls-eye" id="mlsEye" aria-label="Show password">
              <svg viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
        </label>
        <a class="mls-forgot" href="#">Forgot password?</a>
        <button type="submit" class="mls-submit" id="mlsSubmit">Sign in</button>
      </form>
      <div class="mls-or"><span>or continue with</span></div>
      <div class="mls-social"><button type="button">Google</button><button type="button">Apple</button></div>
      <p class="mls-foot">No account? <a href="#">Create one</a></p>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Complete auth screen
Branding, fields, forgot link, submit, and social.
Inline validation
Email regex and password length with focus jump.
Specific errors
Distinguishes required from invalid input.
Self-clearing errors
Messages disappear as the user edits.
Password reveal
Accessible show/hide with aria-label updates.
Loading submit
Disabled, labeled state for the auth round-trip.
CSS divider
An or-continue-with rule from pseudo-elements.
No dependency
Pure HTML/CSS/JS, real focusable DOM.

About this UI Snippet

Mobile Login Screen — App Sign-In UI with Validation

Screenshot of the Mobile Login Screen snippet rendered live

A mobile login screen is the sign-in flow of an app — branding, email and password fields, a forgot-password link, a primary submit, and social options. This snippet is a complete, working one inside a CSS phone frame, with real inline validation, a password reveal toggle, and a loading submit state, built in HTML, CSS, and vanilla JavaScript with no dependency. It's a ready starting point for any app's auth screen.

Inline validation on submit

Submitting runs lightweight validation: the email is checked against a pragmatic regex (/^[^\s@]+@[^\s@]+\.[^\s@]+$/ — non-space, an @, more non-space, a dot, a TLD), and the password for a minimum length. A failing field gets a .bad class that turns its border red and shows a specific message ("Email is required" vs "Enter a valid email address"), and focus jumps to the first problem. The error clears as soon as the user edits the field, so the form guides rather than nags.

Password show/hide

The reveal button swaps the input's type between password and text and updates its aria-label and color accordingly — the standard, accessible pattern for letting users verify what they typed without exposing it permanently. It's a single toggle with no second input.

A submit that shows progress

On a valid submit, the button enters a .loading state (disabled via pointer-events:none, lightened, label changed to "Signing in…") and, after a simulated round-trip, confirms success. In production you'd await your auth call here; the choke point is one handler, so wiring a real request is a one-line change.

The screen layout

Inside the phone frame, the screen is a scrollable column: brand row, heading, the form, an "or continue with" divider built from a flex row with ::before/::after rules, and social buttons. The status bar with a CSS battery completes the device illusion. Everything is real, focusable, keyboard-navigable DOM.

Reusing it

Drop it into a phone mockup for a marketing shot, or lift the form out of the frame to use as a responsive web login. Replace the validation and submit handler with your auth provider, keep the structure, and you have a production-ready sign-in screen.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA mobile login screen renders inside a phone frame.
  2. 2
    Submit emptyThe email field turns red with a required message.
  3. 3
    Enter a bad emailValidation shows a specific invalid-email error.
  4. 4
    Toggle the passwordThe eye button reveals and hides what you typed.
  5. 5
    Submit valid dataThe button shows a loading state then confirms success.
  6. 6
    Wire your authReplace the simulated round-trip with your provider.

Real-world uses

Common Use Cases

App sign-in flows
Present branding, email and password fields, a forgot-password link and social buttons in one complete phone mockup screen.
First-launch journeys
Follow a mobile lock screen or mobile onboarding flow into this login to show the whole start of an app.
Responsive web login
Lift the form out as a glassmorphism login page, keeping inline validation and the password show and hide toggle.
Passwordless alternatives
Compare with magic link login and OTP verification when you want to remove the password field entirely.
Inline validation reference
Study how required and invalid errors differ, how focus jumps to the first bad field, and how messages clear themselves as the user edits.
Related: Mobile Fitness Screen
See the Mobile Fitness Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On submit, the email is tested against the regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ — it requires non-space characters, an @, more non-space, a dot, and a domain ending. If it fails, the field gets a red border and a specific message: "Email is required" when empty, or "Enter a valid email address" when malformed. The error clears as soon as you start editing.

The eye button flips the password input's type attribute between password and text, which reveals or masks the characters, and updates the button's aria-label and color so screen readers and sighted users both know the current state. It's a single input with a toggle, not two overlapping fields.

When validation passes, the submit button gets a loading class that lightens it, disables interaction with pointer-events:none, and changes the label to "Signing in…". The snippet simulates a round-trip with a timeout then shows success; in a real app you'd await your authentication call in that same handler.

Yes. The phone frame is just a wrapper; the form and its validation are independent. Lift the form markup out and it works as a responsive web login. The frame is useful for presentations and app mockups, but nothing in the logic depends on it.

Bind the email and password to state, run the validation in your submit handler, and toggle error classes from validation results. The password reveal flips an input type bound to a showPassword flag. Replace the timeout with your auth API call and manage the loading flag in state. Tailwind styles the fields, divider, and buttons with utilities.