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',
'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' -->
<!-- FILE NAME SUGGESTIONS:
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:
<?php
/**
* 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:
- Form-items always have to live in fieldsets.
- We don't support #markup type form-elements, as it is impossible to predict what HTML will be rendered in there.
- 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.