Login Form with Floating Labels
Clean pure CSS login card with animated floating labels, show/hide password, inline validation and a simulated sign-in state in vanilla JavaScript.
Tag: validation
Components tagged with "validation".
16 component(s)
Checkout Form with Order Summary
Bootstrap 5 one-page checkout with contact, shipping, delivery and payment sections, card input masks, validation, promo code and a live order summary.
Centered Login Page
Full-page Bootstrap 5 sign-in with a centered card, Google and GitHub buttons, validated email and password fields, a show password toggle and a Caps Lock warning.
Login Modal
Bootstrap 5 login modal with social sign-in buttons, floating labels, a show/hide password toggle, client-side validation and a signed-in success view.
Floating Label Inputs
Bootstrap 5 floating label inputs for text, email, select and textarea, styled as filled fields with validation, read-only and disabled states.
Signup Form with Validation
Bootstrap 5 signup form with live password rules, a strength meter, show/hide toggle, password confirmation and a required terms checkbox.
Multi-Step Registration Form
Bootstrap 5 three-step registration form with a progress bar, step indicators, per-step validation, password matching, plan cards and a success screen.
Password Strength Meter
Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.
Checkout Stepper
Bootstrap 5 four-step checkout with cart, shipping, payment and review steps, a progress bar, per-step validation, Back/Continue buttons and a live order summary.
Split Login Page
Split-screen Tailwind CSS login page with a violet brand panel, inline validation, show/hide password toggle and a loading state.
Contact Form Card
Tailwind CSS contact form card with a topic select, live character counter and meter, inline validation and a simulated sending state.
Newsletter Signup Card
Bold Tailwind CSS newsletter signup card with inline email validation, a loading spinner, privacy note and an animated success state.
Split Contact Section with Form
Tailwind CSS contact section with a gradient info panel beside a validated contact form, topic chips, character counter and a simulated send state.
Contact Form with Validation
Bootstrap 5 contact form with floating labels, client-side validation, a character counter, a success message and a contact details panel.
Hero with Signup Form
Bootstrap 5 two-column hero with value points, social proof and a validated signup card that shows a loading state and a success message.
Login Form with Social Buttons
Tailwind CSS login form with Google and GitHub buttons, remember me, password visibility toggle and accessible inline validation.