How can I access individual form elements for theming?

Question

I have overridden the default user login form in Drupal 8 using a different template in my sub theme, but it isn't of much use because when I access it in twig template, all I can do is

<form {{attributes}}>
{{children}}
</form>

Doing this I get the elements in same order, and there is not lot of modification option. I can put them in container but that is it. I was wondering there was instead a way to call elements like username field, password field individually instead of doing a bulk call using {{children}}.

Answer 1

That's a case for the new Formdazzle! module.

Drupal form theming with less pain

Theming drupal forms can be difficult and time-consuming. This module provides a set of utilities that make form theming easier.

Currently, this module provides theme suggestions for forms that are much more useful than those provided by Drupal core.

• Theme suggestions for all form elements (including buttons)
• Theme suggestions for all form element labels
• All theme suggestions include the form ID and the form element name; e.g. [element-type]--[form-id]--[form-element-name].html.twig

While Drupal core only provided these two theme suggestions:

input.html.twig
input--textfield.html.twig

Formdazzle adds the following two theme suggestions to the list:

input--textfield--webform-contact-form.html.twig
input--textfield--webform-contact-form--first-name.html.twig