How to add attributes to forms?

Question

I am trying to style the registration/login forms so far I have copied all the files from \drupal\core\themes\stable\templates\form\ to themes\mytheme\template\form.

Inside this folder, for example there is input.html.twig which has the following code.

{#
/**
 * @file
 * Theme override for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * @see template_preprocess_input()
 */
#}
<input{{ attributes }} />{{ children }}

My question is how can I add a specific class name to this input, so I can apply styles to it in my css file

Answer 1

You can use the addClass() method of the attribute class:

{%
  set classes = [
    'my-class-1',
    'my-class-2',
  ]
%}

<input{{ attributes.addClass(classes) }}>

You can either pass an array like the example above or pass a single class in the method directly: attributes.addClass('my-class').

For reference see the Drupal docs: https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates