Roosevelt

Semantic Forms

npm

A pattern library of attractive forms for your website with the following design goals:

  • Attractive, modern float label visual design.
  • Responsive layout based on modern CSS grid technique.
  • Clear fields.
  • Light and dark mode.
  • Invalid field styling.
  • Good accessibility.
  • Semantic HTML (no div soup).
  • Uses a progressive enhancement approach so that core functionality and most of the features still work with JavaScript disabled.
  • Sets no global styles and is scoped by a single class name semanticForms applied to <form> elements.
  • No dependencies.

This module was built and is maintained by the Roosevelt web framework team, but it can be used independently of Roosevelt as well.