Form Controls

A clean, copy-paste-ready form shell that leaves validation logic to the browser through native input types, constraints, and UI pseudo-classes.

Demo on CodePen

Preview

Implementation Notes

The snippet leans on the platform instead of reimplementing validation. Required fields, email syntax, numeric ranges, radio groups, and regex patterns are all expressed in HTML.

Styling hooks use :user-valid and :user-invalid so controls do not render as broken before the user interacts with them. The browser still owns the actual validation message and submit blocking behavior.

Browser Compatibility

Feature	Chrome	Edge	Firefox	Safari	Notes	Source
`required` and native constraints Broad support	4+	12+	4+	5+	Covers value-missing, pattern, min, max, and step validation.	caniuse
`type="email"` Broad support	5+	12+	1+	5+	Built-in email syntax validation works without JavaScript.	caniuse
`:invalid` and related UI pseudo-classes Broad support	Yes	Yes	Yes	Yes	Lets the CSS respond to native validation state without extra scripting.	caniuse

Compatibility notes reference Can I Use data current as of March 2026.