The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 2

User-Aware Form Validation Styling

This UI trick demonstrates how to use CSS `:user-invalid` and `:user-valid` pseudo-classes to provide polite form validation. Error or success states are only shown after a user interacts with an input field and blurs it, preventing accusatory messages on page load for empty, required fields.

animationuxcssformsvalidationpseudo-class

2 / 2

Inline Form Validation & Layout

A signup form demonstrating real-time inline validation feedback for email and password fields, coupled with clear, helpful error messages and a user-friendly single-column layout. The form highlights correct inputs with a green check and invalid ones with a red error icon and specific instructions.

uxlayoutformjavascriptfeedbackvalidationinline