Form with basic CSS

This is the same as the Form component but with very basic CSS added.


Better classes

The classes on a form has been changed to:

  set classes = [
    'form--' ~ element['#form_id']|clean_class

Which gives you the following classes:

.form {}
.forn--user-login-form {}


Extra template suggestions

Added a more specific template suggestion. One based upon the ID of the form.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'form' -->
   x form--user-login-form.html.twig
   * form.html.twig

In above example:

  • user-login-form is the ID of the form


Extra functions

Create the possibility to have form-specific preprocess functions.

So inside form--user-login-form.theme you could now have this function:


 * Implements template_preprocess_hook().
function compony_preprocess_form__user_login_form(&$variables, $hook) {
  // Do custom preprocessing here, 
  // only for the user-login-form. 

(Docs: Extending hooks yourself)

Form theming in Drupal can be very painful, therefor we are taking a robust approach to making the life of frontend fast by laying out some groundrules:

  1. Form-items always have to live in fieldsets.
  2. We don't support #markup type form-elements, as it is impossible to predict what HTML will be rendered in there.
  3. We don't support the #prefix and #suffix on form-fields defined in the backend, as it is impossible to predict what HTML will be rendered in there.

Complying with these rules are the absolute minimum for a frontender to be able to set up a design system. It's not because it's possible in Drupal's Form system, that it's a possibility for a frontender to theme.

Drupal Core
Using Sass
Flat design
horizontal beam No open issue