Login Page V10

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A single card for a made-up habit tracker that holds both the log-in and the sign-up form, switched by a segmented control with a sliding thumb. The control is a proper tablist with arrow keys, Home and End, and each panel slides in from the side it was chosen from. Links under each form jump to the other tab and put focus in its first field.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 377 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• WAI-ARIA tabs with automatic activation and roving tabindex
• Sliding thumb and direction-aware panel slide, off with reduced motion
• Sign-up password needs 8+ characters and a number (pattern with lookahead)
• Terms checkbox validated with its own message
• current-password on log in, new-password on sign-up
• Separate success messages for each form, focused on arrival